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

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:

https://stackoverflow.com/questions/2203912/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).

https://stackoverflow.com/questions/760249/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.

https://stackoverflow.com/questions/4627985/mvc3-rc2-json-post-binding-not-working-correctly Didn't have his content-type set - it's set in my code.

https://stackoverflow.com/questions/320291/how-to-post-an-array-of-complex-objects-with-json-jquery-to-asp-net-mvc-controll 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?

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!

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; }

That's strange. I am unable to reproduce your behavior. Here's my setup (ASP.NET MVC 3 RTM):

Model:

public class ItemViewModel
{
    public string Str { get; set; }
    public bool Enabled { get; set; }
}

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

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Save(ListViewModel list)
    {
        return Json(list);
    }
}

View:

@{
    ViewBag.Title = "Home Page";
}

<script type="text/javascript">
    $(function () {
        var data = { ItemList: [{ Str: 'hi', Enabled: true}], X: 1, Y: 2 };

        $.ajax({
            url: '@Url.Action("save", "home")',
            data: JSON.stringify(data),
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            success: function (result) {
                alert(result.ItemList[0].Str);
            }
        });
    });
</script>

Running this alerts "hi" and inside the Save action everything is correctly initialized.

And just for the record what doesn't work are Dictionaries. I've opened a ticket about the issue.

I had a similar issue, and found that for a complex object, the numeric values were getting missed. They were coming in as zeros. i.e.

    var person = {
        Name: "john",
        Age: 9
    }

was being received by MVC controller as a Person object where the properties were being populated as Name=John and Age=0.

I then made the Age value in Javascript to be string... i.e.

    var person = {
        Name: "john",
        Age: "9"
    }

And this came through just fine...

Its because the MVC binders kind of suck. However, they do work pretty well if all JSON values come over as a string.

In JS if you do this

var myObject = {thisNumber:1.6};

myObject.thisNumber=myObject.thisNumber-.6;

It will evaluate to 1 not to 1.0

So when you sent it over to the server it will try to bind to a float of that name and it will not find it since it came over as 1 instead of 1.0. Its very lame and crazy that MS engineers did not come up with a default solution to this. I find if you string everything the bindings are smart enough to find things.

So before sending the data over run it though a stringifier that will also convert all values to strings.

All previous answers were great to point me to solution of the similar problem. I had to POST x-www-form-urlencoding instead of application/json (default option if contentType parameter is missing) to be able to pass __RequestVerificationToken and simultaneously faced with problem when object properties being in the array do not bind their values. The way to solve the issue is to understand internal work of MVC model binder.

So, basically when you need to supply verification token you are restricted with validation attribute. And you must provide the token as the parameter not as a part of the JSON-object you are sending. If you would not use ValidateAntiForgeryToken, you could get along with JSON.stringify. But if you would, you could not pass the token.

I sniffed traffic to backend when ContentType was x-www-form-urlencoding and I remarked that my array of complex objects was serialized to something like that: klo[0][Count]=233&klo[0][Blobs]=94. This array initially was a part of root object, let's say some model. It looked like that: model.klo = [{ Count: 233, Blobs: 94}, ...].

At the backend side this klo property was creating by MVC binder with the same elements count that I sent. But these elements itself did not obtain values for their properties.

SOLUTION

To deal with this I excluded klo property from the model object at the client side. In the ajax function I wrote this code:

data: $.param(model) + "&" + arrayOfObjectsToFormEncoding("klo", [{ Count: 233, Blobs: 94}, ...])
....

    function arrayOfObjectsToFormEncoding (modelPropertyName, arrayOfObjects) {
        var result = "";
        if (arrayOfObjects && typeof arrayOfObjects == "object") {
            for (var i = 0; i < arrayOfObjects.length; i++) {
                var obj = arrayOfObjects[i];
                if (obj) {
                    for (var p in obj) {
                        if (obj.hasOwnProperty(p)) {
                            result += encodeURIComponent(modelPropertyName + "[" + i + "]." + p) + "=" + encodeURIComponent(obj[p]) + "&";
                        }
                    }
                }
            }
        }

        if (result[result.length - 1] == "&") {
            result = result.substr(0, result.length - 1);
        }

        return result;
    }

The function transforms array of complex object into form that is recognized by MVC-binder. The form is klo[0].Count=233&klo[0].Blobs=94.