Question

I have code that I pass from jQuery to my ASP.Net MVC controller and it works fine. I am now trying to replicate the same functionality in a new situation and the parameter shows up as null when I put a breakpoint in my controller code.

Can anyone see anything wrong with the code below. In firebug I see that calendarIds is a perfectly populated array but it shows up as null on the server side.

Here is my jQuery code:

var calendarIds = [];

$('#box2View option').each(function () {
    calendarIds.push($(this).val());
});

$.post(
    '/EventCalendar/UpdateVisibleCalendars/', 
    { calendarIds: calendarIds }, 
    function (data) {
        //do some callback stuff here (not relevant for question)
    }, 
    "html"
);

Here is my controller code

public ActionResult UpdateVisibleCalendars(int[] calendarIds)
{
    // right here i check calendarIds and its always NULL :(
    return null;
}

Answer 1

Use $.ajax() which allows you to set the traditional flag to true:

$.ajax({
    url: '/EventCalendar/UpdateVisibleCalendars/',
    type: 'POST',
    traditional: true,
    data: { calendarIds: calendarIds },
    dataType: 'html',
    success: function (data) {

    }
});

Now the POST body will look like this:

calendarIds=1&calendarIds=2&calendarIds=3

With tgraditional=false (which is the default starting from jQuery 1.4) the POST body looks like this:

calendarIds[]=1&calendarIds[]=2&calendarIds[]=3

And by consulting this blog post you will understand that only the first is compatible with the default model binder.

The jQuery’s traditional flag is well explained in the $.param() section.