passing an array of int to MVC controller using ajax javascript

Question

What am I doing wrong here?

I can successfully pass 4 bool params to a controller. Now I want to pass an array of int to my controller but it doesn't work - I've left my working code in the example(commented out) so you can see I'm not changing that much - I think I'm missing something simple (it is 17:44 afterall!!!). I can see the array is populated using the alert(rolesChecked); statement:

var rolesChecked = [];
$('[type="checkbox"].role-checkbox').each(function () {
    if (this.checked)
    {
        rolesChecked.push($(this).val());
    }
});

alert(rolesChecked);

//var administrator = $('#cbAdministrator').is(":checked");
//var manager = $('#cbManager').is(":checked");
//var technician = $('#cbTechnician').is(":checked");
//var transcriber = $('#cbTranscriber').is(":checked");

if (rolesChecked.count > 0){//administrator || manager || technician || transcriber) {
    $.ajax({
        url: '@Url.Action("GetFutureHolidays", "Employee")',
        type: 'GET',
        dataType: 'json',
        // we set cache: false because GET requests are often cached by browsers
        // IE is particularly aggressive in that respect
        cache: false,
        data: {
            roleIdXXXs: rolesChecked
            //includeAdministrator: administrator,
            //includeManager: manager,
            //includeTechnician: technician,
            //includeTranscriber: transcriber
        },
        success: function (data) {

            //do something...
        }
    });
}

Controller Action:

public string GetFutureHolidays(List<int> roleIdXXXs)//bool includeAdministrator, bool includeManager, bool includeTechnician, bool includeTranscriber)
{
    //do something
}

with the old code, the controller action would be hit... with the array, it never gets hit... What am I missing here...

also, I think List<int> roleIdXXXs should be fine, but I also tried List<string>, int[] and string[] in case it isn't!!!

Possible duplicate: http://stackoverflow.com/questions/15782417/post-javascript-array-with-ajax-to-asp-net-mvc-controller?rq=1 — Maria Ines Parnisari, Oct 08 '15 at 16:51

score 18 · Accepted Answer · edited May 23 '17 at 12:33

18

You need to add the traditional: true ajax option to post back an array to the collection

$.ajax({
    url: '@Url.Action("GetFutureHolidays", "Employee")',
    type: 'GET',
    dataType: 'json',
    cache: false,
    data: { roleIdXXXs: rolesChecked },
    traditional: true, // add this
    success: function (data) {
    }
});

Refer also the answer to this question for more detail on what the options does and the form data it generates.

edited May 23 '17 at 12:33

Community

1
1

answered Oct 09 '15 at 00:40

Awesome, thanks - for anyone wondering, the above works and controller can be: `public string GetFutureHolidays(List roleIdXXXs)` – Percy Oct 09 '15 at 09:07
I've chosen this as the answer because I don't need to deserialise in the controller from a json string. – Percy Oct 09 '15 at 09:08
I've been looking for this answer a really long time – Phate01 Aug 01 '16 at 12:56

score 1 · Answer 2 · answered Oct 08 '15 at 17:10

1

In your if statement, instead of rolesChecked.count, use rolesChecked.length

answered Oct 08 '15 at 17:10

JB06

1,881
14
28

Thanks - you're the only one who spotted the count error... I'm new to javascript and rolesChecked.count is undefined!!!! so the ajax query wasn't actually called!!!! using rolesChecked.length means the ajax query is called and the controller action is hit. However I still needed to set `traditional: true` or the array isn't passed to the controller action, just null. Thanks – Percy Oct 09 '15 at 09:10
I tested with your code and only changed count to length and everything worked. Not sure why you have to add traditional. – JB06 Oct 12 '15 at 00:39
it was always null without `traditional` - seems weird that it's ok for you... I'll retest if I get a chance. – Percy Oct 12 '15 at 13:46
What MVC version are you using? I don't know if that will have anything to do with it or not. I used 5 for testing. I also tried it with `List roleIdXXXs` and it worked too. – JB06 Oct 12 '15 at 15:59

score 1 · Answer 3 · answered Oct 08 '15 at 17:25

You can't submit a list like this from Ajax, the quickest fix in the process you are using is to use serialization-desalinization process, you can send it as

roleIdXXXs: JSON.stringify(rolesChecked)

on Action:

public ActionResult GetFutureHolidays(string rolesChecked)
{
    var test = new JavaScriptSerializer().Deserialize<List<int>>(rolesChecked);
}

score 0 · Answer 4 · answered Oct 08 '15 at 16:51

You should use JSON.stringify() on you AJAX call lice this:

data: {
            roleIdXXXs: JSON.stringify(rolesChecked)
            //includeAdministrator: administrator,
            //includeManager: manager,
            //includeTechnician: technician,
            //includeTranscriber: transcriber
        }

passing an array of int to MVC controller using ajax javascript

4 Answers4