ASP.NET MVC中的嵌套表单

Tho*_*mas 10 asp.net-mvc

我有一个购物车,其中包括以下内容:

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

我们的想法是,用户可以修改购物车中每个产品的数量,然后单击"更新"以提交更改.

你会如何使用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" />
        <%} %>  
Run Code Online (Sandbox Code Playgroud)

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

小智 9

HTML中明确不支持嵌套表单.

但是,您可以拥有多个表单,这是允许的.以单独的形式包装每个产品,为每个表单发布URL添加特定于产品的参数,以便您在相应的控制器操作中了解哪个产品需要更新.

像这样的东西:

<form action="/update/21342345">
</form>
Run Code Online (Sandbox Code Playgroud)

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

两种选择:

  1. 为每个表单提供自己的提交按钮.称之为"更新此产品".您将在url参数中指定要更新的更新.
  2. 将生成的表格与提交按钮一起包装成一个表单.提交后,您需要更新表单中包含的所有产品.或以某种方式检测哪些是变化,只更新那些.

建议适用于两个按钮,提交和删除.您可以在帖子网址中指定任务,例如:

action="/update/21342345"
Run Code Online (Sandbox Code Playgroud)

要么

action="/delete/21342345"
Run Code Online (Sandbox Code Playgroud)


Chr*_*sal 4

我们在项目中通过使用单独的“删除”表单和完全不同的“更新”表单来完成此操作。它们都在 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> 
Run Code Online (Sandbox Code Playgroud)