Create a list with selected table values with checkbox

Question

I have this código, that he catches the id selected from table:

 $("#tablepesquisaclientes tr").each(function (index, el) {
var $linha = $(el);
var checked = $linha.find('.checked:checked').length;
if (checked === 1) {
    console.log($linha.find('td').eq(1).text());
}
});

But I need to create a list, to receive on controller, I have already created the class, and I have stated in ViewModel

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

 public IList<ListaContrato> ListaContrato { get; set; }

This is the html of my table

<table class="table table-responsive table-hover table-striped" id="tablepesquisaclientes" style="font-size:12px;">
    <thead>
        <tr>
            <th></th>
            <th>Nº Contrato</th>
            <th>Cliente</th>
            <th>Valor</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Contratos)
        {
            <tr>
                <td><input type="checkbox" class="checked"/></td>
                <td>@item.Id</td>
                <td>@item.Cliente.Nome</td>
                <td>@item.Valor.ToString("N2")</td>
                <td style="display:none;">@item.PedidoVenda.EmpresaID</td>
            </tr>
        }
    </tbody>
</table>

How can I pass the selected values to the controller ? Is there any way to go straight to the controller creating a list, or just going through ajax ?

This is the part of controller, I wanted to get it all for ViewModel if you had any way.

[HttpPost]
    public async Task<IActionResult> EnvioLote(EnviarLoteViewModel model)

I tried to create also according to Leonardo’s reply:

  public int[] Ids { get; set; }

And then on click of button doing so:

 var enviarLote = { Ids: [] };
            $("#tablepesquisaclientes tr").each(function (index, el) {
                var $linha = $(el);
                var checked = $linha.find('.checked:checked').length;
                if (checked === 1) {

                    var id = $linha.find('td').eq(1).text();
                    enviarLote.Ids.push(id);
                    console.log($linha.find('td').eq(1).text());
                }
            });
            console.table(enviarLote);
            $.post("/NFSe/EnvioLote", enviarLote)
                .done(function () {
                    console.log('postado');
                })
                .fail(function (data) {
                    console.log(data);
                    console.log('erro');
                })
                .always(function (data) {
                    console.log(data);
                    console.log('fim');
                });

But in the controller the Ids continue null.

Answer 1

Whereas your model looks like this:

public class EnviarLoteViewModel
{
    public int[] Ids { get; set; }
}

This javascript will make the post.

$(document).ready(function () {
    $("#enviarBtn").click(function () {

        var enviarLote = { Ids: []};

        $("#tablepesquisaclientes tr").each(function (index, el) {
            var $linha = $(el);
            var checked = $linha.find('.checked:checked').length;
            if (checked === 1) {

                var id = $linha.find('td').eq(1).text();
                enviarLote.Ids.push(id);
                console.log($linha.find('td').eq(1).text());
            }
        });

        $.post("/Home/Enviar", enviarLote)
            .done(function () {
                console.log('postado');
            })
            .fail(function (data) {
                console.log(data);
                console.log('erro');
            })
            .always(function (data) {
                console.log(data);
                console.log('fim');
            });
    });
});