Nested forms in ASP.NET MVC

Question

I have a shopping cart where the following are true:

• There is one "Remove" button for each product in the shopping cart
• There is one editable quantity text box for each product in the shopping cart
• There is one "Update" button for the entire shopping cart

The idea is that the user can modify the quantities for each product in the cart and click "Update" to commit the changes.

How would you program the "Update" button using MVC? Would you wrap the entire shopping cart in a form that posts back to itself and somehow locate the quantity values in the FormCollection? The problem with that approach is that since the "Remove" buttons each live in their own forms I would now be doing nested forms on the page and I am not even sure that is allowed.

 <% 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" /> <%} %> 

How would I incorporate the bottom input into this form?

Answer 1

Nested forms are explicitly not supported in HTML.

You can however have multiple forms, this is allowed. Wrap each product in a separate form, add a product-specific parameter to each form post url so that you know in the respective controller action which product needs to be updated.

Something like this:

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

How would I incorporate the bottom input into this form?

Two options:

1. Give each form its own submit button. Call it something like "Update this product". You will specify which one to update in the url parameter.
2. Wrap you complete generated table along with the submit button into one single form. When submitted, you will need to update all of the products contained in the form. or somehow detect which ones were changes and only update those.

Advice applies to both buttons, submit and delete. You can specify the task in the post url, like:

action="/update/21342345" 

or

action="/delete/21342345" 

Answer 2

We've done this on our project by using an individual form for Remove, and a completely different form for Update. They both go to different POST actions in the CartController.

UPDATE: Example given (in raw 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

I am using jQuery in similar situation. Remove button calls post() method and if it succeeds, div element of this product is removed from page (remove() method). Update can be submit of normal form. you can also use jQuery to program ajax Update method and then load shopping cart dynamically, without having to reload whole page (by $().html() method called in callback of post()).

Remove could look like:

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

Answer 4

I was looking for the same tip, and found this post. I've just done this using named submit buttons for the delete buttons, and unique quantity text field names.

A single form wraps the entire cart. The primary submit button would be the update cart button. Each remove item button is named "remove" with a value set to a unique key of that cart item.

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

Each Quantity text field is prefixed "qnty-" with the unique key for that cart item.

<input id="[email protected]" name="[email protected]" type="text" value="@item.Quantity" class="cartListQty" /> 

Once submitted my action loops through a FormCollection. If the name is "remove", I remove that unique key from the cart. If the name starts with "qnty-" I get the remainder of the name (the unique cart item key) and adjust that items quantity to the value of the text field.

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