recover data from a view table in the controller

Question

I have a table that is generated in the View dynamically. From the moment the user selects the products in another table, I need to recover in controller all the ids and quantities of products that are in this table. Below is the jQuery function that generates the table and the view:

function add_produto(nome, embalagem, finalidade, id) {
    $(".produtos-escolhidos tbody").append(
       "<tr id='"+id+""+nome+"' >" 
            +"<td id='id'>"+id+"</td>"
            + "<td id='nome'>" + nome + "</td>"
            + "<td id='embalagem'>" + embalagem + "</td>"
            + "<td id='finalidade'>" + finalidade + "</td>"
            + "<td><input type='text' id='qtd'name='qtd'/></td>" 
            + "<td><a href='#' id='"+id+""+nome+"'onclick='remove_produto(this)'>X</a></td>"  +
       "</tr>"
     );
} 

View

<div class="div-overflow span12">
    <table class="table-overflow borda lista-produtos span6 ">
        <thead class="cabecalho">
            <tr><th><input type="text" class="input-search" alt="lista-produtos" placeholder="Buscar nesta lista" /></th></tr>
            <tr>
                <th>Nome</th>
                <th>Embalagem com </th>
                <th>Finalidade</th>
                <th>Adicionar</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in ViewBag.produtos)
            {
                <tr>

                    <td>@item.NOME_PROD </td>
                    <td>@item.CONTEUDO_EMB @item.SIGLA_UNID</td>
                    <td>@item.FINALIDADE_PROD</td>
                    <td><a href="#" id="@item.ID_PROD" onclick="add_produto('@item.NOME_PROD','@item.CONTEUDO_EMB @item.SIGLA_UNID','@item.FINALIDADE_PROD','@item.ID_PROD')">></a></td>
                </tr>
            }
        </tbody>
        </table>

        <table class="produtos-escolhidos table-overflow borda table_left span6">
            <thead class="cabecalho">
                <tr>
                    <th>#</th>
                    <th>Nome</th>
                    <th>Embalagem com </th>
                    <th>Finalidade</th>
                    <th>Quantidade</th>
                    <th>Remover</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    <input type="hidden"value="1" id="contador"/>
</div>

How can I retrieve the ids and quantities of products on controller?

Thanks in advance.

Answer 1

If I were you, I would do table produtos-escolhidos be a form:

    @using (Html.BeginForm()) {
        <table class="produtos-escolhidos table-overflow borda table_left span6">
            <thead class="cabecalho">
                <tr>
                    <th>#</th>
                    <th>Nome</th>
                    <th>Embalagem com </th>
                    <th>Finalidade</th>
                    <th>Quantidade</th>
                    <th>Remover</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    }

Instead of just replicating text, I would add_produto generate fields of form:

function add_produto(nome, embalagem, finalidade, id) {
    $(".produtos-escolhidos tbody").append(
       "<tr id='"+id+""+nome+"' >" 
            +"<input type='hidden' name='ProdutosEscolhidos.Index' value='"+id+"' />"
            +"<td id='id'><input type='hidden' name='ProdutosEscolhidos['"+id+"'].id' value='"+id+"'/></td>"
            + "<td id='nome'><input type='text' name='ProdutosEscolhidos['"+id+"'].nome' value='" + nome + "'/></td>"
            + "<td id='embalagem'><input type='text' name='ProdutosEscolhidos['"+id+"'].embalagem' value='" + embalagem + "'/></td>"
            + "<td id='finalidade'><input type='text' name='ProdutosEscolhidos['"+id+"'].finalidade' value='" + finalidade + "'/></td>"
            + "<td><input type='text' id='ProdutosEscolhidos['"+id+"'].qtd' name='qtd'/></td>" 
            + "<td><a href='#' id='"+id+""+nome+"'onclick='remove_produto(this)'>X</a></td>"  +
       "</tr>"
     );
}

Notice that the generation assumes a ProdutosEscolhidos[], which is used by Modelbinder to identify a list of products.

Would also make a Viewmodel to represent the selection in Controller:

public class ProdutoEscolhidoViewModel
{
    public String Nome { get; set; }
    public String Embalagem { get; set; }
    public String Finalidade { get; set; }
    public int Qtd { get; set; }
}

Would also do the Controller receive a list of Viewmodels:

public ActionResult AcaoDoController(List<ProdutoEscolhidoViewModel> ProdutosEscolhidos) 
{
    // Coloque aqui a lógica
}

Obviously not ideal solution: the ideal would be you to use the Begincollectionitem for that reason.