Convert .Net object to JSON object in the view

Question

I want to convert a .Net object in to JSON in the view. My view model is like this,

public class ViewModel{
    public SearchResult SearchResult { get; set;}    
}    

public class SearchResult {
    public int Id { get; set; }
    public string Text{ get; set; }
}

I want to convert Model.SearchResult in to a JSON object. Currenty I'm doing it like this:

System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
//....
var s = @serializer.Serialize(Model.Institution);

but the result is like this,

var s = { &quot;Name&quot;:&quot;a&quot;,&quot;Id&quot;:1};
Create:228Uncaught SyntaxError: Unexpected token &

How can I convert this correctly in to a JSON object?

refer http://stackoverflow.com/questions/3365551/asp-net-mvc-how-to-convert-view-model-into-json-object — Hemant Metalia, Dec 14 '11 at 09:36

score 65 · Accepted Answer · answered Dec 15 '11 at 00:35

65

Try using this method:

@Html.Raw(Json.Encode(Model.Content))

answered Dec 15 '11 at 00:35

Kyeotic

19,697
10
71
128

Is there any way to change the default Json.Encode serializer to JSON.NET? – D.Rosado Jun 12 '13 at 09:33
If you google `.net default json serializer` you will find a ton of links for doing exactly that. – Kyeotic Jun 12 '13 at 16:37
1

This is the best answer. Could only be more simple if the actual string was JSON to begin with :) – Joshua Mar 20 '14 at 21:44
1

For those wondering,`Json.Encode` is found in `System.Web.Helpers`. – oscilatingcretin Feb 24 '15 at 12:12
@Tyrsius, Those results do not tell you how to change Json.Encode to use the JSON.NET serializer. – Joel McBeth May 20 '15 at 21:03

score 35 · Answer 2 · edited May 23 '17 at 12:02

I use this helper since asp.net mvc 2

public static MvcHtmlString ToJson(this HtmlHelper html, object obj)
{
  JavaScriptSerializer serializer = new JavaScriptSerializer();
  return MvcHtmlString.Create(serializer.Serialize(obj));
}

public static MvcHtmlString ToJson(this HtmlHelper html, object obj, int recursionDepth)
{
  JavaScriptSerializer serializer = new JavaScriptSerializer();
  serializer.RecursionLimit = recursionDepth;
  return MvcHtmlString.Create(serializer.Serialize(obj));
}

And in the view:

  <script>
    var s = @(Html.ToJson(Model.Content));
  </script>

I should replace serializer with the JSON.Encode(..) now, like mentionned in the refer by Hemant. (It use itself JavaScriptSerializer).

The source of your problem is the "@" which HTML encode the JSON. You can use @Html.Raw(..) to avoid this behavior.

+: take a look for Json.Net http://json.codeplex.com/

JSON.Net update

I've updated the helper a while ago with JSON.net (much better).

It seems some users continue to read, upvote and use the old code. I'd like they use a better way, with the new version below, or by using NGon like Matthew Nichols has noticed it in a comment.

Here's the code:

using System;
using Newtonsoft.Json;

namespace System.Web.Mvc
{
  public static class HtmlHelperExtensions
  {
    private static readonly JsonSerializerSettings settings;

    static HtmlHelperExtensions()
    {
      settings = new JsonSerializerSettings();
      // CamelCase: "MyProperty" will become "myProperty"
      settings.ContractResolver = new Newtonsoft.Json.Serialization.CamelCasePropertyNamesContractResolver();
    }

    public static MvcHtmlString ToJson(this HtmlHelper html, object value)
    {
      return MvcHtmlString.Create(JsonConvert.SerializeObject(value, Formatting.None, settings));
    }
  }
}

I typically set up NGon (https://github.com/brooklynDev/NGon) for this sort of thing but if I am just using in one spot this is a nice solution. — Matthew Nichols, Mar 15 '13 at 17:20

Clarence · Answer 3 · 2016-09-30T20:58:24.890

This is an update to my original answer and I'll admit that as a result of the insistent badgering of @Tyrsius :D who refused to give up the fact that I could not access vars created in <script> tags in my MVC 5 cshtml page from my .js libraries in separate files, I discovered that if I placed the script tags inside of the @section scripts statement block that the vars created there did make the global scope and was available to my plugin widgets. I have not used it within any of my more complex apps as of yet, but did use it in a protoType of another app and the answer is below. Now @Html.Raw(...) works and I was able to serialize an object that I could immediately use.

This is something I will be using from now on... thanks again for hanging in there with me @Tyrsius

   @section scripts
    {
    <script type="text/javascript">
        @using MRTCProtoType.Models.ControllerData.Contracts

        var testVar = @Html.Raw(JsonConvert.SerializeObject(WMMWorkloadTestData.getWorkloadTestData()));
    </script>
        @Scripts.Render("~/bundles/homeworkflow")
    }

The following code is in a separate .js file

$(document).ready(function() {  
    alert(JSON.stringify(testVar));
});

This is an interesting "gotcha" that I haven't run into before, thank you for including it =) — Kyeotic, Sep 30 '16 at 20:49
Thanks for nudge... it made me do the work to find a much better solution... notice the slight of hand cred I gave u lol... — Clarence, Sep 30 '16 at 20:50

Convert .Net object to JSON object in the view

3 Answers3

Linked