首页 > 解决方案 > 如何使用(数据值属性)传递多个复选框值

问题描述

你好,程序员朋友们,你好,

如何使用数据值属性传递多个复选框值,以便在单击删除按钮时使用公共 ActionResult(列表项)设法通过我的控制器传递它。

CSHTML:

 @foreach (var item in Model.ReportTrfPendingList)
                {
                <tr>
                    <td><input type="checkbox" data-value="@item.trfbch"/></td>
                    <td>@item.trfpon</td>
                    <td>@item.dptnam</td>
                    <td>@item.trfbch</td>
                    <td><button type="button" class="btn btn-primary deleteBtn" data-value="@item.trfbch">Delete</button></td>

                    <td>@CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(Convert.ToInt32(@item.trfsdt.Value.ToString().Substring(2, 2)))&nbsp; @item.trfsdt.Value.ToString().Substring(4, 2)&nbsp;&#44; @DateTime.Now.Year.ToString().Substring(0, 2)@item.trfsdt.Value.ToString().Substring(0, 2)</td>



                </tr>

                }
            </tbody>

脚本:

   $("#SelectDeleteBtn").click(function () {

    ---< Processing events here > ---

});

控制器:

     [HttpPost]
    public ActionResult SelectedTransferNoDeletion(List<string> items, string deletionNotes) {

        foreach (var transferNo in items)
        {

            var result = deletePendingSrv.SaveDeletionPending(transferNo, SessionUserInfo.Username, deletionNotes);

        }
        return Json(BaseVariable.DEFAULT_SUCCESS);


    }

看法 :

使用数据值属性选择多个复选框值。

我的项目的示例图像

标签: c#jqueryasp.net-mvcasp.net-ajax

解决方案


您可以使用 javascript 事件侦听器将 data-value 的值添加到数组中,然后只需将该数组作为参数传递给控制器​​。

简单的解决方案如下所示

 @foreach (var item in Model.ReportTrfPendingList)
            {
            <tr>
                <td><input type="checkbox" onClick="checkBoxOnClicked()" data-value="@item.trfbch"/></td>
                <td>@item.trfpon</td>
                <td>@item.dptnam</td>
                <td>@item.trfbch</td>
                <td><button type="button" class="btn btn-primary deleteBtn" data-value="@item.trfbch">Delete</button></td>

                <td>@CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(Convert.ToInt32(@item.trfsdt.Value.ToString().Substring(2, 2)))&nbsp; @item.trfsdt.Value.ToString().Substring(4, 2)&nbsp;&#44; @DateTime.Now.Year.ToString().Substring(0, 2)@item.trfsdt.Value.ToString().Substring(0, 2)</td>



            </tr>

            }
        </tbody>


  <script>
    var selectedValues = []
    function checkBoxOnClicked(e){
       var value = e.target.getAttribute("data-value");
       if(selectedValues.includes(value)) // ES6 or selectedValues.indexOf(value) >= 0 // older browser{
          selectedValues.pop(value);
       }
       else {
          selectedValues.push(value);
       }
    }
  </script>

推荐阅读