Click on the checkbox to send a value via ajax in an MVC framework

Question

Click on the checkbox to send a value via ajax in an MVC framework

I've recently created a data table that includes a checkbox in each row and a dropdown menu in one of the columns. Everything seems to be working fine so far, with a single submit button at the top for user input. The main goal here is to allow users to select checkboxes and dropdown options within rows, and then update the selected rows once submitted.

Here's a snippet of my current code in the 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 current question revolves around the concept of saving user responses and passing them through AJAX calls. While I understand how to pass a single value when a user wants to delete something, I'm unsure about how to pass multiple values through ajax, specifically those associated with user-selected checkboxes.

javascript c#ajax asp.net-mvc

Answer 1

Answer №1

Here is the structure of your Delete function:

$(document).ready(function () {
    $("#delete").click(function () {
            var checkboxesArray = [];
            $('input:checkbox.checkBox').each(function () {
                if ($(this).prop('checked')) {
                    checkboxesArray.push($(this).attr("value"));
                }
            });
            var selectedValue= $('#priorityList2').find(":selected").text();
            var jsonData = {
               myCheckboxes : checkboxesArray,
               mySelectedValue: selectedValue
            };

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

Your Controller method should be like this:

using System.Web.Script.Serialization;

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

  //Extract necessary data from AJAX call
  var checkboxValues = jsonData["myCheckboxes"];
  var mySelVal = jsonData["mySelectedValue"];
  //Perform required operations
}

Answer 2

Here is the structure of your Delete function:

$(document).ready(function () {
    $("#delete").click(function () {
            var checkboxesArray = [];
            $('input:checkbox.checkBox').each(function () {
                if ($(this).prop('checked')) {
                    checkboxesArray.push($(this).attr("value"));
                }
            });
            var selectedValue= $('#priorityList2').find(":selected").text();
            var jsonData = {
               myCheckboxes : checkboxesArray,
               mySelectedValue: selectedValue
            };

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

Your Controller method should be like this:

using System.Web.Script.Serialization;

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

  //Extract necessary data from AJAX call
  var checkboxValues = jsonData["myCheckboxes"];
  var mySelVal = jsonData["mySelectedValue"];
  //Perform required operations
}

Click on the checkbox to send a value via ajax in an MVC framework

Answer №1

Similar questions

Problem with using React state hook

Sorting arrays in JavaScript can become tricky when dealing with arrays that contain values from two different arrays

What is the process for determining the directory in which CKEditor looks for configuration and language files?

Error: Unable to retrieve the "error" property as the data is not defined

Guide on implementing automatic callbacks with AJAX

Is there a way to implement seamless scrolling within an absolute element using Jquery?

Refreshing a Next.js page results in a 404 error

Master the art of horizontal scrolling in React-Chartsjs-2

Displaying the appropriate DIV element based on the value entered by the user

Is it possible to trigger an event for only one connected client instead of broadcasting it to all clients using socket.io?

Utilize the power of PIXI.js to effortlessly convert your canvas into a high-quality image without encountering

How can I remove the most recently added div using JavaScript?

Event handler does not handle exceptions thrown from Express routes

Effortlessly upload multiple files in PHP using AJAX and enable automatic uploading upon selection

Find the average value of an array containing objects

Learn how to successfully place a draggable object into a sortable container while ensuring that the dropped item is a personalized helper element rather than the original object

No closing bracket was found as the NodeJS & Jade string reached its conclusion

I am struggling to set a required input in Angular2

Issue with multiple sliders on the page not initializing pagination upon refreshing the page using Slick library

Filtering an object using data in AngularJS