jquery 获取HTML表选中的项目ID以列出并传递给控制器

7tofc5zh 于 2023-01-25 发布在 jQuery

关注(0)|答案(1)|浏览(119)

在我的ASP.NET MVC项目中，有一个表显示了用户查看file type和Id（隐藏）的信息。
每当用户选中复选框并单击Send Request Mail按钮时，我希望获得选中行的ID，并将它们作为ID列表传递给控制器。
这是表视图

<tbody> 
@foreach (var item in Model.ReqDocumentsViewModel.OrderByDescending(x => x.Id)) 
{  <tr class="even pointer">
    <td style="display:none;">@item.Id</td>
    <td>@item.FileType</td>
    <td>@item.Note</td> @if (item.RequestStatus == false) { <td> Not Requested; </td> } else { <td> Requested; </td> } <td>
      <input type="checkbox" value="@item.Id" id="chk" />
    </td>
    <td>
      <button type="button" onclick="RemoveReqDocument()" class="btn btn-danger">Remove</button>
    </td>
  </tr> 
  } 
 </tbody>
<button type="button" class="btn btn-primary sm" onclick="SendMailNotification();">Send Request Mail</button>

我试过了。

function SendMailNotification() {

  const selectedRows = [...$('table tbody tr:has("input:checked")')]
    .map(tr => [...$(tr).find('td:lt(1)')]
      .reduce((res, td) => (res[$(td).attr('prop')] = $(td).text(), res), {}))

  console.log(selectedRows)

  var newOrders = $.map(selectedRows, function (element) {
    var obj = {};
    for (var key in element) {
      obj.Id = key;

    }
    return obj;

  });

  $.ajax({
    type: "POST",
    url: "/Task/RequestDocument",
    data: JSON.stringify(newOrders),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (r) {
      if (r == false) {
        alert("You have to enter Order Qty first");
      } else {
        alert("Order Created");
        location.reload();
      }

    }
  });
}

在控制器中

public JsonResult RequestDocument(List < ReqDocList > idQs) 
{

}

型号

public class ReqDocList
{
  public int Id { get; set; }
       
 }

jquery

来源：https://stackoverflow.com/questions/75171670/get-the-html-table-checked-item-ids-to-list-and-pass-to-controller

1条答案

按热度按时间

ccrfmcuu1#

我想获取选中行的ID，并将它们作为ID列表传递给控制器。
下面是一个工作演示，大家可以参考一下。
请求文档列表VM：

public class ReqDocListVM
    {     
        public ICollection<ReqDocList> ReqDocList { get; set; }
    }

任务控制器：

public class TaskController : Controller
    {
        public static List<ReqDocList> ReqDocList = new List<ReqDocList>()
        {
            new ReqDocList() {Id =1},
            new ReqDocList() {Id =2},
            new ReqDocList() {Id =3},
            new ReqDocList() {Id =4}
        };
        public IActionResult Index()
        {
            var model =new  ReqDocListVM();
            model.ReqDocList= ReqDocList;   
            return View(model);

        }
        public JsonResult RequestDocument(List<int> ids)
        {
            return Json(ids);
        }

    }

索引视图：

@model ReqDocListVM

<table class="table table-bordered table-light">
<tbody>
    @foreach (var item in Model.ReqDocList)
    {
            <tr class="even-pointer" chk-id="@item.Id">
            <td>
                <input type="checkbox" value="@item.Id" id="chk" />
            </td>
            <td>
                <button type="button" onclick="RemoveReqDocument()" class="btn btn-danger">Remove</button>
            </td>
        </tr>
    }
</tbody>
</table>
<button id="bt"type="button" class="btn btn-primary sm" >Send Request Mail</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var Ids = [];       
        $(".even-pointer").click(function () {
            $(this).toggleClass("selected");
            var Id = $(this).attr('chk-id');
            if ($(this).hasClass("selected")) {
                Ids.push(Id);
            }
            else {
               Ids = Ids.filter(function (id) {
                    return id !== Id;
                });
            }                
            });

        $("#bt").click(function () {           
            console.log(Ids);
            $.ajax({
                type: "POST",
                url: "/Task/RequestDocument",
                data: { "ids": Ids },                
                success: function (response) {
                    alert(response);
                }
            });
        });
    });
</script>

结果：

赞(0）回复(0）举报 2023-01-25

我来回答

jquery 获取HTML表选中的项目ID以列出并传递给控制器

1条答案

相关问题

热门标签

最新问答