Select checkbox and pass value through ajax in MVC

Question

I have created data table, where I have added check box in each row and dropdown to a column, which worked fine, I have added only one submit button at the top. so basically what I am trying here is user can select checkbox and select drop down from row. Once submitted selected rows has to update.

Here is my current code: In View:

<input type="button" id="delete" value="Submit" />
<table id="example" cellpadding="10" width="100%">
        <thead>
            <tr>
                <th><input id="checkAll" type="checkbox" /></th>
                <th style="text-align: center; border: 1px solid #eaeaea">Email Address</th>
                <th style="text-align: center; border: 1px solid #eaeaea">Select Option</th>
        </tr>
        </thead>
        <tbody>
            @foreach (var row in Model)
            {
             <tr>
            <th scope="row"><input type="checkbox" class="checkBox" value="@row.site"></th>

         <td class="gfgusername" style="width: 20%; padding: 0px; text-align: center; border-left: 1px solid #eaeaea; border-right: 1px solid #eaeaea">
        @row.EmailAddress.Trim()
    </td>
     <td style="width: 20%; padding: 0px; text-align: center; border-right: 1px solid #eaeaea">
        <select class="priorityList" name="priorityList2"><option>Yes</option> 
        <option>No</option><option>Delete Folder</option></select>
      </td>
       </tr>            }

        </tbody>
    </table>

  <script language="javascript">
  $(document).ready(function () {
   $("#delete").click(function () {
            $('input:checkbox.checkBox').each(function () {
                if ($(this).prop('checked')) {

                  ???????????

                });
            

            var options = {};
            options.url = "/Dashboard/Delete";
            options.type = "POST";
            options.data = ????;
            options.contentType = "application/json";
            options.dataType = "json";
            options.success = function (msg) {
                alert(msg);
            };
            options.error = function () {
                alert("Error while deleting the records!");
            };
            $.ajax(options);

        });

    });
  </script>

My Question is how we can save user response and pass through AJAX, I can pass only one value if user wanted to delete, but not sure how I can pass multiple values through ajax (only user selected checkbox).

Answer 1

Your Delete function will look like this:

$(document).ready(function () {
    $("#delete").click(function () {
            var myCheckboxes = [];
            $('input:checkbox.checkBox').each(function () {
                if ($(this).prop('checked')) {
                    myCheckboxes.push($(this).attr("value"));
                }
            });

            var json = {
               myCheckboxes : myCheckboxes
            };

            var options = {};
            options.url = "@Url.Action("Delete", "Dashboard")";
            options.type = "POST";
            options.data = {"json": JSON.stringify(json)};
            options.contentType = "application/json";
            options.dataType = "json";
            options.success = function (msg) {
                alert(msg);
            };
            options.error = function () {
                alert("Error while deleting the records!");
            };
            $.ajax(options);
    })
});

And your Controller method will be:

using System.Web.Script.Serialization;

[HttpPost]
public JsonResult Delete(string json)
{
  var serializer = new JavaScriptSerializer();
  dynamic jsondata = serializer.Deserialize(json, typeof(object));

  //Get your variables here from AJAX call
  var checboxValues = jsondata["myCheckboxes"];
  //Do your stuff
}