Writing JSON via MVC and RAZOR

Question

I have an ASP.NET MVC 4 app. This app has a view with a block of javascript in the footer. I'm using the RAZOR view engine. I'm trying to figure out how to convert my result set into a JSON array. Currently, I'm doing the following:

<script type="text/javascript">
@for (int i=0; i<ViewBag.States.Count; i++) {
    <text>
        { id: @Html.Raw(ViewBag.States[i]["ID"], name: \"" + ViewBag.States[i]["Name"] + "\"}")
    </text>
    if (i < (ViewBag.States.Count - 1)) {
        <text>,</text>
    }
}
</script>

This approach seems syntactically sloppy. However, I'm not sure how else to do it. Does anyone know how I can clean this up? With this approach, I can't even figure out how to wrap the "ID" value in quotes.

Answer 1

I know the question has been answered more than a year ago already but I wanted to add my solution, which imho is the cleanest.

What I basically did is this (uses Newtonsofts Json.Net). I've created an extension method for the HtmlHelper class like this:

public static class HtmlHelperExtensions
{
    public static HtmlString ToJson(this HtmlHelper @this, object value)
    {
        return new HtmlString(JsonConvert.SerializeObject(value));
    }

    public static HtmlString ToJson(this HtmlHelper @this, object value, Formatting formatting)
    {
        return new HtmlString(JsonConvert.SerializeObject(value, formatting));
    }
}

This allowed me to do:

$scope.test = @(Html.ToJson(new []
                    {
                        new {id='1',name="Hello", desc="World"},
                        new {id='1',name="Hello", desc="World"},
                        new {id='1',name="Hello", desc="World"}
                    }));

Which results into:

$scope.test = [{"id":"1","name":"Hello","desc":"World"},{"id":"1","name":"Hello","desc":"World"},{"id":"1","name":"Hello","desc":"World"}];

Basically your example would become something like:

@(Html.ToJson(ViewBag.States.Select(s=>new {id=s["ID"], name=s["Name"]})))

or

@(Html.ToJson(
    from state in ViewBag.States
    select new {id=state["ID"], name=state["Name"]}))

Answer 2

You can serialize your collection to JSON by using the JavaScriptSerializer class:

@{
   var serializer = new JavaScriptSerializer();
   var serializedData = serializer.Serialize(Enumerable.Select(ViewBag.States, state =>
                                                      new {
                                                            id = state["ID"],
                                                            name = state["Name"]
                                                           }));

}

You can render the serilized data the following way:

@Html.Raw(serializedData)

And you can parse it for javascript usage like this:

JSON.parse('@Html.Raw(serializedData)');

I think there's some kind of a syntactic mistake in your example and I was not able to figure out what you intend to use the Html.Raw() method call for, but you can make slight modification of my code and insert the method call wherever it's needed.

Answer 3

Razor handles xml based languages much better, but for the sake of correctness: this is actually possible.

I think you wanted to do it like this:

@model IEnumerable<Your.Actual.Namespace.State>
[
@for (int i=0; i < Model.Count; i++) {
    var item = Model[i];
    <text>{ id: @Html.Raw(item["ID"]), name: '@Html.Raw(item["Name"])' }</text>
    if (i < (Model.Count - 1)) 
    {
        <text>,</text>
    }
}
]

When calling the View, write it like this:

return View(states);

"states" should be the array of "State" objects you put in your ViewBag previously. You add it as the model this way and you can use it in the .cshtml as Model (you can see that in my code).

I also cleaned up your code a little bit.

I'm not recommending you to do it this way, but this has one big advantage over doing it with a json serializer from an object in the controller: You can change the serialization without rebuilding and republishing your code to the production server.

So overall your code will be quite ugly, you can do nothing about this, but it can be changed on a live application just by editing the cshtml.

I would do this in like 1 case over a 100, but there are times when this kind of flexibility could be important. Not in your case though. If your json has a predefined format you should really just use some kind of json serializer, like Nico or Rickard suggested.

Answer 4

If you don't want to load it via Ajax I'd recommend that you make a model in your controller and then serialize it to a string and expose that as the @Model itself or in the ViewBag.

One way is to use JsonObject in either JSON.NET or ServiceStack.Text and use its serializer to get the string.