MVC 5 add dynamic fields to form using jquery and save it to model

Question

Is it possible to have a form in MVC 5 where you can add dynamic fields using jQuery as here: JSFiddle

And then post those fields to model using MVC?

In fact my viewmodel where I want to save those values is a List<string> where all those values will be saved.

user3559349 · Accepted Answer · 2014-07-29 07:22:38Z

5

When dynamically adding the inputs you need to ensure they are named/indexed correctly for postback. For example, if your post action method is

[HttpPost]
public ActionResult Edit(List<string> text)
{
  ...

then your inputs need to be named

<input name="[0].text" value=.../>
<input name="[1].text" value=.../>
<input name="[2].text" value=.../>

so you need to modify the script to create the correct name attribute. Note the indexes need to start at zero and be sequential so you will need to take into account what happens if an input in the middle of the list is removed by the user.

answered Jul 29, 2014 at 7:22

user3559349

Sign up to request clarification or add additional context in comments.

4 Comments

David Dury Over a year ago

Is this using @Html.BeginCollectionItem ?

user3559349 Over a year ago

No you don't necessarily that - its just a helper that you may find easier to work with. The key to posting back a collection is to name the elements correctly with an indexer

David Dury Over a year ago

What about if I will have a List<object> where object has 2 properties: Id and value. How the elements should be named?

user3559349 Over a year ago

For example List<Employee> and Employee has properties FirstName and LastName, then the inputs would be <input name="employees[0].FirstName" ... and <input name="employees[0].LastName" ... and postback to public ActionResult Edit(List<Employee> employees)

Collectives™ on Stack Overflow

MVC 5 add dynamic fields to form using jquery and save it to model

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related