Как передать табличные значения в контроллер?

Question

Краткое объяснение: У меня есть динамическая таблица, в которую я добавляю продукты с идентификатором, ИМЯ, ЦЕНА, СТОИМОСТЬ и ВСЕГО.

С раскрывающимся списком, полным продуктов, когда я нажимаю кнопку, продукт добавляется в таблицу

В таблице есть входные данные, чтобы задать количество и сумму на основе цены продукта.

Дело в том, что когда таблица готова, мне нужно обработать значения таблицы в контроллере, чтобы сделать что-то в SQL.

Я читал некоторые другие подобные случаи, но я думаю, что ни один не похож на мой.

Пример моей таблицы с 1 продуктом

    <table id="tablaCompras" class="table table-striped table-responsive" cellpadding="0" cellspacing="0" name="tablaCompras">
    <tbody>
            <tr align="left">
                <th scope="col">Número Artículo</th>
                <th scope="col">Artículo</th>
                <th scope="col">Cantidad</th>
                <th scope="col">Costo Unitario</th>
                <th scope="col">Total</th>
                <th scope="col">Precio Unitario</th>
                <th scope="col">Impresión</th>
                <th scope="col">Eliminar</th>
            </tr>
            <tr id="0" align="left"><td>31</td><td width="100%">ANILLO DE PLATA 030269</td><td> <input type="text" id="txtCantidadTabla0" value="0.00" name="txtCantidadTabla" 0min="1" style="background: transparent; border:none; align:center; max-width:100px;" onblur="getTotal(txtCantidadTabla0.value ,txtCostoTabla0.value,0)" required=""></td>
                <td> <input type="text" id="txtCostoTabla0" name="txtCostoTabla0" value="89.7" style="background: transparent; border:none; align:center; max-width:100px;" onblur="getTotal(txtCantidadTabla0.value ,txtCostoTabla0.value,0)" required="">  </td>
                <td> <input id="txtTotalTabla0" type="text" style="background: transparent; border:none; align:center; max-width:100px;" readonly=""> </td>
                <td> <input type="text" id="txtPrecioTabla0" name="txtPrecioTabla0" value="269.9" style="background: transparent; border:none; align:center; max-width:100px;" required=""></td>
                <td> <a href="#tabla"><img src="../Img/imprimir.png" style="width:30px; height:30px;"></a></td><td> <a href="#tabla"><img src="../Img/borrar.png" onclick="deleteRow(0)" style="width:30px; height:30px;"></a></td>
            </tr>
    </tbody>
</table>

У меня есть таблица в Html.BeginForm, как это:

@using (Html.BeginForm("Prueba", "AltaCompra", FormMethod.Post))
{
}

В моем контроллере я пытался получить его так:

[HttpPost]
public ActionResult Prueba(FormCollection collection)
{
}

Но таблицы нельзя проходить через форму коллекции. Любые подсказки о том, как я могу обрабатывать информацию таблицы

Большое спасибо

Answer 1

Вам необходимо обновить свое имя для ввода в формате name="@("txtCantidadTabla[" + @i + "]")", если вы добавляете новую строку с помощью javascript / jQuery, вы должны добавить имя в этом формате.

 @for (var i = 0; i < 5; i++) // I assume the total product
            {
                <tr id="0" align="left">
                    <td><input type="hidden" name="productid" value="31" />31</td>
                    <td width="100%">ANILLO DE PLATA 030269</td>
                    <td> <input type="text" id="@("txtCantidadTabla[" + @i + "]")" value="0.00" name="@("txtCantidadTabla[" + @i + "]")" 0min="1" style="background: transparent; border:none; align:center; max-width:100px;" onblur="getTotal(txtCantidadTabla0.value ,txtCostoTabla0.value,0)" required=""></td>
                    <td> <input type="text" id="@("txtCantidadTabla[" + @i + "]")" name="@("txtCostoTabla[" + @i + "]")" value="89.7" style="background: transparent; border:none; align:center; max-width:100px;" onblur="getTotal(txtCantidadTabla0.value ,txtCostoTabla0.value,0)" required="">  </td>
                    <td> <input id="txtTotalTabla0" type="text" style="background: transparent; border:none; align:center; max-width:100px;" readonly=""> </td>
                    <td> <input type="text" id="@("txtCantidadTabla[" + @i + "]")" name="@("txtPrecioTabla[" + @i + "]")" value="269.9" style="background: transparent; border:none; align:center; max-width:100px;" required=""></td>
                    <td> <a href="#tabla"><img src="../Img/imprimir.png" style="width:30px; height:30px;"></a></td>
                    <td> <a href="#tabla"><img src="../Img/borrar.png" onclick="deleteRow(0)" style="width:30px; height:30px;"></a></td>
                </tr>
            }

И получить данные с помощью FormCollection в контроллере как

[HttpPost]
public ActionResult Prueba(FormCollection collection)
        {
            for (var i = 0; i < 5; i++)
            {
                var txtCantidadTabla = collection["txtCantidadTabla[" + i + "]"];
                var txtCostoTabla = collection["txtCostoTabla[" + i + "]"];
                var txtPrecioTabla = collection["txtPrecioTabla[" + i + "]"];

                // handle your logic here
            }
            return View();
        }

Answer 2

На основании id из <tr>, соответствующего последнему символу атрибута name для элементов ввода, вам, вероятно, потребуется изменить код, чтобы сгенерировать атрибут name, чтобы иметь обозначение массива вокруг значения индексанапример, name="txtCostoTabla[0]", где индекс строки - это жестко закодированный индекс, если вы хотите, чтобы несколько значений были представлены в форме POST с тем же именем.

В противном случае, как предложено в предыдущем комментарии, обработайте форму, отправленную с помощью JavaScriptи создайте объект для передачи в Controller путем итерации строк таблицы.