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.

Maomaoism

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);
}

Skuld

genius, thank you! It seems there is a bug in getJson with 1.4.2, see forum.jquery.com/topic/… – Maomaoism

This is not a bug. It is a breaking change from previous the version. That's why they introduced the traditional parameter. – Skuld

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');
});    

Essay

Yeah, I agree. While Darin pointed out the traditional flag (you're awesome don't get me wrong), this answer let's you use getJson, which is what OP wanted. – Hammond

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')

Singlecross

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

Wedged