Adding and deleting rows in dynamic table in Asp.n

Question

I am new to asp.net mvc. In my project i have to add a table where user can enter details and select options from drop down . And when the user clicks add button a row must be added to the table with all fields(that includes textbox, dropdown list). Also when the user clicks on delete button that particular row must be removed from the table. By default when the page loads I should have two rows in the table with all required fields. I need solution for the following questions

1. How to achieve the above said task.
2. I also need to save the table details. So how to pass the table details to the controller ?
3. After saving the details when the user clicks on edit button I should load all the details in the table. Please help me in this

I also searched a lot but none of the example includes dropdown option in dynamic table. Please help me in this task. Thanks in advance for all the volunteers.

Answer 1

I suggest using the BeginCollectionItem() helper that Steve Sanderson created

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

it achieves exactly what you want, and he goes over it step by step with a working example. I've used it in several of my projects.

Answer 2

I would have left some links in a comment, but I don't have enough rep yet. So I'll put this here as an answer and expound on it more than I would in a comment. But this is just general info. Please provide more details for more specific answers.

First of all, what version of MVC are you working with? What does your data model look like? Are you using an EntityModel? Have you considered a client side MVC or MVVM framework or library, such as AngularJS or Knockout?

Contingent on your answers to those questions, an answer to your question might be...

1. Create a class for your data model, and start decorating it with data annotations. Each column that you want to be appear in the table should be exposed as a public property. This can drive a 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, to add data annotations to the entity models generated.
2. You can use out of the box scaffolding to generate razor templates for CRUD operations. You could then use your new T4 skills to modify the scaffolding templates.
3. Consider using WebAPI and/or SignalR with a client side framework to either provide a RESTful api or persistent connection, either of which can be used to sync application level data between client and server.

It might seem like a good bit of overhead, but 1 & 2 can save you a lot of time if you're going to maximize use of Razor views.

You may want to only exchange application level data with the client most of the time though. You could build a client side architecture using a framework like AngularJS, or build your own framework around a library like Knockout, to bind to your data, and allow the markup (such as a custom directive's template in AngularJS, for example) to actually be generated and rendered via a client side controller.

For an opensource, standardized look and feel, I would recommend looking into 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.