How to use multiple form elements in ASP.NET MVC

Question

So I am new to ASP.NET MVC and I would like to create a view with a text box for each item in a collection. How do I do this, and how do I capture the information when it POSTs back? I have used forms and form elements to build static forms for a model, but never dynamically generated form elements based on a variable size collection.

I want to do something like this in mvc 3:

@foreach (Guest guest in Model.Guests)
{
    <div>
        First Name:<br />
        @Html.TextBoxFor(???) @* I can't do x => x.FirstName here because
                                 the model is of custom type Invite, and the
                                 lambda wants to expose properties for that
                                 type, and not the Guest in the foreach loop. *@
    </div>
}

How do I do a text box for each guest? And how do I capture them in the action method that it posts back to?

Thanks for any help.

Answer 1

You can do this:

@for (int i = 0; i < Model.Guests.Count; i++) {
  @Html.TextBoxFor(m => m.Guests.ToList()[i].FirstName)
}

There are more examples and details on this post by Haacked.

UPDATE: The controller post action should look like this:

[HttpPost]
public ActionResult Index(Room room)
{
    return View();
}

In this example I'm considering that you have a Room class like this:

public class Room
{
    public List<Guest> Guests { get; set; }
}

That's all, on the post action, you should have the Guests list correctly populated.

Answer 2

Definitely a job for an editor template. So in your view you put this single line:

@Html.EditorFor(x => x.Guests)

and inside the corresponding editor template (~/Views/Shared/EditorTemplates/Guest.cshtml)

@model AppName.Models.Guest
<div>
    First Name:<br />
    @Html.TextBoxFor(x => x.FirstName)
</div>

And that's about all.

Now the following actions will work out of the box:

public ActionResult Index(int id)
{
    SomeViewModel model = ...
    return View(model);
}

[HttpPost]
public ActionResult Index(SomeViewModel model)
{
    if (!ModelState.IsValid)
    {
        return View(model);
    }
    // TODO: do something with the model your got from the view
    return RedirectToAction("Success");
}

Note that the name of the editor template is important. If the property in your view model is:

public IEnumerable<Guest> Guests { get; set; }

the editor template should be called Guest.cshtml. It will automatically be invoked for each element of the Guests collection and it will take care of properly generating ids and names of your inputs so that when you POST back everything works automatically.

Conclusion: everytime you write a loop (for or foreach) inside an ASP.NET MVC view you should know that you are doing it wrong and that there is a better way.