How to send a list of int with jQuery to ASP.net MVC Default Model Binder

Question

When I send a list of int's with jQuery like this:

$.ajax('@Url.Action("Execute")', {
    type: 'POST',
    data: {
        pkList: [1,2,3]
    }
});

Then jQuery will transform the pkList object and send it by post like this:

pkList[]:1
pkList[]:2
pkList[]:3

Which would be fine if the server is PHP but I use Asp.NET MVC3 and try to get these values with the default model binder:

public ActionResult Execute(ICollection<int> pkList)

But pkList is always null, it seems that the default model binder cannot bind it.

How do I solve this correctly?

ADDED SOLUTION

I used the solution from Darin Dimitrov with setting the traditional option in jQuery:

$.ajax('@Url.Action("Execute")', {
    type: 'POST',
    traditional: true,
    data: {
        pkList: [1,2,3]
    }
});

Now jQuery doesn't add the [] to the parameters anymore and they are sent like this:

pkList:1
pkList:2
pkList:3

And the MVC default model binder gets the values correctly.

Hope this helps someone.

Darin Dimitrov · Accepted Answer · 2011-10-28T17:21:27.997

21

You could use a JSON request as it will allow you to send any complex objects you wish:

$.ajax({
    url: '@Url.Action("Execute")',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ pkList: [1, 2, 3] }), // you could throw any javascript object you like here
    success: function(result) {
        // process the results
    }
});

The JSON.stringify method is built in modern browsers and if you want to support legacy browsers you could include the json2.js script to your site.

And to answer your question you could use set the traditional: true option to indicate to jQuery to fallback to traditional serialization of parameters since this has changed in jQuery 1.4 and if you are using a later version you have the possibility to switch back to the way parameters are serialized:

$.ajax({ 
    url: '@Url.Action("Execute")',
    type: 'POST',
    data: {
        pkList: [1, 2, 3]
    },
    traditional: true
});

edited Oct 28 '11 at 17:21

answered Oct 28 '11 at 17:16

Darin Dimitrov

1,023,142
271
3,287
2,928

Won't the default model binder also handle comma separated lists of form encoded data as well? Something like `data: { pkList: '1,2,3' }`? But otherwise I use this method for all of my model serialization, the way to go for more complex objects in JS. – Paul Tyng Oct 28 '11 at 17:41
@PaulT., no, the default model binder will not accept `data: { pkList: '1,2,3' }`. If you want to handle such requests a custom model binder will be necessary where you would need to split the entries and then parse each one back to an integer. It wouldn't be necessary to go through this pain if the goal is to send an array of integers to a controller action. – Darin Dimitrov Oct 28 '11 at 17:44
ah yeah I see what you mean now, just tested it, its weird though because if you have two inputs with the same name it does actually deserialize that to a list, just jQuery's serialization to form post data doesn't handle that (ie. pkList=1&pkList=2 works) – Paul Tyng Oct 28 '11 at 18:02
@PaulT.: You point it out exactly, the (new) default jQuery json list serialization doesn't match the default mvc 3 default model binder json deserialization. Isn't that a little bit weird just because mvc is shipped with jQuery? – Marc Oct 29 '11 at 02:35
@DarinDimitrov: Thanks a lot, never known the `traditional` option in jQuery. I set it in my default ajax options and never have to care about that again in my projekt, works great! Also is good to know the `JSON.stringify` method. I don't know why this isn't included in jQuery (with fallback to legacy browsers), I think it should be? – Marc Oct 29 '11 at 02:40

score 1 · Answer 2 · answered Jul 13 '18 at 15:36

Adding this because @Darin miss the controller action.

Java script code:

function sendArray() {
    var list = ["a", "b"];

    $.ajax({
        url: '@Url.Action("ActionName")',
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ list }),
        dataType: "json",
        success: function (response) {},
        error: function (response) {}
    });
}

C# code

[HttpPost]
public ActionResult ActionName(List<string> list)
{
    return View();
}

I am going through the same method. But, null is getting received in the server. — Amrendra, Jan 14 '20 at 13:47

score 0 · Answer 3 · answered Oct 28 '11 at 17:13

0

Phil Haack has a great article on his blog that should point you in the right direct.

Model Binding To A List

answered Oct 28 '11 at 17:13

Erik Philips

53,428
11
128
150

Thanks mate, I read that before, but it doesn't help me, the problem was more on the jQuery side :) – Marc Oct 29 '11 at 02:49

How to send a list of int with jQuery to ASP.net MVC Default Model Binder

3 Answers3

Linked