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(functio         


        

Answer 1

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 2

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 3

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 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...