mvc.net how to use strongly typed helpers while iterating through list

Question

I have a partial view that renders a list of objects into a table format and allows editing of the values...

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IList<whoozit.Models.PictureModel>>" %>

<% foreach (whoozit.Models.PictureModel p in Model)
           { %>

  <td>
  <%: Html.TextBox("name",p.name) %>
  <%: Html.ValidationMessage(p.name) %>
  </td>  

<% } %>

I'm wanting to refactor this to take advantage of the strongly typed html helpers in mvc2. I am running into difficulty understanding how to create the lambda expressions and was hoping for some help. the following doesn't seem quite correct to me.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IList<whoozit.Models.PictureModel>>" %>

<% foreach (whoozit.Models.PictureModel p in Model)
           { %>

  <td>
  <%: Html.TextBoxFor(???) %>
  </td>  

<% } %>

Winder

Answer 1

First of all you shouldn't be iterating in a view. Iterating means loops, loops mean C#/VB.NET, C#/VB.NET in a view leads to spaghetti code.

I would recommend you using Editor Templates. This way you don't need to write loops in your views. Add the following file in ~/Views/Home/EditorTemplates/PictureModel.ascx:

<%@ Control Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<whoozit.Models.PictureModel>" %>
<td>
    <%: Html.TextBoxFor(x => x.name) %>
    <%: Html.ValidationMessageFor(x => x.name) %>
</td>

Notice that the partial is now strongly typed to whoozit.Models.PictureModel instead of IList<whoozit.Models.PictureModel>. Now all that is left is to include this partial from the main view:

<%: Html.EditorFor(x => x.Pictures) %>

Where Pictures is a property of type IList<whoozit.Models.PictureModel> on your main view model. This will automatically invoke the partial for each element of the collection so that you don't need to write ugly loops in your views.

It just works by convention: the partial needs to be called PictureModel.ascx as the type name of the list elements and located in ~/Views/Home/EditorTemplates or ~/Views/Shared/EditorTemplates folder.

Editor/Display templates will make your views much more elegant.

Remark: In .NET the convention is property names to start with capital letter, so I would recommend you renaming the name property to Name. It's just feels more natural to write and read:

<%: Html.TextBoxFor(x => x.Name) %>

Pizza

Answer 2

You can use strongly typed helper methods by looping through the model with a for loop. This will also make the "name" html attribute unique so the model binder can help you map the values back to your model in a save situation.

<% for (int i = 0; i < Model.Count; i++) { %>

  <%: Html.TextBoxFor(m => m[i].Name) %>
  <%: Html.TextBoxFor(m => m[i].SomethingElse) %>

<% } %>

Read more here.. http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx

Valladares

Answer 3

<%= Html.TextBoxFor(p => p.name) %> 

Psychometrics

this gives an error of 'IList<whoozit.Models.Picture> does not contain a definition of name...' the variable 'p' is of type List<Picture> and not of Picture, so I can't access the name field – Winder

Answer 4

You are telling your partial view to expect a list of whoozit.Models.PictureModel items. Then your foreach is looking for whoozit.Models.Picture not PictureModel. Below is how I normally would do something like this. Make sure your List you are try to enumerate over is the correct type. If the picture class is coming from a collection inside the PictureModel make sure you are doing Model.Whatever in the foreach.

Try this:

<% foreach(var p in Model) { %>
<td>
<%: Html.TextBoxFor(p => p.name) %>
<%: Html.ValidateFor(p => p.name) %>
</td>
<% } %>

Gossamer