MVC3 ajax post mutliple checkbox values to controller

Question

Using MVC3 I am trying to accomplish the following. I have a table which has a number of values, using ajax I want to be able to select the remove checkbox (for any number of rows) which is part of the table.

The using ajax post the result to the controller for processing. The issue I currently have is I cannot get the controller to accept the data coming from the ajax post.

I am making use of jQuery and json to make the ajax call.

function removeRooms() {
    var jdata = { 'mRooms': [] };
    $('input:checked').each(function () {
        jdata['mRooms'].push($(this).val());        })

    $.ajax({
        url: "/room/removeselectedroom/@Model.mRoomid",
        type: "POST",
        dataType: "json",
        data: jdata,
        success: function (msg) {
            $('#mRooms').html(msg);
        }
    })
}

Any help you can give or resources would be appreciated.

EDIT:: One extra thing. I am getting through a IEnumerable object but there is a parameter an item in position one of the list with the value 'on' strange as there is only numbers in my checkboxes.

place the debugger at the start of your controller and see if ever the debugger is hit? i think the url part should be like url:"/controllername/action/"[email protected] — Rafay
– Rafay, Commented Jul 12, 2011 at 15:26
The controller is being hit the answer given by @danielb solved the intital question. As stated in my edit I now have a random value appearing in the IEnumerable<string> object which is not part of anything on my view form. — Matt Seymour
– Matt Seymour, Commented Jul 12, 2011 at 15:31
Thanks this has now been solved. The reason was a checkbox which was hidden on the page. I have now excluded this from the result set. — Matt Seymour
– Matt Seymour, Commented Jul 12, 2011 at 15:51

DanielB · Accepted Answer · 2011-07-12 15:29:17Z

4

Try to serialize the data with traditional: true

$.ajax({
    url: "/room/removeselectedroom/@Model.mRoomid",
    type: "POST",
    dataType: "json",
    data: jdata,
    traditional: true,
    success: function (msg) {
        $('#mRooms').html(msg);
    }
})

Here some information about array serialization.

As of jQuery 1.4, the $.param() method serializes deep objects recursively to accommodate modern scripting languages and frameworks such as PHP and Ruby on Rails. You can disable this functionality globally by setting jQuery.ajaxSettings.traditional = true;.

ASP.Net MVC model binding requires array data in form of

mRooms=1&mRooms=2&mRooms=3

But from jQuery 1.4 it sends

mRooms[]=1&mRooms[]=2&mRooms[]=3

This is why you have to use traditional: true

edited Jul 12, 2011 at 15:29

answered Jul 12, 2011 at 15:23

DanielB

20.3k2 gold badges48 silver badges52 bronze badges

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

1 Comment

Matt Seymour Over a year ago

You legend that is what I was looking for. What is it the traditional = true does?

Collectives™ on Stack Overflow

MVC3 ajax post mutliple checkbox values to controller

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related