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

Question

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:

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.

Hi you need to get Cod field value ? Is that some input-box or plain text ? — Swati
– Swati, Commented Oct 6, 2020 at 4:11
The Id(cod) is plain text, I need to get these Id that are checked. I think It is ok to store them in a list and send them to server. — EthernalHusky
– EthernalHusky, Commented Oct 6, 2020 at 4:11

Swati · Accepted Answer · 2020-10-06 04:19:38Z

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>

Worked as expected but... is there any other good practices or approaches to achieve this? because user can press F12 and edit table Ids and it can be dangerous.
Hi you cannot stop user from doing any client side manipulation of data.. you need to handle this at your server side . i.e : validate inputs which you are getting from client side and depending on this do further process

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related