sp_t9q
Last Updated: September 05, 2017
·
17.73K
· waynedenier
Waynebuddybig

Sending complex JSON to MVC 3 with ModelBinding

You don't need to settle for shallow model binding! Forget about traditional = true;! You can pass a complex model (multiple nested classes) and chances are you have everything you need as long as you are using MVC 3 and a modern version of jQuery.

Create a JSON object that will contain the data you want to send with your request.

Here's an example.

{
    People: [{
        Name: 'John Doe',
        Phone: 5551231234,
        Address: [{
            Street: '12 Mulberry Lane',
            City: 'Austin',
            State: 'TX',
            Zip: 78726
        }]
    }]
}

Create a new ajax request using jQuery.

Stringify your object and pass it as the data option. Set the type to 'POST' and contentType to 'application/json; charset=utf-8'.

var myObject = JSON.stringify("{People: [{Name: 'John Doe',Phone: 5551231234,Address: [{Street: '12 Mulberry Lane',City: 'Austin',State: 'TX',Zip: 78726}]}]}");

$.ajax({    
    type: 'POST',
    url: '/People/Update',
    data: myObject,
    contentType: 'application/json; charset=utf-8'
});

Create a model on the server

This is really quick, two step process. First, copy a sample instance of the JSON object you've created. Then, either right click in a .cs code file in Visual Studio and select Paste Special > Paste JSON as Classes, OR paste your JSON in to http://json2csharp.com/. Either should produce something like this to put in to your MVC project...

public class Rootobject
{
    public Person[] People { get; set; }
}

public class Person
{
    public string Name { get; set; }
    public long Phone { get; set; }
    public Address[] Address { get; set; }
}

public class Address
{
    public string Street { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public int Zip { get; set; }
}

Add the Rootobject as an arg to the MVC Action

Feel free to rename the Rootobject class to whatever you feel comfortable with (such as PersonUpdateRequest).

public ActionResult Update(Rootobject request)
{
    \\ check the request for People and save them or whatever!
}

That's it! Things to note:

  • contentType on the $.ajax() request MATTERS. MVC's model binding only knows to look for your JSON content and deserialize it if it sees 'application/json; charset=utf-8'.
  • The root object is important. You can't pass lists on their own; put them in a root object as the only member.
Say Thanks
Respond

3 Responses
Add your response

13263
C15b48caf08a45933d26a6892284e27f

Nice. Thanks a lot :)

over 1 year ago ·
19985
None

this is great but on big forms you end coding twice the code repeating the names of your fields(and getting the values via jquery) and i'm not yet talking about maintaining the website if you add another property it breaks the json post, until you update the manual stringify model there should be a dynamic way to JSON.stringify({}) your form as your model updates

over 1 year ago ·
21129
None

@antonioespinosa : your concern is valid, do you've any alternate solution for the same?

over 1 year ago ·