Nick Riggs, Web Developer

Making stuff up about web development since last week.

31 July 2010

Subscribe to our RSS feed

Post Complex JavaScript Objects to ASP.NET MVC Controllers

Posted in ASP.NET’JavaScript August 21, 2009

Use the plug-in postify.js to handle posting complex JavaScript objects to ASP.NET MVC controllers using the default model binder

There is a lot on conversation going on about binding complex JavaScript objects to ASP.NET MVC actions.   Complex objects are objects that have sub objects and/or arrays.

Let’s assume the following complex model:

Complex Model

I have a Person object with some properties, an array of phone numbers and an Address object. I would like to pass a JavaScript representation of this object to our Controller’s Create action:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create(Person person)
{
    //Code to add the person goes here

    //return the view
    return View();
}

On the client, the JavaScript representation of a Person would be:

var myPerson = {
    FirstName: "Nick",
    LastName: "Riggs",
    Age: 29,
    Address: {
        Street: "2780 Somewhere Far",
        City: "Birmingham",
        State: "AL"
    },
    PhoneNumbers: [
        "205-555-5634",
        "205-555-2294",
        "205-555-7681"
    ]
};

One way to send this object to our Controller is to “stringify” the object into a JSON string using a plugin like toJSON. However, this requires us to change the Action to accept a string instead of a typed parameter, and then deserialize the string using the JavaScriptSerializer. I can get around this by automating the deserialization with a custom ActionFilterAttribute or ModelBinder. But, what if I want to use the built-in DefaultModelBinder functionality?

The default model binding in ASP.NET MVC works based on form post data. For example, if I were going to post a simple version of Person and have ASP.NET MVC map it to our action’s person parameter, I could post:

person.FirstName: Nick
person.LastName: Riggs
person.Age: 29

ASP.NET MVC does a good job of recognizing this post data as being a Person and mapping it as such. On top of that, it has its own simple yet powerful syntax for representing more complex objects, such as this:

person.FirstName: Nick
person.LastName: Riggs
person.Age: 29
person.PhoneNumbers[0]: 205-555-5634
person.PhoneNumbers[1]: 205-555-5634
person.PhoneNumbers[2]: 205-555-5634
person.Address.Street: 2780 Somewhere Far
person.Address.City: Birmingham
person.Address.State: AL

So, instead of stringifying my JavaScript objects, I will postify them! (I made the word postify™ up, it’s mine now). My custom postify plug-in will do the work. Here is the source code:

$.postify = function(value) {
    var result = {};

    var buildResult = function(object, prefix) {
        for (var key in object) {

            var postKey = isFinite(key)
                ? (prefix != "" ? prefix : "") + "[" + key + "]"
                : (prefix != "" ? prefix + "." : "") + key;

            switch (typeof (object[key])) {
                case "number": case "string": case "boolean":
                    result[postKey] = object[key];
                    break;

                case "object":
                    if (object[key].toUTCString)
                        result[postKey] = object[key].toUTCString().replace("UTC", "GMT");
                    else {
                        buildResult(object[key], postKey != "" ? postKey : key);
                    }
            }
        }
    };

    buildResult(value, "");

    return result;
};

This is the first cut of the plug-in, and I’m sure it’s missing something – I’ll update the source code as I make updates. That said, the plug-in greatly simplifies posting complex objects to ASP.NET MVC controllers. Here is a sample in jQuery that posts myPerson:

$.ajax({
    type: "POST",
    url: "/People/Create",
    data: $.postify(myPerson)
});

That’s it!  The plugin will handle formatting the data in an ASP.NET MVC post-friendly manner. On the server side, the parameter inflates nicely using the default model binder:

Inflated-Person

If you need to post to an action that takes multiple parameters, the complex object must be prefixed with the name of the parameter – in our case, Person. To include another parameter, use this syntax:

$.ajax({
    type: "POST",
    url: "/JSON/DoSomething",
    data: $.postify({
        person: myPerson,
        otherParam: true
    })
});


Download Icon - Small Download Source Code