ASP.NET DefaultModelBinder isn't binding JSON collection objects

Question

Here's my controller:

public class TagsController : Controller
{
  public ActionResult Attach(TagsAttach model)
  {
    // ...
  }
}

Here are my view-models:

public class TagsAttach
{
  public int GroupID { get; set; }
  public List<Tag> Tags { get; set; }
}

public class Tag
{
  public int ID { get; set; }
}

And here's the Javascript code that I'm using to attempt to submit my data:

var data = {
  GroupID: 12,
  Tags: []
};

data.Tags.push({ ID: 3 });
data.Tags.push({ ID: 4 });

$.push('/Tags/Attach', data);

However, when I debug my controller action, I find everything is there except for the ID values in each of the Tag objects.

Thus, my 'model' parameter looks like this:

model
  GroupID  12
  Tags
    Tag
      ID   0
    Tag
      ID   0

Why is this? What do I have to do for ASP.NET MVC to bind my ID values correctly?

(Note: what I'm doing seems pretty much exactly the same as this. So why isn't it working for me?)

Darin Dimitrov · Accepted Answer · 2011-11-06 11:02:41Z

ASP.NET MVC 3 has a built-in JsonValueProviderFactory which allows you to send JSON requests to controller actions and the default model binder will be able to convert this JSON string into the corresponding view model. You could use the $.ajax method like this:

var dataToSend = { 
    // model is the name of the action parameter
    // this nesting could be omitted
    model: { 
        GroupID: 12, 
        Tags: [ { ID: 3 }, { ID: 4 } ] 
    } 
};

// the following will also work but assumes that you have a single
// action argument. And since your actions should take only the view model
// as action argument it is also a good way: 
// var dataToSend = { GroupID: 12, Tags: [ { ID: 3 }, { ID: 4 } ] };

$.ajax({
    url: '@Url.Action("Attach", "Tags")',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(dataToSend),
    success: function(result) {
        alert('success');
    }
});

This allows you to send arbitrary complex javascript literals to controller actions.

Important remarks:

contentType: 'application/json; charset=utf-8' sets the Content-Type request header so that the server knows that we are sending a JSON request.
JSON.stringify is a method which serializes a javascript literal into a JSON string. This method is natively built into modern browsers but if you need to support legacy browsers you could include the json2.js script to your page.

Jonathan · Accepted Answer · 2011-11-06 07:39:40Z

Upon further examination, it appears that this isn't possible due to a basic incompatibility between the jQuery JSON processor used by '$.post' and the DefaultModelBinder in ASP.NET MVC.

Basically, I can get the model-binding to work if I simulate a post in fiddler with the following data (serializing it also, of course):

SearchTagID=1&ApplicationType=0&Items[0].ID=2&Items[1].ID=672

Notice that it's using 'dot' notation, e.g.: Items[0].ID=2.

The jQuery code is using 'square-bracket' notation, as below:

SearchTagID=1&ApplicationType=0&Items[0][ID]=2&Items[1][ID]=672

So unless there's a way to make jQuery use dot-notation instead, I guess I'll have to figure out some kind of work-around.

Collectives™ on Stack Overflow

ASP.NET DefaultModelBinder isn't binding JSON collection objects

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related