Pass checkbox values to Controller and show confirmation before deleting data in MVC C#

Hi, I want to pass multiple checkbox values for deleting data like

checkbox1: a,b,c,d  checkbox2: e,f,g,h

and pass it to the controller and want to show modal popup before sending Data to the controller:

Are you sure, you are going to delete 2 items? (Delete/No)

the modal pop-up will contain the only count of selected data and delete button for confirmation?

Delete button will delete all selected data

should I pass the data in JSON format or in the string?

Right now, I am passing the data like : var a = {values = CommaSeperatedValues}
In the controller Method passing argument as List<string> values and fetched values but I am getting an error like unexpected char at JSON

Asked by:- SnehalSawant
: 575 At:- 11/25/2017 11:56:29 AM jQuery

Do you just want to know which way(JSON or string) is better or you want to know complete idea with code example about how to pass data to controller ? 0
By : vikas_jk - at :- 11/25/2017 5:53:26 PM

1 Answers
profileImage Answered by:- vikas_jk

You need to pass the value as a string, not List<string> to the controller using Ajax, but before that get Selected checkbox values on button click and Join then using "," then split them in controller using C#

Suppose below is your HTML

Checkbox 1 <input type="checkbox" class="CheckboxClass" value="a" id="chkBox1" name="chkBox1" />A
<input type="checkbox" value="b"  class="CheckboxClass" id="chkBox1" name="chkBox1"  />B
<input type="checkbox" value="1"   class="CheckboxClass" id="chkBox1" name="chkBox1"  />1

Checkbox 2 <input type="checkbox"  class="CheckboxClass" value="2" id="chkBox2" name="chkBox2" />2
<input type="checkbox" value="f"  class="CheckboxClass" id="chkBox2" name="chkBox2"  />F
<input type="checkbox" value="g"  class="CheckboxClass"  id="chkBox2" name="chkBox2"  />G

<input type="button" id="Delete" Value="Delete Selected Checkbox" />

<div id="confirmBox">
    <div class="message"></div>
    <span class="button yes">Delete</span>
    <span class="button no">No</span>


    display: none;
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #aaa;
    position: fixed;
    width: 300px;
    left: 50%;
    margin-left: -150px;
    padding: 6px 8px 8px;
    box-sizing: border-box;
    text-align: center;
#confirmBox .button {
    background-color: #ccc;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #aaa;
    padding: 2px;
    text-align: center;
    width: 80px;
    cursor: pointer;
#confirmBox .button:hover
    background-color: #ddd;
#confirmBox .message
    text-align: left;
    margin-bottom: 8px;

Then javascript/jQuery to get Selected checkboxes and alert user about it would be 

function doConfirm(msg, yesFn, noFn) {
    var confirmBox = $("#confirmBox");
    confirmBox.find(".yes,.no").unbind().click(function () {

//On delete buttton click call jquery function to Get Selected Checkbox
var Count=0;
var checkedVals = $('.CheckboxClass:checkbox:checked').map(function() {
    return this.value;
var SelectedValue=checkedVals.join(",");
//Confirm now
doConfirm("Are you sure, you are going to delete "+Count+" items (" + checkedVals.join(",") +")", function yes() {
            //Send to controller using Ajax
           // $.ajax({
        //    url:'/Controller/Action',
       //     data:{SelectedValues:SelectedValue},
     //       success:function(){
    //   }
         //   })
        }, function no() {
            // do nothing


Working Fiddle link here

Now in the MVC Controller, get Selected Checkboxes as string, and then Split to get individual values

public ActionMethod DeleteData(string SelectedCheckbox)
  var SplitedValues= SelectedCheckbox.Split(','); //which will return your array

//loop through each values
 foreach(var val in SplitedValues)
 //do something here with each value
return View();

Now you can loop through individual values 

At:- 11/26/2017 9:08:58 AM Updated at:- 11/26/2017 9:10:23 AM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use