Why does the modelbinder instantiate empty objects for my list in ASP.NET MVC4?

Question

I have a json object like this:

var itemData = {
   "translations":[
      {
         "value":"Byron",
         "languageId":1             
      },
      {
         "value":"hgfdfghds",
         "languageId":3
      }
   ],
   "itemId":204,
   "itemCategoryId":44
};

And I POST it using jQuery like this:

$.ajax({
    url: "items/update",
    dataType: "json",
    type: "POST",
    data: itemData,
});

When the call arrives at my ASP.NET MVC4 controller action, the non-list properties are assigned. However, the translations array only has two empty objects (instantiated, but with null/default property values). Here is my controller action method and my models:

public JsonResult Update(UpdateItemModel model)
{
    if(model.Translations[0].Value!="Byron")
    {
        throw new Exception("That translation's value should have been populated with 'Byron'.");
    }
    return Json("ok");
}

public class UpdateItemModel
{
    public List<TranslationModel> Translations { get; set; }
    public int ItemId { get; set; }
    public int ItemCategoryId { get; set; }
}

public class TranslationModel
{
    public string Value { get; set; }
    public int LanguageId { get; set; }
}

If I look at Request.Form in the immediate window, I can see that the translations "array" is encoded for some reason (maybe that's correct, not sure). If I try Request.Form["translations"] I get null . Here's an example of the raw form data that I'm seeing:

{translations%5b0%5d%5bvalue%5d=Byron&translations%5b0%5d%5blanguageId%5d=1&translations%5b1%5d%5bvalue%5d=hgfdfghds&translations%5b1%5d%5blanguageId%5d=3&itemId=204&itemCategoryId=44}

Not sure if my problem has anything to do with the "encoding" of the json at the beginning of that string. I looked at it in Fiddler and saw the same thing, so I can't blame ASP.NET for tampering.

What could be the problem here?

Answer 1

You should specify the content type (json) and stringify it using JSON.stringify

$.ajax({
    url: "items/update",
    dataType: "json",
    contentType: "application/json; charset=utf-8;",
    type: "POST",
    data: itemData,
    data: JSON.stringify(itemData),
});

Another thing to do is use add a JsonValueProviderFactory :

ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());

in Application_Start method in Global.asax

This article might help you.

Answer 2

When you pass data for Ajax call is good to specify the content and stringfy the data:

$.ajax({
   /*More stuff*/
   data: JSON.stringify(itemData),
   contentType: 'application/json',
   dataType: "json",
   type: "POST"
});

Then the value provider and the default ModelBinder will do the job.

Answer 3

I can see the json object properties are not matching .net properties, In json you have "value" in .net "Value" case is different. Try making the case to march the .net model