从表单中的表中发布行模型数据（无 JS）

Question

我之前遇到了一个几乎相同的问题，并在这里发布了一个关于它的问题：Posting data of a single table row when table is in one form 我们能够解决它，但感觉很hacky。总结那篇文章，我试图使用 AJAX 和 JS 将值从表行发布到控制器。问题是每一行都会在表单中序列化。为了解决这个问题，我只序列化了我需要的行。

这次我遇到了同样的问题，唯一的区别是我没有使用 AJAX，而是将表格行中的模型数据直接提交给控制器操作。

我尝试使用foreach 和for 循环来生成表行。 foreach 循环总是 POST 表中的第一行，即使我单击第二行上的提交按钮。 for 循环不会发布任何内容，或者至少我在控制器操作的“shipment”参数中获得了所有空值。

我也尝试将行包含在表单中，但 HTML 不允许在 <tbody> 中包含 <form>。

我想要的是能够将单行（通过循环模型列表生成）直接发布到“UpdateShipment”控制器操作。所有这些都没有使用 AJAX。

HTML 代码：

@model OrderTrackingContract.SalesOrder

@foreach (var lineItem in Model.LineItems)
{
    <table class="lineItemTables">
        //line items table
    </table>

    @if (lineItem.Shipments.Count > 0)
    {
        <form method="post">
            <table class="table shipmentTable">
                <thead>
                    <tr>
                        <th>
                            ShipmentID
                        </th>
                        <th>
                            Qty Shipped
                        </th>
                        <th>
                            Actions
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @for (int i = 0; i < lineItem.Shipments.Count; i++)
                    {

                        <tr>
                            <td>
                                <input class="shipmentID" asp-for="@lineItem.Shipments[i].ShipmentID" />
                            </td>
                            <td>    
                                <input class="qtyShipped" asp-for="@lineItem.Shipments[i].QtyShipped" value="@lineItem.Shipments[i].QtyShipped" min="1" max="999" />
                            </td>
                            <td>
                                <input class="updateButton" type="submit" value="Update" asp-action="UpdateShipment" asp-controller="Shipments" />
                                <input class="deleteButton" type="submit" value="Delete" asp-route-shipmentID="@lineItem.Shipments[i].ShipmentID" asp-action="DeleteShipment" asp-controller="Shipments" />
                            </td>

                        </tr>
                    }
                </tbody>
            </table>
        </form>
    }
}

控制器动作：

[HttpPost]
public IActionResult UpdateShipment(Shipment shipment)
{
    _orderTrackingService.UpdateShipmentByID(shipment.ShipmentID, shipment.QtyShipped);

    return NoContent();
}

编辑：我使用了提琴手，我开始明白发生了什么。 for 和 foreach 循环都提交整个表单，因为整个表格都在其中。

使用for循环我不得不写asp-for="@lineItem.Shipments[i].ShipmentID"，这意味着控制器必须接受LineItem lineItem的参数。

使用foreach 循环我可以编写asp-for="@shipment.ShipmentID，但是因为<input> 的生成属性是相同的，所以'Shipment shipping' 参数绑定到第一个POST 值。

Answer 1

我想要的是能够将单行（通过循环模型列表生成）直接发布到“UpdateShipment”控制器操作。所有这些都没有使用 AJAX。

要达到上述要求，您可以尝试为每个Shipment 项目生成<form> 和<table>，如下所示。

@foreach (var lineItem in Model.LineItems)
{
    <table class="table shipmentTable">
        <thead>
            <tr>
                <th>
                    ShipmentID
                </th>
                <th>
                    Qty Shipped
                </th>
                <th>
                    Actions
                </th>
            </tr>
        </thead>
    </table>

    @if (lineItem.Shipments.Count > 0)
    {
        foreach (var Shipment in lineItem.Shipments)
        {
            <form method="post">
                <table class="table shipmentTable">
                    <tbody>
                        <tr>
                            <td>
                                <input class="shipmentID" asp-for="@Shipment.ShipmentID" />
                            </td>
                            <td>
                                <input class="qtyShipped" asp-for="@Shipment.QtyShipped" value="@Shipment.QtyShipped" min="1" max="999" />
                            </td>
                            <td>
                                <input class="updateButton" type="submit" value="Update" asp-action="UpdateShipment" asp-controller="Shipments" />
                                <input class="deleteButton" type="submit" value="Delete" asp-route-shipmentID="@Shipment.ShipmentID" asp-action="DeleteShipment" asp-controller="Shipments" />
                            </td>

                        </tr>
                    </tbody>
                </table>
            </form>
        }
    }
}

测试结果