How to send checked rows to server via Ajax using ASP.NET MVC?

user_12573628 0
Viewed 109

I have a shoe list table with checkboxes in every row second from the last <th>Area</th> (as bool in the server).

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

This is how this renders and there are the checkboxes in the second from the last: enter image description here

I am trying to send to controller only rows that are checked but... I think the simple and fast approach is send all the Id as an array that are checked in its row.

This is what I have in 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.")
                }

            });

    });

How do I solve this? This makes me so difficult because there are lots of rows and I do not know how to code this.

razor asp.net-mvc html jquery javascript
1 Answers

You can use each loop to iterate through your .checkboxAlistados which is checked and then using .closest() get value of Cod column and push same in array .

Demo code :

$("#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>

user_106064000
Related