如何从ASP.NET MVC视图中动态添加和删除行项目？

I have a PurchaseOrder model:

我有一个PurchaseOrder模型:

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

and a LineItem class:

和一个LineItem类:

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.

我想要做的是在我对PurhcaseOrder Create操作的看法,我需要一个关于订单项的部分。用户应该能够添加新行,删除一行,然后提交。需要注意的是,PartNumber需要是有效部件的下拉列表。

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

我能做些什么来完成我正在寻找的东西?

3 个解决方案

#1

http://knockoutjs.com/ is pretty good for this.

http://knockoutjs.com/非常适合这个。

http://knockoutjs.com/examples/cartEditor.html shows an editor which can add/remove lines and contains drop down.

http://knockoutjs.com/examples/cartEditor.html显示了一个编辑器,可以添加/删除行并包含下拉列表。

and there's an old-ish article that discusses using Knockoutjs with asp.net mvc - http://blog.stevensanderson.com/2010/07/12/editing-a-variable-length-list-knockout-style/

还有一篇古老的文章讨论了如何在asp.net mvc中使用Knockoutjs - http://blog.stevensanderson.com/2010/07/12/editing-a-variable-length-list-knockout-style/

#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)

如果您想在没有js的情况下执行所有操作,请创建一个用于添加和编辑订单项的新操作/视图。对于删除,使用actionlink删除项目是不好的做法,GET永远不应该改变数据。因此,一个好的模式是将删除链接转到确认页面。从那个页面你发布到删除操作(或取消并返回)

#3

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

我会用jQuery创建这个功能(在客户端)

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

零件号1345 - 124件[删除]零件号1489 - 101件[删除]

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

[选择部分namber /] [_数量_] [添加]

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).

另外,对于已禁用JS的客户端,您可以使用服务器端代码复制此功能(完全相同的UI)。为了做到这一点,你可以在TempData中存储temprorary LineItems(当用户点击Add Line Item时,在每个帖子上)。

#1