Json object from Razor model in Javascript

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 @Html.Raw() and Json.Encode() does

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 &amp;). 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.

URL Matching in C#

To start, let’s define what the internals of a URL looks like:

For our purposes, we care about the scheme, authority, path, query, and fragment. You can think of the scheme as the protocol, i.e., HTTP or HTTPS. The authority is the root or domain, for example, mycompany.com. The path, query, and fragment make up the rest of the URL. The URL spec defines each segment in this specific order. For example, the scheme always comes before the authority. The path comes after the scheme and authority. The query and fragment come after the path if there is one in the URL.

Read this, if thinking about using fragment in URL.

Alice runs a web site, Bob visits it, authenticates and receives a session cookie. (Some time might pass here, Bob might even close his browser.) Charlie sends Bob a mail saying “check out this cool link!”. Bob opens the link, which leads to a site controlled by Charlie. The page redirects Bob’s browser to a page on Alice’s site with an attack payload in the hash. The payload is executed, and since the browser still remembers the cookies, it can just send them to Charlie

https://stackoverflow.com/questions/1822598/getting-url-hash-location-and-using-it-in-jquery

Read more here

Quick layout using pre-defined Json Data

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

JSON from Controller to View in ASP.NET MVC Core and avoid XSS

When working on your ASP.NET MVC application, you often need to include some of your app’s data as Javascript objects. You may need this for some interactive behaviour, graphs/charts, or simply to “hydrate” the UI with the relevant information, such as username etc.

There’s certainly a big push to move away from rendering JSON data in MVC Views. Instead, it’s recommended to use Ajax calls that fetch JSON data from backend APIs. This helps to separate concerns in your application, making it more maintainable and easier to support, test and debug.

However, sometimes it’s OK to put JSON data directly in MVC Views:

  • performance–it saves you another network call
  • prototyping–test your idea before you spend a lot of time on adding another endpoint to your backend API
  • size of the data–if it’s just a small object, you may not want to create a separate endpoint just for that thing
  • legacy–the app you’re working on is ancient, soon-to-be-retired, so there’s really no point putting lipstick on the pig

With these caveats in mind, let’s see how you can easily put some JSON into your ASP.NET MVC views.

Encoding problem

The problem with outputting any values into Views in ASP.NET MVC is that the framework encodes the output, trying to save you from introducing Cross-Site Scripting (XSS) vulnerabilities to your front-end code.

Briefly, an XSS vulnerability is when an attacker can provide some content that has a malicious Javascript payload, which then gets rendered by your web app and executed in users’ browsers.

Check out “Prevent Cross-Site Scripting (XSS) in ASP.NET Core” for more details on how to avoid this happening to your app.

The encoding that ASP.NET MVC does for you replaces all special characters like "'<> (and a few more) with their corresponding HTML codes, such &#39;&quot;&lt;&gt;.

Say you have an object Customer, and you are trying to put it in a <script> section like this:

  <script>
    var customers = JSON.parse('@JsonSerializer.Serialize(Model.Customer)');
  </script>

then all you are going to end up in the browser is going to look something like this:

  <script>
    var customers = JSON.parse('{&quot;Id&quot;:1,&quot;FirstName&quot;:&quot;Hasim&quot;,&quot;LastName&quot;:&quot;Santello&quot;,&quot;DOB&quot;:&quot;2/09/2004&quot;}');
  </script>

and it’s not even a correct JSON! ASP.NET MVC made it safe for you, but also, unfortunately, also broke it.

@Html.Raw to the rescue

To turn all those &quot; and such into proper Javascript, you need to tell ASP.NET to skip the encoding and output the raw data:

  <script>
    // ...
    var customers = JSON.parse('@Html.Raw(JsonSerializer.Serialize(Model.Customers))');
    // ...
  </script>

…and viola! it results in a nice, clean, parsable JSON:

  <script>
    // ...
    var customers = JSON.parse('{"Id":1,"FirstName":"Hasim","LastName":"Santello","DOB":"2/09/2004"}');
    // ...
  </script>

Passing the data from Controller to View

In this instance, I strongly recommend avoid using TempDataSessionViewData or ViewBag and just pass the data you need in the view as part of the controller’s model. There are multiple reasons why you shouldn’t be using the methods listed above, but the main is to keep things simple and strongly-typed. So in your controller return the view in the following manner:

  public IActionResult YourControllerMethod()
  {
      var model = new YourModelClass
      {
        // Set whichever fields in here
      };
      return View(model);
  }

…and in your view, at the top of the page, declare the model class, so that you can have compile-time checking and code completion:

  @model YourModelClass
  <!-- rest of your View.cshtml -->

A word of warning about XSS

As mentioned previously, check out that XSS article, and also be mindful of how you use the data received from the server, whether that’s embedded in the page with @Html.Raw or via Ajax.

For instance, do not concatenate strings to make HTML entities. This example

  <script>
    // ...
    var customer = JSON.parse('... some malicious JSON here with XSS attack...');
    $(body).append($('<div>' + customer.Name + '</div>');
    // ...
  </script>

will introduce a very obvious XSS security hole in your site, because if a malicious user updates their name to <script>alerts('YOU PWND!');</script> that code will execute on clients’ browsers.

Whichever JavaScript framework you’re using, check its documentation on how to avoid XSS. With jQuery, use methods like .text() to set text of newly created elements.