Nick Riggs, Web Developer

Making stuff up about web development since last week.

19 December 2014

Subscribe to our RSS feed

Posted in ASP.NETJavaScript 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:

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