3

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

Improve this question
4
  • 1
    have a look at partial views, you will need to create a model of ienumerable<person> and a partial view which will allow a user to add another person. There is plenty of information on SO and google to help you with code examples. Commented Jul 3, 2013 at 14:34
  • @NicholasKing, if you have links handy I would be grateful. In the mean time I will do some searching... Commented Jul 3, 2013 at 14:58
  • 1
    take a look at this. I found it very useful blog.stevensanderson.com/2010/01/28/… Commented Jul 3, 2013 at 15:19
  • 1
    @user78739 Hi user! Just a friendly reminder: you're expected to give feedback on the answers (so authors may improve it), upvote them when they deserve it and mark as correct the one that really helped you out. Commented Jul 3, 2013 at 17:47

3 Answers 3

Reset to default
3

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.

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

Comments

3

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.

Improve this answer

Comments

1

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.