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-28 17:21:27Z

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, 2011 at 17:21

answered Oct 28, 2011 at 17:16

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Paul Tyng Over a year ago

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.

Darin Dimitrov Over a year ago

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

Paul Tyng Over a year ago

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)

Marc Over a year ago

@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 Over a year ago

@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?

Vasil Valchev · Accepted Answer · 2018-07-13 15:36:41Z

1

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

answered Jul 13, 2018 at 15:36

Vasil Valchev

5,8572 gold badges38 silver badges40 bronze badges

1 Comment

Amrendra Over a year ago

I am going through the same method. But, null is getting received in the server.

Erik Philips · Accepted Answer · 2011-10-28 17:13:41Z

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, 2011 at 17:13

Erik Philips

54.8k11 gold badges133 silver badges158 bronze badges

1 Comment

Marc Over a year ago

Thanks mate, I read that before, but it doesn't help me, the problem was more on the jQuery side :)

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related