Passing Multiple Checkbox value using jquery ajax

Question

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.

Felipe Oriani · Accepted Answer · 2013-01-28 21:31:01Z

3

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

edited Jan 28, 2013 at 21:31

answered Jan 28, 2013 at 21:25

Felipe Oriani

38.7k20 gold badges141 silver badges203 bronze badges

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

1 Comment

ZedBee Over a year ago

thanks for replying but I am afraid none of the techniques you mentioned work. Still get null for deleteservice in action method.

Community · Accepted Answer · 2017-05-23 11:59:49Z

0

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

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Jan 29, 2013 at 9:09

ZedBee

2,3687 gold badges40 silver badges63 bronze badges

Collectives™ on Stack Overflow

Passing Multiple Checkbox value using jquery ajax

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related