formas anidadas en ASP.NET MVC

Question

tengo un carrito de compras, donde se cumple lo siguiente:

• Hay un botón "Eliminar" para cada producto en el carrito de la compra
• Hay una cantidad de texto editable caja para cada producto en el carrito de la compra
• Hay un botón "Actualizar" para todo el carrito de la compra

la idea es que el usuario puede modificar las cantidades de un producto en el carro y haga clic en "Actualizar" a cometer los cambios

¿Cómo programarías el botón "Actualizar" usando MVC? ¿Envolvería todo el carrito de la compra en un formulario que se registre y de alguna manera ubique los valores de cantidad en FormCollection? El problema con este enfoque es que, dado que los botones "Eliminar" cada uno vive en sus propios formularios, ahora estaría haciendo formularios anidados en la página y ni siquiera estoy seguro de que esté permitido.

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

¿Cómo incorporaría la entrada inferior en este formulario?

Answer 1

Hemos hecho esto en nuestro proyecto mediante el uso de una forma individual de Remove, y una forma completamente diferente Actualizar . Ambos van a diferentes acciones POST en CartController.

UPDATE: Ejemplo dada (en HTML en bruto):

<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

Los formularios anidados no son explícitamente compatibles en HTML.

Sin embargo, puede tener varias formas, esto está permitido. Envuelva cada producto en un formulario separado, agregue un parámetro específico del producto a cada url de publicación de formulario para que sepa en qué acción del controlador se debe actualizar el producto.

Algo como esto:

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

¿Cómo puedo incorporar la entrada inferior en esta forma?

dos opciones:

1. dar a cada forman su propio botón de enviar. Llámalo algo así como "Actualizar este producto". Deberá especificar cuál actualizar en el parámetro url.
2. Completar la tabla generada junto con el botón de enviar en un solo formulario. Cuando se envíe, deberá actualizar todos los productos que figuran en el formulario. o de alguna manera detectar cuáles fueron cambios y solo actualizarlos.

Las advertencias se aplican a ambos botones, enviar y eliminar. Puede especificar la tarea en el puesto url, como:

action="/update/21342345" 

o

action="/delete/21342345" 

Answer 3

estoy usando jQuery en situación similar.Quitar botón llama al método post() y si tiene éxito, el elemento div de este producto se elimina de la página (método remove()). La actualización se puede enviar de forma normal. también puede usar jQuery para programar el método de actualización ajax y luego cargar el carrito de compras dinámicamente, sin tener que volver a cargar toda la página (mediante el método $(). html() llamado en la devolución de llamada de post()).

Quitar podría parecerse a:

onclick = "si (confirmar ('Por favor confirmar.')) $ .post ('/ Carro/Eliminar/63', {}, la función (datos) {si (data == 'ok') {$ ('# cart-element-63'). remove()) ";

Answer 4

Estaba buscando la misma sugerencia y encontré esta publicación. Acabo de hacer esto usando los botones de envío con nombre para los botones eliminar y los nombres de campo de texto de cantidad única.

Una sola forma envuelve todo el carrito. El botón principal de envío sería el botón Actualizar carro. Cada botón de eliminar elemento se denomina "eliminar" con un valor establecido en una clave única de ese artículo de carrito.

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

Cada campo de texto de Cantidad tiene el prefijo "qnty-" con la clave única para ese artículo de carrito.

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

Una vez enviado mis bucles de acción a través de un FormCollection. Si el nombre es "eliminar", elimino esa clave única del carro. Si el nombre comienza con "qnty-", obtengo el resto del nombre (la clave única del elemento del carrito) y ajuste esa cantidad de artículos al valor del campo de texto.

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