ASP.NET MVC4 dynamic form generation

Question

I am new to ASP.NET MVC and need some help. I have a need to create a form where the form is dynamically created. For example let's say I have a model named Person. The Person has a first and last name. In the form I want to allow the user to enter the first and last name of the person. I know how to do that, but what I don't know how to do is allow the user to add multiple persons and make that a single form submission.

On the initial load of the page (view) it would by default show two empty textboxes (for first name and last name). I would also have an add button that would allow the user to add another row to the form and show the same 2 textboxes for the 2nd person. Now if the user submits it, it would have 2 textboxes for the first name and 2 for the last name.

I don't know if there is a way to do this without post backs. Or is posting back my only option?

EDIT: Forgot to mention I am using the Razor engine.

Thanks

Answer 1

There is no need for multiple POSTs. You want your form to send an array of Person to your action. The action will be something like

[HttpPost]
public ActionResult AddPeople(Person[] people){ ... }

To achieve that, you must enumerate the input fields on your view. They must be indexed, starting in 0 and incrementing accordingly, like:

@using(Html.BeginForm("AddPeople","TheController", FormMethod.Post))
{
  <input type="text" name="people[0].FirstName" />
  <input type="text" name="people[0].LastName" />
  ...
  <input type="text" name="people[1].FirstName" />
  <input type="text" name="people[1].LastName" />
  ...
  <input type="text" name="people[n].FirstName" />
  <input type="text" name="people[n].LastName" />
}

You must add the new fields using javascript, with a simple DOM manipulation. Just remember to keep the indexes in order.

Answer 2

Steven Sanderson, in his blog, has a very nice article about this... it is not relying in numeric indexes for each person to avoid "holes" when removing one in the middle.

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

Then, you will need validation: http://blog.stevensanderson.com/2010/01/28/validating-a-variable-length-list-aspnet-mvc-2-style/

I'm using this code in MVC 3 and 4... and it works like a charm.

Answer 3

Phil Haack wrote an article on pretty much what you want to do. To have it be dynamic (meaning they can 1 to many people to the list), you'll have to do some JavaScript manipulation by attaching a click event to the add button to copy a new row of the input fields. I first suggest reading through that article first to understand how you need to structure the input fields so that when you post back the list gets populated.