在 Asp.net mvc razor 视图中动态添加和删除行 table

Adding and deleting rows in dynamic table in Asp.net mvc razor view

我是 asp.net mvc 的新手。在我的项目中,我必须添加一个 table,用户可以在其中输入详细信息,并从下拉列表中添加 select 选项。当用户单击添加按钮时,必须将一行添加到 table 中,其中包含所有字段(包括文本框、下拉列表)。此外,当用户单击删除按钮时,必须从 table 中删除该特定行。默认情况下,当页面加载时,我应该在 table 中有两行包含所有必填字段。我需要解决以下问题

  1. 如何完成上述任务。
  2. 我还需要保存 table 详细信息。那么如何将 table 详细信息传递给控制器​​?
  3. 当用户点击编辑按钮保存详细信息后,我应该在 table 中加载所有详细信息。请在这方面帮助我

我也搜索了很多,但示例的 none 包含动态 table 中的下拉选项。请帮助我完成这项任务。提前感谢所有志愿者。

我会在评论中留下一些链接,但我还没有足够的代表。因此,我将把它作为一个答案放在这里,并比我在评论中更详细地阐述它。但这只是一般信息。请提供更多详细信息以获得更具体的答案。

首先,您使用的是什么版本的 MVC?您的数据模型是什么样的?你在使用 EntityModel 吗?您是否考虑过客户端 MVC 或 MVVM 框架或库,例如 AngularJS 或 Knockout?

根据您对这些问题的回答,您问题的答案可能是...

  1. 为您的数据模型创建一个 class,并开始用 data annotations 装饰它。 您希望出现在 table 中的每一列都应显示为 public 属性。这可以驱动一个code first DB approach. Alternatively you could build an EntityModel from an existing DB. If you're going to do that, you might want to look in to modifying the T4 templates used by the EF wizard,为生成的实体模型添加数据注释。
  2. 开箱即用 scaffolding to generate razor templates for CRUD operations. You could then use your new T4 skills to modify the scaffolding templates
  3. 考虑将 WebAPI and/or SignalR 与客户端框架一起使用,以提供 RESTful api 或持久连接,两者均可用于在客户端之间同步应用程序级数据和服务器。

这可能看起来有点开销,但如果您要最大限度地使用 Razor 视图,则 1 和 2 可以为您节省大量时间。

虽然大多数时候您可能只想与客户端交换应用程序级别的数据。您可以使用 AngularJS, or build your own framework around a library like Knockout 之类的框架构建客户端架构,以绑定到您的数据,并允许实际生成和呈现标记(例如 AngularJS 中的自定义指令模板)通过客户端控制器。

对于开源、标准化的外观和感觉,我建议查看 Boostrap for a set relatively easy to use of components and layout/styling conventions. You can use it barebones or incorporate it with other js libs, like this

我建议使用 Steve Sanderson 创建的 BeginCollectionItem() 助手

http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

它完全实现了您想要的,并且他通过一个工作示例逐步介绍了它。我已经在我的几个项目中使用过它。