嵌套形式

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

我们通过使用删除单个形式做到了这一点上我们的项目，以及一个完全不同的形式更新。他们都在CartController中进行不同的POST操作。

UPDATE：给出示例（原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 2

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

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

事情是这样的：

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

如何将纳入下输入这种形式？

两个选项：

1. 给各自形成了自己的提交按钮。称之为“更新本产品”。您将指定在url参数中更新哪一个。
2. 将您生成的表格和提交按钮一起封装到一个表单中。提交时，您需要更新表单中包含的所有产品。或者以某种方式检测哪些更改并且只更新那些。

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

action="/update/21342345" 

或

action="/delete/21342345" 

Answer 3

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

删除可能看起来像：

的onclick =“如果（确认（ '请确认。'））$。员额（ '/车/删除/ 63'，{}，功能（数据）{ 如果（data =='ok'）{$（'＃cart-element-63'）。remove（））“;

Answer 4

我正在寻找相同的提示，并发现这个职位。我刚刚使用删除按钮的命名提交按钮和唯一数量文本字段名称来完成此操作。

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

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

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

<input id="[email protected]" name="[email protected]" 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"); 
}