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

【问题标题】：How do I dynamically add and remove line items from an ASP.NET MVC view?如何从 ASP.NET MVC 视图中动态添加和删除行项目？
【发布时间】：2009-03-27 15:25:23
【问题描述】：

我有一个 PurchaseOrder 模型：

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

还有一个 LineItem 类：

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

我想要做的是对 PurhcaseOrder Create 操作的视图，我需要一个用于订单项的部分。用户应该能够添加新行，删除一行，然后提交。一个警告是 PartNumber 需要是有效部件的下拉列表。

我可以做些什么来完成我正在寻找的东西？

【问题讨论】：

标签： c# asp.net asp.net-mvc

【解决方案1】：

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

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

还有一篇过时的文章讨论了将 Knockoutjs 与 asp.net mvc 结合使用 - http://blog.stevensanderson.com/2010/07/12/editing-a-variable-length-list-knockout-style/

【讨论】：

【解决方案2】：

如果你想在没有 js 的情况下做所有事情，那么创建一个新的操作/视图来添加和编辑一个订单项。对于删除，让操作链接删除项目是不好的做法，GET 永远不应该更改数据。所以一个好的模式是让删除链接进入确认页面。然后从该页面发布到删除操作（或取消并返回）

【讨论】：

【解决方案3】：

我将使用 jQuery（在客户端）创建此功能

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

[选择零件编号/] [_数量_] [添加]

另外，您可以为禁用 JS 的客户端复制此功能（完全相同的 UI）和服务器端代码。为此，您可以将临时 LineItems 存储在 TempData 中（在每次回发时，当用户单击 Add Line Item 时）。

【讨论】：

禁用 Javascript 会怎样？
@Kieron：您构建它以便它为删除而不是 AJAX 回发进行真正的回发，例如，使用 Ajax.ActionLink 或一些类似的 jquery。添加需要回发数据以指示应添加新行。
这种情况很少发生，但您可以使用这些客户端的服务器端代码复制此功能。