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.

Can you show us how the Guest class looks like? And what is Model.Guests? List<Guest> ? — ajma
– ajma, Commented Feb 21, 2011 at 19:42
The guest class is dymaically generated by entity framework. Just has some properties on it such as FirstName, LastName, Id, InviteId, etc — ChevCast
– ChevCast, Commented Feb 21, 2011 at 19:43

Darin Dimitrov · Accepted Answer · 2011-02-21 20:03:10Z

20

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.

edited Feb 21, 2011 at 20:03

answered Feb 21, 2011 at 19:55

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

5 Comments

ChevCast Over a year ago

What if I want a different editor for different areas? i.e. I want a different editor for Guest in the admin section, with more options than the editor for Guest in the public secion.

ChevCast Over a year ago

Nevermind. Html.EditorFor() has an overload with editor name. Thanks for the help!

Darin Dimitrov Over a year ago

@Chevex, then in the Admin section provide the corresponding editor template: ~/Areas/Admin/Views/Shared/EditorTemplates/Guest.cshtml.

Darin Dimitrov Over a year ago

@Chevex, no, try to avoid this overload. Use conventions instead. It's better and most developers should already be familiar with conventions.

ChevCast Over a year ago

Gotcha thanks for the help. I am now having a different issue. Maybe you can help? I have created another question here: stackoverflow.com/questions/5072905/…

goenning · Accepted Answer · 2011-02-21 19:57:28Z

8

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.

edited Feb 21, 2011 at 19:57

answered Feb 21, 2011 at 19:42

goenning

6,6381 gold badge37 silver badges44 bronze badges

3 Comments

ChevCast Over a year ago

I like! Mind showing me how to capture this on the other side in the action method after the POST?

Daniel Schaffer Over a year ago

Read up on model binding. It's easier than you think. encrypted.google.com/…

goenning Over a year ago

Updated. By the way, the post I linked above had this answer.

Collectives™ on Stack Overflow

How to use multiple form elements in ASP.NET MVC

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related