zagnieżdżone formularzy w ASP.NET MVC

Question

Mam koszyk gdzie spełnione są następujące warunki:

• Jest jeden przycisk „Usuń” dla każdego produktu w koszyku
• Jest jeden edytowalny tekst ilość box dla każdego produktu w koszyku
• jest jeden przycisk „Update” dla całego koszyka

Chodzi o to, że użytkownik może modyfikować ilości dla każdego produktu w koszyku, a następnie kliknij „Aktualizuj” do zatwierdzić zmiany.

Jak zaprogramowałbyś przycisk "Aktualizuj" używając MVC? Czy owinąłbyś cały koszyk w formę, która zwróci się do siebie i jakoś zlokalizuje wartości ilościowe w FormCollection? Problem z tym podejściem polega na tym, że ponieważ przyciski "Usuń" każdy żyją we własnych formach, teraz robiłbym zagnieżdżone formularze na stronie i nie jestem nawet pewien, czy jest to dozwolone.

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

Jak wprowadzić dolny wkład do tego formularza?

Answer 1

Robiliśmy to w naszym projekcie za pomocą pojedynczego formularza usunąć, a to zupełnie inna forma do aktualizacji . Obaj przechodzą do różnych akcji POST w CartController.

UPDATE: Przykład podany (w surowym formacie 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

Zagnieżdżone formularze jawnie nie są obsługiwane w HTML.

Możesz jednak mieć wiele formularzy, jest to dozwolone. Zawiń każdy produkt w osobnym formularzu, dodaj parametr specyficzny dla produktu do każdego adresu URL formularza, aby wiedzieć, w odpowiednim działaniu kontrolera, który produkt należy zaktualizować.

coś takiego:

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

Jak bym włączyć wejście dolną do tej postaci?

dwie opcje:

1. dać każdemu tworzyć własne przedstawienia przycisk. Nazwij to "Aktualizuj ten produkt". Użytkownik określi, który z nich ma zostać zaktualizowany w parametrze adresu URL.
2. Owiń pełny wygenerowany stół wraz z przyciskiem przesyłania w jednym formularzu. Po przesłaniu musisz zaktualizować wszystkie produkty zawarte w formularzu. lub jakoś wykryć, które z nich były zmianami i tylko je zaktualizować.

Porada dotyczy obu przycisków, przesyłania i usuwania. Można określić zadania w url post, jak:

action="/update/21342345" 

lub

action="/delete/21342345" 

Answer 3

używam jQuery w podobnej sytuacji.Usuń przycisk wywołania metody post(), a jeśli się to uda, element div tego produktu zostanie usunięty ze strony (metoda remove()). Aktualizację można przesłać w zwykłym formularzu. możesz także użyć jQuery do zaprogramowania metody ajax Update, a następnie dynamicznie załadować koszyk, bez konieczności ponownego ładowania całej strony (przez $(). html() metoda wywoływana w oddzwanianiu post()).

Usuń mógłby wyglądać następująco:

onclick = "if (potwierdzenie ('Proszę potwierdzić.')) $ .post ('/ Koszyk/Usuń/63', {}, function (dane) {if (dane == "ok") {$ ('# cart-element-63'). remove()) ";

Answer 4

Szukałem tej samej wskazówki i znalazłem ten wpis. Właśnie zrobiłem to używając nazwanych przycisków przesyłania dla przycisków usuwania i unikatowych nazw pól tekstowych.

Pojedynczy formularz otula cały wózek. Podstawowy przycisk przesyłania to przycisk koszyka aktualizacji. Każdy przycisk Usuń przedmiot ma nazwę "usuń", a wartość jest ustawiona na unikalny klucz tego przedmiotu koszyka.

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

Każde pole tekstowe z liczbą sztuk ma przedrostek "qnty-" z unikalnym kluczem dla tego przedmiotu koszyka.

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

Po zgłoszeniu moje pętle akcji za pomocą kolekcji FormCollection. Jeśli nazwa to "usuń", usuwam ten unikalny klucz z koszyka. Jeśli nazwa zaczyna się od "qnty-", otrzymuję pozostałą część nazwy (unikalny klucz pozycji koszyka) i dostosowuję tę ilość sztuk do wartości pola tekstowego.

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