CODEWITHSUNDEEP
asp.net-mvcjqueryasp.net-mvc-4
ZedBee
ZedBee

Reputation: 2378

Passing Multiple Checkbox value using jquery ajax

I am displaying multiple records on my ASP.NET MVC 4 view where each record has a checkbox. I want the user to be able to select multiple records (by checking checkboxes) and click Delete button in order to delete them. So far I can call the Delete Action method via jquery ajax but the problem is my action method does not seem to be accepting the passed array. Here is my jquery code:

    $(function () {

    $.ajaxSetup({ cache: false });

    $("#btnDelete").click(function () {
        $("#ServicesForm").submit();
    });

    $("#ServicesForm").submit(function () {
        var servicesCheckboxes = new Array();            
        $("input:checked").each(function () {
            //console.log($(this).val()); //works fine
            servicesCheckboxes.push($(this).val());
        });

        $.ajax({
            url: this.action,
            type: this.method,
            data: servicesCheckboxes,
            success: function (result) {
                if (result.success) {


                    }
                    else {
                    }

                }
        });
        return false;

    });
});

and here is my action method:

[HttpPost]
public ActionResult DeleteServices(int[] deleteservice)
{
   if (deleteservice != null)
   {
     //no hit
   }
}

What am I missing?

Edit

I also tried console.log(servicesCheckboxes); before $.ajax() which outputs ["3", "4"] but still get null when I pass data as specified in answer below data: { deleteservice: servicesCheckboxes }. Even I tried data: [1,2] but still action method shows null for deleteservice in action method.

Upvotes: 2

Views: 9257

Answers (2)

ZedBee
ZedBee

Reputation: 2378

Finally got it working. "MVC detects what type of data it receive by contentType" as explained here so I made the following changes to $.ajax()

$.ajax({
url: this.action,
type: this.method,
dataType: "json"
//data: { deleteservice: servicesCheckboxes }, // using the parameter name
data: JSON.stringify({ deleteservice: servicesCheckboxes }),
contentType: 'application/json; charset=utf-8',
success: function (result) {
    if (result.success) {
    }
    else {
    }    
  }
});

Upvotes: 0

Felipe Oriani
Felipe Oriani

Reputation: 38598

Just pass the array to your action:

$.ajax({
    url: this.action,
    type: this.method,
    dataType: "json"
    data: { deleteservice: servicesCheckboxes }, // using the parameter name
    success: function (result) {
        if (result.success) {
        }
        else {
        }    
    }
});

Or, just use the serialize() jquery method to serialize all fields inside your form:

$.ajax({
    url: this.action,
    type: this.method,
    dataType: "json"
    data: $(this).serialize(),
    success: function (result) {
        if (result.success) {
        }
        else {
        }    
    }
});

In your controller:

[HttpPost]
public ActionResult DeleteServices(int[] deleteservice)
{
    bool deleted = false;
    if (deleteservice != null)
    {
        // process delete
        deleted = true;
    }   

   return Json(new { success = deleted });
}

Upvotes: 3

Related Questions