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

Answer 1

Just remove []

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

Posted values (checking with Firebug).

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

• Example on jsFiddle

Answer 2

can you see if this problem is similar to yours:

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

Answer 3

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) {
    // ...
});