My Point of View

Let’s begin with a model.

public class RoleModel
{ 
     public int RoleId { get; set; }
     public string RoleName { get; set; }
}

Add some data to the model;

List<RoleModel> roles = new List<RoleModel> {
     new RoleModel{
                     RoleId= 1,
                     RoleName = "Administrator"
                },
     new RoleModel
                {
                     RoleId = 2,
                     RoleName = "Manager"
                }
            };

Pass this to razor view;

@model List<RoleModel>

Declare Javascript Sections in your razor view;

<end of HTML here>
@section Scripts
{
    //go with jQuery ready function
    $(document).ready(function () {
       //get model data here
       var roles = @Html.Raw(Json.Serialize(Model.Roles));

       //iterate through model data

       $.each(roles, function(i, role){
            console.log(role.roleName);
      });
  }
}

This will output this data;

AspNetCore

AspNetCore uses Json.Serialize intead of Json.Encode

var json = @Html.Raw(Json.Serialize(@Model.Roles));

MVC 5/6

You can use Newtonsoft for this:

    @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model, 
Newtonsoft.Json.Formatting.Indented))

This gives you more control of the json formatting i.e. indenting as above, camelcasing etc.

What this code does?

@model CourseVM
<script type="text/javascript">
    var model = @Html.Raw(Json.Encode(Model));
    // go ahead and use the model javascript variable to bind with ko
</script>

Json.Encode serialises the Model to a JSON string. Html.Raw ensures that it is rendered verbatim and isn’t HTML-encoded by Razor. If it is Html-encoded (which Razor does by default) special characters will be converted to their HTML entity representations (e.g. & becomes &). Then the JSON string might not be valid JSON.

There are arguments that encoding protects against script injection and Html.Raw removes that protection.

Html encode() is a built-in feature in MVC so we shouldn’t be worried about script injection in MVC.

Let’s say we are manually creating Json Data and use ASP.NET Core to quickly come up with a layout. This is the data (JSON output) and final outcome that we expect;

# JSON output

[ { "text": "Head Office", "nodes": [ { "text": "Finance Division", "href": "#parent1", "tags": [ "4" ], "nodes": [ { "text": "Accounting functions", "href": "#child1", "tags": [ "2" ], "nodes": [ { "text": "205", "href": "#grandchild1", "tags": [ "0" ] }, { "text": "206", "href": "#grandchild2", "tags": [ "0" ] } ] }, { "text": "Customer Invoicing", "nodes": [ { "text": 205 }, { "text": 206 } ] }, { "text": "Vendor Invoicing", "nodes": [ { "text": 205 }, { "text": 206 } ] }, { "text": "Banking relationship", "nodes": [ { "text": 205 }, { "text": 206 } ] } ] } ] } ]

Create your test data and drop it under Models, call it DummyData.json. Make sure it’s a valid JSON. These are the lines that we need in controller action method;

var folderDetails = Path.Combine(Directory.GetCurrentDirectory(), $"Models\\{"DummyData.json"}");
var JSON = System.IO.File.ReadAllText(folderDetails);
ViewBag.defaultData = JSON;

return View(result);

In the view, we are rendering ViewBag values in a div HTML tag;

<div id="layoutData">@(ViewBag.defaultData)</div>

We are using jQuery to read this data and use it in any control;

var layoutData = $('#layoutData').text();

You can use layoutData variable anywhere you want. Make sure you are not vulnerable to XSS attacks. For XSS attacks, read this