Submit array param with jQuery ajax/load

Question

public ActionResult DoSomething(string[] arr, bool someBool, int someInt) { }

trying to call the above method from jQuery:

var test = [];
test.push('dog');
test.push('cat');

$container.load('MyController/DoSomething',
                { 'arr[]': test, 'someBool': true, 'someInt': 1 },
                function(response, status, xhr) {
                    // ...
                });

the array paramater is null, other params are fine. What am I doing wrong?

Chrome developer tools shows form data being submitted as

arr%5B%5D%5B%5D:dog
arr%5B%5D%5B%5D:cat
someBool:true
someInt:1

not sure whats going on there but doesn't look right to me

Madaih

Answer 1

If you are using jquery 1.4 you might need to set the traditional parameter to true in order to be compatible with the default model binder format in ASP.NET MVC:

var test = [];
test.push('dog');
test.push('cat');

$.ajax({
    url: 'MyController/DoSomething',
    type: 'GET',
    traditional: true,
    data: { arr: test, someBool: true, someInt: 1 },
    success: function(result) {
        $container.html(result);
    }
});

or if you prefer the .load() method:

var data = { arr: test, someBool: true, someInt: 1 };
$container.load('MyController/DoSomething', $.param(data, true), 
    function(response, status, xhr) {
    // ...
});

Yirinec

yep that's it. I've actually come across this problem before but had forgotten until this answer jogged my memory. – Madaih

Thanks for the example using 'load' instead of 'ajax'. – Applejack

Same issue happens with Java Struts2 and this fix is also good for Struts2 – Ngo

Thanks especially for these three lines: var test = []; test.push('dog'); test.push('cat'); I don't know what I was doing wrong, but until I re-built my array using ".push", nothing worked for me. – Insufficiency

Answer 2

Just remove []

{ 'arr': test, 'someBool': true, 'someInt': 1 },

Posted values (checking with Firebug).

arr[]       dog
arr[]       cat
someBool    true
someInt     1

• Example on jsFiddle

Bashee

removing the brackets doesn't make it work, I already tried without. Though note the jQuery documentation gives the example with brackets, so I presume thats the correct way: $("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } ); – Madaih

Answer 3

can you see if this problem is similar to yours:

Passing an nested arrays to asp.net mvc using jQuery's $.ajax

Geyser

Answer 4

Even i was facing error, in passing array from HTML page to aspx page.

my requirement was to load the aspx page in a DIV tag of the html page. on the page load i need to pass these JS array values to aspx page load.

i used below method.

$('#<divTagID>').load("Targetpage.aspx",{"Arr":JSArrValues});

In aspx page load event i can access this values as:

string results = Response["Arr[]"];

Thanks to JQuery API documentation enter link description here and stackoverflow

Truett