10 Feb 2021
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:
With these caveats in mind, let’s see how you can easily put some JSON into your ASP.NET MVC views.
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.
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
Say you have an object
Customer, and you are trying to put it in a
<script> section like this:
then all you are going to end up in the browser is going to look something like this:
and it’s not even a correct JSON! ASP.NET MVC made it safe for you, but also, unfortunately, also broke it.
To turn all those
encoding and output the raw data:
…and viola! it results in a nice, clean, parsable JSON:
In this instance, I strongly recommend avoid using
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:
…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:
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
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 Javacript framework you’re using, check its doco on how to avoid XSS. With jQuery, use
.text() to set text of newly created elements.
Download fully tested and 100% working Visual Studio solution with the source code used in this article for FREE–just enter your name and email in the form below, and I’ll send you the download link right away.
You will also get access to all the source code for all existing and new articles on the site, and access to my mailing list, which receives handy timesaving tips on .NET Core programming.