How do I dynamically add and remove line items from an ASP.NET MVC view?

Question

I have a PurchaseOrder model:

public class PurchaseOrder
{ 
    public string OrderNumber { get; set; }
    public string Customer { get; set; }
    public IList<LineItem> Lines { get; set; }
}

and a LineItem class:

public class LineItem
{ 
   public string PartNumber { get; set; }
   public int Quantity { get; set; }
}

What I want to do is on my view for the PurhcaseOrder Create action, I need a section for line items. The user should be able to add a new line, remove a line, then submit. One caveat is the PartNumber needs to be a dropdown list of valid parts.

What can I do to accomplish what I'm looking for?

Answer 1

I would create this functionality with jQuery (on a client side)

---

Part Number 1345 - 124 items [Remove]
Part Number 1489 - 101 items [Remove]

[Select part namber \/] [_ Quantity _] [Add]

---

Plus you could duplicate this functionality (exactly the same UI) with server-side code for the clients who have JS disabled. In order to do that you could store temprorary LineItems in TempData (on each post back, when user clicks Add Line Item).

Answer 2

If you want to do everything without js, then make a new action/view for adding and editing a line item. For deleting, it is bad practice to have an actionlink delete the item, a GET should never alter data. So a good pattern is to have the delete link go to a confirm page. And from that page you POST to the delete action (or cancel and go back)