The JSON collection not collected by the controller is transferred

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 control accessed by 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 receive the JSON collection passed to it; filters always zero. 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 as follows:

 public ActionResult LoadCirculationData(CirculationListFilter filters) { } 

Data is transmitted in order. Why can't the controller bind a collection of JSON elements?

EDIT:

I modified the AJAX call to use this:

 data: { filters: [{ "ColumnName": "France", "Comparitor": "=", "Value": "1" }, { "ColumnName": "Germany", "Comparitor": ">", "Value": "3" }]}, 

and ActionResult:

 public ActionResult LoadCirculationData(List<CirculationListFilter> filters) 

filters now contain 2 elements inside, but each of the CirculationListFilter classes is populated with NULL data in its properties. So I'm getting closer, but the actual values ​​are not tied.

Answer 1

The problem is calling .ajax ().

.ajax () does not convert data to a JSON string.

The reason it works for a single element is because .ajax () was able to convert the data into a query string, which MVC happily accepted.

The solution is to convert the JSON to a 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 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. Not really sure why the JSON middleware doesn't do this by default.

Answer 3

If you want to receive in this format

 public ActionResult LoadCirculationData(IList<CirculationListFilter> filters) { } 

You need to place it in the following formats: {

 { "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", }