嵌套形式

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="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"); 
}