Skip to main content

JSON, ASP.NET MVC and JQuery - Working with Untyped JSON made easy

image

In this post, we’ll create a JsonValue binder for ASP.NET MVC3, to parse incoming Json to the JsonValue implementation to access/modify values in an untyped way, using ‘dynamic’ features (See the examples below).

Note: ASP.NET MVC3 already supports binding incoming Json to typed parameters, read more about that in Scott’s post. This post is more towards untyped, server side Json manipulation scenarios.

A Quick Preface on JsonValue Implementation

Few months ago, Glenn Block posted about the new WCF web API stack, and in his PDC talks, he demonstrated the new Json primitives with ‘dynamic’ support.

To summarize, this allows you to manipulate Json data using a dynamic wrapper, as shown in Glenn’s post.

[ServiceContract]
  
  //A method in your service
  public JsonValue Post(JsonValue contact)
    {
        var postedContact = (dynamic)contact;
        var contactResponse = (dynamic)new JsonObject();
        contactResponse.Name = postedContact.Name;
        contactResponse.ContactId = nextId++;
        return contactResponse;
    }

From Glenn's post

In the snippet above you can see that the Post method accepts a JsonValue and returns a JsonValue. Within it casts the incoming parameter to dynamic (there actually is an extension method AsDynamic which you can use) pulls out the name and then creates a new JsonObject which it sets some properties on and returns.

I’m a big fan of fluent wrappers on top of data formats like Json and Xml (See my previous ElasticObject implementation). The new JsonValue class comes with a bunch of goodness, Read the documentation here, and have a look at the actual implementation here

 

Creating a JsonValue binder for ASP.NET MVC

Now, Let us see how to create a model binder for MVC, to accept Json data you may post from the client side using JQuery. The idea is to to parse the same to the JsonValue object and hand over the same to a parameter of an Action in your controller. This will enable you to leverage the goodness of JsonValue for untyped scenarios, from your ASP.NET MVC controllers.

At this point, you may fire up your Visual Studio, and start a new ASP.NET MVC3 application. Next, you need to add references to the Microsoft.Runtime.Serialization.Json library. You can do this either by downloading the codebase from http://wcf.codeplex.com, or you can get going easily by adding a package reference to WcfWebApis from your MVC project, using nuget. Just goto View->Other Windows->Package Manager console, and type

install-package WcfWebApis

You may also read more about installing packages via Package Manager Console

Once you’ve the package reference added - You can put together a model binder in your MVC project to parse the incoming Json, to return a JsonValue object as shown. Read more about Modelbinders here if required

So, here is our DynamicJsonBinder which parses the incoming Json data to a JsonValue instance.

  public class DynamicJsonBinder : IModelBinder
    {
        public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
        {

            if (!controllerContext.HttpContext.Request.ContentType.StartsWith
                ("application/json", StringComparison.OrdinalIgnoreCase))
            {
                // not JSON request
                return null;
            }

            var inpStream = controllerContext.HttpContext.Request.InputStream;
            inpStream.Seek(0, SeekOrigin.Begin);

            StreamReader reader = new StreamReader(controllerContext.HttpContext.Request.InputStream);
            string bodyText = reader.ReadToEnd();
            reader.Close();


            if (String.IsNullOrEmpty(bodyText))
            {
                // no JSON data
                return null;
            }

            return JsonValue.Parse(bodyText);
        }

    }
We'll also need a custom model binder attribute, to tie the above Modelbinder to an action parameter of a given Action in a controller.
    public class DynamicJsonAttribute : CustomModelBinderAttribute
    {
        public override IModelBinder GetBinder()
        {
            return new DynamicJsonBinder();
        }
    }

Once you’ve the Model and ModelBinder ready, add a method/action in any of your MVC project Controllers. We’ll create a simple action that’ll accept a product and will return a list of suppliers, all using JSON.

        public ActionResult GetSuppliers([DynamicJson] JsonValue product)
        {

            var prod = product.AsDynamic();

            //Assume you are getting suppliers from a document database
            //based on prod.name
            var sup = JsonValue.Parse(@"[{""name"":""Supplier1""},
                                    {""name"":""Supplier2""}]");
            prod.suppliers = sup;

            //Return the modified json object
            return Content(product.ToString(), "application/json");
        }

So, I just added a GetSuppliers action to my Home controller, which takes a JsonValue object. Note that we are marking our action parameter with the [DynamicJson] attribute we created above - to ensure that our DynamicJsonBinder is invoked to bind the incoming Json data to the action parameter.

Also, we are manipulating the JsonValue object in our controller (just attaching some suppliers), and returns the same as Json with out any friction. You may note how easily this will go with JSON data sources, like document dbs. JsonValue implementation also supports Linq to Json, see the documentation on JsonValue here in Codeplex.

The Client Side

Ok, now we are ready to post a product to our GetSuppliers method, and get the result. We’ll just make a JQuery ajax post to our HomeController’s GetSuppliers action, with a product, when the user clicks the button btnGetSuppliers.

    <script type="text/javascript">

        $(document).ready(function () {
            var product = { name: "Pizza" };
            $("#btnGetSuppliers").click(function () {
                $("#prods").html("");
                $.ajax({
                    url: "/Home/GetSuppliers",
                    type: "POST",
                    dataType: "json",
                    contentType: 'application/json',
                    data: JSON.stringify(product),
                    success: function (response) {
                        $("#prodtemplate").tmpl(response).appendTo("#prods");
                    }
                });
            });

            $("#prodtemplate").tmpl(product).appendTo("#prods");

        });
    
    </script>

And you may also notice in the above code that, up on success, we are rendering the response using the JQuery Template plugin, to the prods div.

A template contains markup with binding expressions. The template is applied to data objects or arrays, and rendered into the HTML DOM.

In this case, remember that we modified our Json object in our Controller’s action to attach suppliers to it and then returned the Json - So the data that you’ll be getting back from your controller action may contain suppliers. We’ll render the Product using the template below. You may read more on how to use JQuery template’s tmpl() function to render templates here. The related html and the template is given below.

<input type="button" id="btnGetSuppliers" value="Send JQuery" />
<div id="prods" />


 <script id="prodtemplate" type="text/x-jquery-tmpl">
        <div>
           Name: ${name}<br/>
           {{if suppliers}}
           Suppliers:
           <ul>
           {{each(i,supplier) suppliers}}
            <li> ${supplier.name}</li>
           {{/each}}
           </ul> 
           {{/if}}
        </div>
    </script>

So, to conclude – We just saw how easy it is to work with Json data in ASP.NET MVC, especially leveraging the new JsonValue implementation. And this has some very interesting possibilities that I’ll explore later.

You may also read my previous posts on ASP.NET MVC and JQuery if you are interested.

Popular posts from this blog

Top 7 Coding Standards & Guideline Documents For C#/.NET Developers

Some time back, I collated a list of 7 Must Read, Free EBooks for .NET Developers, and a lot of people found it useful. So, I thought about putting together a list of Coding Standard guidelines/checklists for .NET /C# developers as well.As you may already know, it is easy to come up with a document - the key is in implementing these standards in your organization, through methods like internal trainings, Peer Reviews, Check in policies, Automated code review tools etc. You can have a look at FxCop and/or StyleCop for automating the review process to some extent, and can customize the rules based on your requirements.Anyway, here is a list of some good Coding Standard Documents. They are useful not just from a review perspective - going through these documents can definitely help you and me to iron out few hidden glitches we might have in the programming portion of our brain. So, here we go, the listing is not in any specific order.1 – IDesign C# Coding StandardsIDesign C# coding stand…

Hack Raspberry Pi – How To Build Apps In C#, WinForms and ASP.NET Using Mono In Pi

Recently I was doing a bit of R&D related to finding a viable, low cost platform for client nodes. Obviously, I came across Raspberry Pi, and found the same extremely interesting. Now, the missing piece of the puzzle was how to get going using C# and .NET in the Pi. C# is a great language, and there are a lot of C# developers out there in the wild who are interested in the Pi.In this article, I’ll just document my findings so far, and will explain how develop using C# leveraging Mono in a Raspberry Pi. Also, we’ll see how to write few minimal Windows Forms & ASP.NET applications in the Pie as well.Step 1: What is Raspberry Pi?Raspberry Pi is an ARM/Linux box for just ~ $30. It was introduced with a vision to teach basic computer science in schools. How ever, it got a lot of attention from hackers all around the world, as it is an awesome low cost platform to hack and experiment cool ideas as Pi is almost a full fledged computer.  More About R-Pi From Wikipedia.The Raspberry Pi

5 Awesome Learning Resources For Programmers (To help you and your kids to grow the geek neurons)

Happy New Year, this is my first post in 2012. I’ll be sharing few awesome learning resources I’ve bookmarked, and will be pointing out some specific computer/programming related courses I've found interesting from these resources.Also, thought about saving this blog post for my kids as well - instead of investing in these Child education schemes (though they are too small as of today, 2 years and 60 days respectively ). Anyway, personally my new year resolution is to see as much videos from this course collections (assuming I can find some free time in between my regular job && changing my babies diapers).1 – Khan AcademyAs I mentioned some time back, you and your kids are missing some thing huge if you havn’t heard about Khan Academy.  It is an awesome learning resource, especially if you want to re-visit your basics in Math, Science etc.With a library of over 2,600 videos covering everything from arithmetic to physics, finance, and history and 268 practice exercises, th…