Passed JSON collection not picked up by controller - asp.net-mvc

Question

I have the following javascript snippet:
$.ajax({
url: self.LoadCirculationListUrl,
cache: false,
async: false,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: [ { "ColumnName":"France","Comparitor":"=","Value":"1"},{"ColumnName":"Germany","Comparitor":">","Value":"3"}]
});
Here is the controllre which is accessed from the above ajax call:
public ActionResult LoadCirculationData(IList<CirculationListFilter> filters)
{
}
Here is the CirculationListFilter class
public sealed class CirculationListFilter
{
public string ColumnName { get; set; }
public string Comparitor { get; set; }
public string Value { get; set; }
}
Now when I run the code, the controller does not get the JSON collection passed to it; filters is always null. However, if I do this:
$.ajax({
url: self.LoadCirculationListUrl,
cache: false,
async: false,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: { "ColumnName":"Germany","Comparitor":">","Value":"3"}
});
and the contoller is like this:
public ActionResult LoadCirculationData(CirculationListFilter filters)
{
}
The data is passed fine. Why can't the controller bind a collection of JSON items?
EDIT:
I changed the AJAX call to use this:
data: { filters: [{ "ColumnName": "France", "Comparitor": "=", "Value": "1" }, { "ColumnName": "Germany", "Comparitor": ">", "Value": "3" }]},
and the ActionResult:
public ActionResult LoadCirculationData(List<CirculationListFilter> filters)
Now filters has 2 items inside of it, but each of the CirculationListFilter classes are populated with NULL data in their properties. So I'm getting closer, but the actual values are not being binded.

Answer 1

The problem is in the .ajax() call.
.ajax() doesn't convert the data into JSON string.
The reason why it works for one item is because .ajax() was able to convert the data into a query string which MVC happily accepted.
The solution is to convert the JSON into string first:
$.ajax({
url: self.LoadCirculationListUrl,
cache: false,
async: false,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify([ { "ColumnName":"France","Comparitor":"=","Value":"1"},{"ColumnName":"Germany","Comparitor":">","Value":"3"}])
});

Answer 2

I've found another solution:
Ajax call:
data: { 'json': '[{ "ColumnName": "France", "Comparitor": "=", "Value": "1" }, { "ColumnName": "Germany", "Comparitor": ">", "Value": "3" }]' },
Controller:
public ActionResult LoadCirculationData(string json)
{
JavaScriptSerializer js = new JavaScriptSerializer();
var obj = js.Deserialize<List<CirculationListFilter>>(json);
}
The above gives me the items that I need. Really not sure why the JSON binder doesn't do this by default.

Answer 3

If you want to recieve in this format
public ActionResult LoadCirculationData(IList<CirculationListFilter> filters)
{
}
You need to post it in next format data: {
{
"ColumnName[0]":"Germany","Comparitor[0]":">","Value[0]":"3",
"ColumnName[1]":"Germany","Comparitor[1]":">","Value[1]":"3",
"ColumnName[2]":"Germany","Comparitor[2]":">","Value[2]":"3",
"ColumnName[3]":"Germany","Comparitor[3]":">","Value[3]":"3",
"ColumnName[4]":"Germany","Comparitor[4]":">","Value[4]":"3",
}