Send list/array as parameter with jQuery getJson

Question

I have the following where I'm trying to send list/array to MVC controller method:

var id = [];
var inStock = [];

$table.find('tbody>tr').each(function() {
    id.push($(this).find('.id').text());
    inStock.push($(this).find('.stocked').attr('checked'));
});

var params = {};
params.ids = id;
params.stocked = inStock; 

$.getJSON('MyApp/UpdateStockList', params, function() {
    alert('finished');
});    

in my contoller:

public JsonResult UpdateStockList(int[] ids, bool[] stocked) { }

both paramaters are null.

Note that if I change the params to single items

params.ids = 1;
params.stocked = true; 

public JsonResult UpdateStockList(int ids, bool stocked) { }

then it works ok, so I don't think it's a routing issue.

Answer 1

Try setting the traditional flag:

$.ajax({
    url: '/home/UpdateStockList',
    data: { ids: [1, 2, 3], stocked: [true, false] },
    traditional: true,
    success: function(result) {
        alert(result.status);
    }
});

works fine with:

public ActionResult UpdateStockList(int[] ids, bool[] stocked)
{
    return Json(new { status = "OK" }, JsonRequestBehavior.AllowGet);
}

Answer 2

Besides calling .ajax() instead of .getJSON() as Darin suggests or setting the global jQuery.ajaxSettings.traditional to true as jrduncans suggests, you can also pass the result of calling the jQuery .param() function on your params object:

var id = [];
var inStock = [];

$table.find('tbody>tr').each(function() {
    id.push($(this).find('.id').text());
    inStock.push($(this).find('.stocked').attr('checked'));
});

var params = {};
params.ids = id;
params.stocked = inStock; 

$.getJSON('MyApp/UpdateStockList', $.param(params, true), function() {
    alert('finished');
});    

Answer 3

Unfortunately, while it seems that jquery provides a "traditional" flag to toggle this behavior on jQuery.ajax, it does not on jQuery.getJSON. One way to get around this would to be set the flag globally:

jQuery.ajaxSettings.traditional = true;

See the documentation for jQuery.param: http://api.jquery.com/jQuery.param/ Also see the release notes for this change: http://jquery14.com/day-01/jquery-14 (search for 'traditional')

Answer 4

In the view, generate multiple named fields (not id, as id should be unique per field), noting the use of Name not name:

@foreach (var item in Model.SomeDictionary)
{
    @Html.TextBoxFor(modelItem => item.Value.SomeString, new { Name = "someString[]" })
}

Then retrieve the input field values using jQuery, so:

var myArrayValues = $('input[name="someString[]"]').map(function () { return $(this).val(); }).get();

You can use this directly in jQuery / AJAX as follows:

$.ajax({
    type: "POST",
    url: "/MyController/MyAction",
    dataType: 'json',
    data: {
        someStrings: $('input[name="someString[]"]').map(function () { return $(this).val(); }).get(),
        someDates: $('input[name="someDate[]"]').map(function () { return $(this).val(); }).get(),

Then in the controller action in MVC:

[HttpPost]
public JsonResult MyAction(string[] someStrings, DateTime[] someDates...