1

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.

Vib
  • 85
  • 2
  • 4
  • 15
  • Some options for dynamically adding and deleting items from a collection [here](http://stackoverflow.com/questions/29161481/post-a-form-array-without-successful/29161796#29161796) and [here](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) –  Apr 06 '15 at 05:05

2 Answers2

2

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.

Eckert
  • 690
  • 4
  • 9
  • hi your link is helpful, I also have someother fields in the view. How to pass those fields values to controller. – Vib Apr 06 '15 at 14:50
  • Use a ViewModel that contains your collection-fields as well as your additional fields. Using the example from the blog, let's say that in addition to the "Gift" collection, we want to add a name field and also a date field. Example fiddle I created: https://dotnetfiddle.net/lbi2Wb – Eckert Apr 06 '15 at 20:16
  • Thanks for the example. I need to do some jquery functions for the fields inside the partial view. But the id of the fields seems to varry each time when the page loads loads. How to solve this problem. Any solution will be helpful to me – Vib Apr 07 '15 at 08:54
  • You could assign a class name to the field element, then register it in your script. ex: $(".myClassName").on("change")... any time you interact with one of your elements with this class name, it should trigger the desired function for that specific field. – Eckert Apr 07 '15 at 16:11
  • Hi I managed to do the javascript functions with the help of hidden GUID value. Can you please write the partial view and main view code to the jsfiddle you gave. I need that .. thanks – Vib Apr 10 '15 at 11:31
0

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.

Eric Lease
  • 4,114
  • 1
  • 29
  • 45
  • Hi thanks for the reply, I am using mvc 4. Actually I use webservices to store and retrieve data from db. Pls help with appropriate solution – Vib Apr 03 '15 at 15:51
  • Are you forced to use MVC 4? If not, why not start with 5, or even take a look at 6? But if you have an existing web service api, and you're relying on that for server side validation, all you really need is a client side app. If you go that route you'll want to look into a [client side mvc frameworks](http://paulhammant.com/2012/02/13/client-side-mvc-frameworks-compared/). Just have the client side controllers retrieve data via ajax calls to the existing web service(s). – Eric Lease Apr 03 '15 at 21:22