Post an Array of Objects via JSON to ASP.Net MVC3

Question

I'm looking for a solution to POSTing an array of objects to MVC3 via JSON.

Example code I'm working off of: http://weblogs.asp.net/scottgu/archive/2010/07/27/introducing-asp-net-mvc-3-preview-1.aspx

JS:

var data = { ItemList: [ {Str: 'hi', Enabled: true} ], X: 1, Y: 2 };

$.ajax({
    url: '/list/save',
    data: JSON.stringify(data),
    success: success,
    error: error,
    type: 'POST',
    contentType: 'application/json, charset=utf-8',
    dataType: 'json'
});

ListViewModel.cs:

public class ListViewModel
{
    public List<ItemViewModel> ItemList { get; set; }
    public float X { get; set; }
    public float Y { get; set; }
}

ItemViewModel.cs:

public class ItemViewModel
{
    public string Str;   // originally posted with: { get; set; }
    public bool Enabled; // originally posted with: { get; set; }
}

ListController.cs:

public ActionResult Save(ListViewModel list)
{
    // Do something
}

The result of this POST:

list is set, to a ListViewModel
Its X and Y properties are set
The underlying ItemList property is set
The ItemList contains one item, as it should
The item in that ItemList is uninitialized. Str is null and Enabled is false.

Put another way, this is what I get from MVC3's model binding:

list.X == 1
list.Y == 2
list.ItemList != null
list.ItemList.Count == 1
list.ItemList[0] != null
list.ItemList[0].Str == null

It would appear the MVC3 JsonValueProvider is not working for complex objects. How do I get this to work? Do I need to modify the existing MVC3 JsonValueProvider and fix it? If so, how do I get at it and replace it in an MVC3 project?

Related StackOverflow questions I've already pursued to no avail:

Asp.net Mvc Ajax Json (post Array) Uses MVC2 and older form-based encoding - that approach fails with an object that contains an array of objects (JQuery fails to encode it properly).

Post an array of complex objects with JSON, JQuery to ASP.NET MVC Controller Uses a hack I'd like to avoid where the Controller instead receives a plain string which it then manually deserializes itself, rather than leveraging the framework.

MVC3 RC2 JSON Post Binding not working correctly Didn't have his content-type set - it's set in my code.

How to post an array of complex objects with JSON, jQuery to ASP.NET MVC Controller? This poor guy had to write a JsonFilter just to parse an array. Another hack I'd prefer to avoid.

So, how do I make this happen?

Answer 1

In addition to { get; set; }, these are some of the conditions for JSON Binding Support:

1. This is new feature in ASP.NET MVC 3 (See “JavaScript and AJAX Improvements“).
2. The JSON object’s strings (‘X’, ‘Y’, ‘Str’, and ‘Enabled’) must match ViewModel object’s properties.
3. ViewModel object’s properties must have { get; set; } method.
4. Must specify Content Type as “application/json” in the request.
5. If it's still not working, check the JSON string to make sure it's valid one.

Read more at my post.

Hope that helps!

Answer 2

The problem was that the properties in the models that were in the List did not have get/set on their public properties. Put another way, MVC3's automatic JSON binding only works on object properties that have get and set.

This will not bind:

public string Str;

This will bind:

public string Str { get; set; }