hình thức lồng nhau trong ASP.NET MVC

Question

Tôi có một giỏ mua hàng nơi sau đây là đúng:

• Có một nút "Xóa" cho mỗi sản phẩm trong giỏ hàng mua sắm
• Có một văn bản có thể chỉnh sửa số lượng hộp cho mỗi sản phẩm trong giỏ hàng mua sắm
• có một nút "Update" cho toàn bộ giỏ hàng

ý tưởng là người dùng có thể thay đổi số lượng cho mỗi sản phẩm trong giỏ hàng và bấm vào nút "cập nhật" đến cam kết thay đổi.

Bạn sẽ lập trình nút "Cập nhật" bằng MVC như thế nào? Bạn có bọc toàn bộ giỏ hàng trong một biểu mẫu đăng lại chính nó và bằng cách nào đó xác định vị trí các giá trị số lượng trong FormCollection không? Vấn đề với cách tiếp cận đó là vì các nút "Xóa" từng sống trong các biểu mẫu riêng của chúng, bây giờ tôi sẽ thực hiện các biểu mẫu lồng nhau trên trang và tôi thậm chí không chắc chắn được cho phép.

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

Làm cách nào để kết hợp đầu vào cuối vào biểu mẫu này?

Answer 1

Chúng tôi đã làm điều này trong dự án của chúng tôi bằng cách sử dụng một hình thức riêng lẻ cho Remove, và một hình thức hoàn toàn khác nhau cho Update . Cả hai đều đi đến các hành động POST khác nhau trong CartController.

UPDATE: Ví dụ cho trước (trong HTML thô):

<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

Biểu mẫu lồng nhau không được hỗ trợ rõ ràng trong HTML.

Tuy nhiên, bạn có thể có nhiều biểu mẫu, điều này được cho phép. Gói mỗi sản phẩm theo một biểu mẫu riêng biệt, thêm thông số sản phẩm cụ thể vào từng url bài đăng mẫu để bạn biết trong hành động của trình điều khiển tương ứng mà sản phẩm cần được cập nhật.

Something như thế này:

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

Làm thế nào tôi sẽ kết hợp các đầu vào đáy vào biểu mẫu này?

Hai lựa chọn:

1. Cho từng gửi biểu mẫu nút riêng của mình. Gọi nó là một cái gì đó như "Cập nhật sản phẩm này". Bạn sẽ chỉ định cái nào cần cập nhật trong tham số url.
2. Đưa bạn bảng được tạo hoàn chỉnh cùng với nút gửi vào một biểu mẫu duy nhất. Khi được gửi, bạn sẽ cần cập nhật tất cả các sản phẩm có trong biểu mẫu. hoặc bằng cách nào đó phát hiện những cái nào đã thay đổi và chỉ cập nhật chúng.

Tư vấn áp dụng cho cả hai nút, gửi và xóa. Bạn có thể chỉ định các nhiệm vụ trong bài url, như:

action="/update/21342345" 

hoặc

action="/delete/21342345" 

Answer 3

Tôi đang sử dụng jQuery trong tình huống tương tự.Xóa nút gọi phương thức post() và nếu nó thành công, phần tử div của sản phẩm này được xóa khỏi trang (phương thức remove()). Cập nhật có thể gửi biểu mẫu bình thường. bạn cũng có thể sử dụng jQuery để lập trình phương thức Cập nhật ajax và sau đó tải giỏ hàng động, mà không phải tải lại toàn bộ trang (bằng phương thức $(). html() được gọi trong hàm gọi lại của bài()).

Remove có thể trông giống như:

onclick = "if (confirm ('Vui lòng xác nhận.')) $ .post ('/ giỏ/Remove/63', {}, function (data) { nếu (data == 'ok') {$ ('# cart-element-63'). xóa()) ";

Answer 4

Tôi đang tìm kiếm cùng một mẹo và tìm thấy bài đăng này. Tôi vừa thực hiện việc này bằng cách sử dụng các nút gửi có tên cho các nút xóa và các tên trường văn bản số lượng duy nhất.

Một biểu mẫu bao quanh toàn bộ giỏ hàng. Nút gửi chính sẽ là nút giỏ cập nhật. Mỗi nút xóa mục có tên "xóa" với giá trị được đặt thành khóa duy nhất của mục hàng đó.

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

Mỗi trường văn bản Số lượng có tiền tố "qnty-" với khóa duy nhất cho mục hàng đó.

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

Sau khi gửi hành động của tôi lặp qua FormCollection. Nếu tên là "xóa", tôi sẽ xóa khóa duy nhất đó khỏi giỏ hàng. Nếu tên bắt đầu bằng "qnty-", tôi sẽ nhận được phần còn lại của tên (khóa mục giỏ hàng duy nhất) và điều chỉnh số lượng mặt hàng đó thành giá trị của trường văn bản.

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