ASP.NET MVC 中的嵌套表单

Question

我有一个购物车，满足以下条件：

• 购物车中的每个产品都有一个“删除”按钮
• 购物车中的每个产品都有一个可编辑的数量文本框
• 整个购物车都有一个“更新”按钮

这个想法是用户可以修改购物车中每个产品的数量，然后单击“更新”以提交更改。

您将如何使用 MVC 对“更新”按钮进行编程？您是否会将整个购物车包装在一个回发给自身的表单中，并以某种方式在 FormCollection 中定位数量值？这种方法的问题在于，由于“删除”按钮每个都以自己的形式存在，我现在将在页面上进行嵌套表单，我什至不确定是否允许这样做。

        <% using (Html.BeginForm("Index", "Cart")) { %> 
        <table>
            <tr>
                <th>&nbsp;</th>
            </tr>
        <% foreach (var item in Model) { %>
            <tr>
                <td>
                    <input name="qty" type="text" value="<%=item.Quantity%>" maxlength="2" />
                    <% using (Html.BeginForm("RemoveOrderItem", "Cart")) { %>                       
                        <%= Html.Hidden("ShoppingCartItemID", item.ShoppingCartItemID) %>
                        <input name="add" type="submit" value="Remove" />
                    <%} %>
                </td>
            </tr>
        <% } %>
        </table>

        <input name="update" type="submit" value="Update" />
        <%} %>  

如何将底部输入合并到此表单中？

Answer 1

HTML 明确不支持嵌套表单。

但是，您可以有多个表单，这是允许的。将每个产品包装在一个单独的表单中，为每个表单发布 url 添加一个特定于产品的参数，以便您在相应的控制器操作中知道哪些产品需要更新。

类似这样的：

<form action="/update/21342345">
</form>

如何将底部输入合并到此表单中？

两种选择：

1. 为每个表单提供自己的提交按钮。将其称为“更新此产品”。您将在 url 参数中指定要更新的内容。
2. 将您生成的完整表格与提交按钮一起封装到一个表单中。提交后，您需要更新表单中包含的所有产品。或者以某种方式检测哪些发生了变化，然后只更新那些。

建议适用于两个按钮，提交和删除。您可以在帖子 url 中指定任务，例如：

action="/update/21342345"

或

action="/delete/21342345"

Answer 2

我们已经在我们的项目中完成了这项工作，方法是使用单独的表单进行移除，而使用完全不同的表单进行更新。它们都在 CartController 中执行不同的 POST 操作。

更新：给出的示例（在原始 HTML 中）：

<form action="/cart/updatequantity" method="post"> 
    <input type="hidden" name="ProductSku" value="ABC-123" /> 
    <input name="quantity" class="quantity" size="2" maxlength="2" type="text" value="1" /> 
    <input type="submit" value="Update" /> 
</form> 

<form action="/cart/removeitem" method="post"> 
    <input type="hidden" name="productSku" value="ABC-123" /> 
    <input type="submit" value="Remove" /> 
</form> 

Answer 3

我在类似的情况下使用 jQuery。删除按钮调用 post() 方法，如果成功，则从页面中删除该产品的 div 元素（remove() 方法）。更新可以以普通形式提交。您还可以使用jQuery编写ajax Update方法，然后动态加载购物车，而无需重新加载整个页面（通过post()回调中调用的$().html()方法）。

删除可能如下所示：

onclick="if (confirm('请确认')) $.post('/Cart/Remove/63',{},function(data) { if (data == 'ok') {$('#cart-element-63').remove())";

Answer 4

我一直在寻找相同的提示，并找到了这篇文章。我刚刚使用删除按钮的命名提交按钮和唯一数量文本字段名称来完成此操作。

一个表格包裹了整个购物车。主要提交按钮将是更新购物车按钮。每个删除项目按钮都被命名为“remove”，其值设置为该购物车项目的唯一键。

<input class="btnRemove" name="remove" type="image" value="@item.ProductId" />

每个数量文本字段都以“qnty-”为前缀，并带有该购物车项目的唯一键。

<input id="qnty-@item.ProductId" name="qnty-@item.ProductId" type="text" value="@item.Quantity" class="cartListQty" />

一旦通过 FormCollection 提交我的操作循环。如果名称是“删除”，我会从购物车中删除该唯一键。如果名称以“qnty-”开头，我将获取名称的其余部分（唯一的购物车项目键）并将该项目数量调整为文本字段的值。

[HttpPost]
public ActionResult Index(FormCollection collection)
{
Cart myCart = cartRepo.LoadCart();
foreach (string item in collection.AllKeys)
{
    if (item.StartsWith("qnty-"))
    {
    int productId = Convert.ToInt32(item.Substring(5));
    // Adjust quantity
    }
    if (item == "remove") // Remove item from cart
}
cartRepo.Save();
return RedirectToAction("Index");
}