Post Complex JavaScript Objects to ASP.NET MVC Controllers

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:

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:

1

2

3

4

5

6

7

8

[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:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

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:

1

2

3

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:

1

2

3

4

5

6

7

8

9

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:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

$.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:

1

2

3

4

5

$.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:

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:

1

2

3

4

5

6

7

8

$.ajax({

type: "POST",

url: "/JSON/DoSomething",

data: $.postify({

person: myPerson,

otherParam: true

})

});