如何使用 ASP.NET MVC 通过 Ajax 将检查的行发送到服务器？

Posted 2023-05-08

【中文标题】如何使用 ASP.NET MVC 通过 Ajax 将检查的行发送到服务器？

【英文标题】：How to send checked rows to server via Ajax using ASP.NET MVC?

【发布时间】：2021-01-20 22:07:11

【问题描述】：

我有一个鞋子列表表，从最后一个<th>Area</th> 开始，每一行都有复选框（作为服务器中的布尔值）。

<a class="btn btn-primary float-right btn-sm text-white" id="cambiarAreaE">Trasladar a Ensuelado</a>

<table id="tabla-alistados" class="table table-bordered table-striped table-hover">
   <thead>
      <tr>
         <th>Cod.</th>
         <th class="text-red">Ref. Solicitud</th>
         <th class="text-red">Ref. Pedido</th>
         <th>Imagen</th>
         <th>Talla</th>
         <th>Atraso por</th>
         <th>Area</th>
         <th class="text-center">Acciones</th>
      </tr>
   </thead>
   <tbody>
      @foreach (var detalle in Model.DetalleSolicitud)
      
      <tr>
         <td> ... 
         <td>
         <td> ... 
         <td>
         <td> ... 
         <td>
         <td> ... 
         <td>
         <td> ... 
         <td>
         <td> ... 
         <td>
         <td class="text-center">
            @detalle.Produccion.Area
            <br /><br />
            <div class="form-group clearfix">
               <div class="icheck-primary d-inline">
                  <input type="checkbox" id="checkboxPrimary1" class="checkboxAlistados" style="width: 25px; height: 25px">
                  <label for="checkboxPrimary1"> </label>
               </div>
            </div>
         </td>
         <td class="text-center"> ... </td>
      </tr>
      
</table>

这就是它的呈现方式，倒数第二个有复选框：

我正在尝试仅将检查的行发送到控制器，但是...我认为简单快速的方法是将所有 Id 作为在其行中检查的数组发送。

这就是我在 Jquery 中所拥有的：

        $("#cambiarAreaE").click(function (e) 
       e.preventDefault();

        var checkedIds = new Array();

        var table = $("#tabla-alistados tr").children("td");
        
                $.ajax(
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                type: 'POST',
                data: checkedIds,
                url: "/Produccion/CambiarAreas/",
                success: function (result, state) 
                    location.reload();
                ,
                error: function () 
                    alert("Un error interno ha ocurrido.")
                

            );

    );

我该如何解决这个问题？这让我很困难，因为有很多行，我不知道如何编写代码。

【问题讨论】：

您好，您需要获取Cod 字段值吗？那是一些输入框还是纯文本？

Id(cod) 是纯文本，我需要获取这些已检查的 Id。我认为可以将它们存储在列表中并将它们发送到服务器。

【参考方案1】：

您可以使用 each 循环遍历您的 .checkboxAlistados 进行检查，然后使用 .closest() 获取 Cod 列的值并将其推送到数组中。

演示代码：

$("#cambiarAreaE").click(function(e) 
  e.preventDefault();

  var checkedIds = new Array();
  //loop through tbody > class checkboxAlistados
  var selectors = $("#tabla-alistados tbody .checkboxAlistados:checked");
  selectors.each(function() 
    //get closest tr and then get Cod value 
    checkedIds.push($(this).closest('tr').find("td:eq(0)").text())

  );
  console.log(checkedIds)
  //your ajax call ..do JSON stringify 

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tabla-alistados" class="table table-bordered table-striped table-hover">
  <thead>
    <tr>
      <th>Cod.</th>
      <th class="text-red">Ref. Solicitud</th>
      <th class="text-red">Ref. Pedido</th>
      <th>Imagen</th>
      <th>Talla</th>
      <th>Atraso por</th>
      <th>Area</th>
      <th class="text-center">Acciones</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>12</td>
      <td> ...
      </td>
      <td> ...
      </td>
      <td> ...
      </td>
      <td> ...
      </td>
      <td> ...
      </td>
      <td class="text-center">
        @detalle.Produccion.Area
        <br /><br />
        <div class="form-group clearfix">
          <div class="icheck-primary d-inline">
            <input type="checkbox" id="checkboxPrimary1" class="checkboxAlistados" style="width: 25px; height: 25px">
            <label for="checkboxPrimary1"> </label>
          </div>
        </div>
      </td>
      <td class="text-center"> ... </td>
    </tr>

    <tr>
      <td>13</td>
      <td> ...
      </td>
      <td> ...
      </td>
      <td> ...
      </td>
      <td> ...
      </td>
      <td> ...
      </td>
      <td class="text-center">
        @detalle.Produccion.Area
        <br /><br />
        <div class="form-group clearfix">
          <div class="icheck-primary d-inline">
            <input type="checkbox" id="checkboxPrimary1" class="checkboxAlistados" style="width: 25px; height: 25px">
            <label for="checkboxPrimary1"> </label>
          </div>
        </div>
      </td>
      <td class="text-center"> ... </td>
    </tr>

    <tr>
      <td>14</td>
      <td> ...
      </td>
      <td> ...
      </td>
      <td> ...
      </td>
      <td> ...
      </td>
      <td> ...
      </td>
      <td class="text-center">
        @detalle.Produccion.Area
        <br /><br />
        <div class="form-group clearfix">
          <div class="icheck-primary d-inline">
            <input type="checkbox" id="checkboxPrimary1" class="checkboxAlistados" style="width: 25px; height: 25px">
            <label for="checkboxPrimary1"> </label>
          </div>
        </div>
      </td>
      <td class="text-center"> ... </td>
    </tr>

</table>

<button id="cambiarAreaE">Click me</button>

【讨论】：

按预期工作，但是......还有其他好的做法或方法可以实现这一目标吗？因为用户可以按 F12 并编辑表格 ID，这可能很危险。

您好，您无法阻止用户对数据进行任何客户端操作。您需要在服务器端进行处理。即：验证您从客户端获得的输入，并根据此进行进一步处理