Select 复选框并通过 MVC 中的 ajax 传递值

Question

我创建了数据 table，我在每一行中添加了复选框，并在一列中添加了下拉列表，效果很好，我只在顶部添加了一个提交按钮。所以基本上我在这里尝试的是用户可以 select 复选框和 select 从行中下拉。提交后 selected 行必须更新。

这是我当前的代码：在视图中：

<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>

我的问题是如何保存用户响应并通过 AJAX，如果用户想要删除，我只能传递一个值，但不确定如何通过 ajax 传递多个值（仅限用户 selected 复选框）。

Answer 1

您的删除函数将如下所示：

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

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

您的 Controller 方法将是：

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"];
  var mySelectedValue = jsondata["mySelectedValue"];
  //Do your stuff
}

Select 复选框并通过 MVC 中的 ajax 传递值

Select checkbox and pass value through ajax in MVC

javascript

c#

ajax

asp.net-mvc