I have a View in which the user can choose any number of Clubs by selecting checkboxex. The Clubs are a property of the main model with type List<ClubModel
>.
While refactoring I start out with this:
@using (Html.BeginForm())
{
<fieldset>
<legend>Voor Select clubs </legend><br />
<table>
<tr>
@for (var i = 0; i < Model.Clubs.Count; i++)
{
if (i % 3 == 0)
{
@:</tr><tr>
}
<td>
@Html.HiddenFor(model => model.Clubs[i].ClubID)
@Html.EditorFor(model => model.Clubs[i].IsAvailable)
</td>
<td>@Html.DisplayFor(model => model.Clubs[i].ClubName)</td>
}
</tr>
</table>
<input type="submit" value="Submit" />
</fieldset>
}
This works fine: the model is returned with a populated Clubs property.
Now I take out the <td
> tags and move them to an EditorTemplate:
@using (Html.BeginForm())
{
<fieldset>
<legend>Select Clubs </legend><br />
<table>
<tr>
@for (var i = 0; i < Model.Clubs.Count; i++)
{
if (i % 3 == 0)
{
@:</tr><tr>
}
@Html.EditorFor(model=>model.Clubs[i])
}
</tr>
</table>
<input type="submit" value="Submit" />
</fieldset>
}
This still works (template not shown).
Now I want to move the loop too to an EditorTemplate:
@using (Html.BeginForm())
{
<fieldset>
<legend> Select Clubs</legend><br />
<EditorFor(model=>model.Clubs,"ListOfClubs")
<input type="submit" value="Submit" />
</fieldset>
}
I duly create a EditorTemplate named 'ListOfClubs':
@using InvallersManagementMVC3.ViewModels;
@model List<StandInClubModel>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
@for (var i = 0; i < Model.Count; i++)
{
if (i % 3 == 0)
{
@:</tr><tr>
}
<td>
@Html.HiddenFor(model => model[i].ClubID)
@Html.EditorFor(model => model[i].IsAvailable)
</td>
<td>@Html.DisplayFor(model => model[i].ClubName)</td>
}
</tr>
</table>
</body>
</html>
This correctly shows the clubs with checkboxes for the IsAvailable property, but now on posting the Clubs property of the model is null!
Where am I going wrong?
EDIT: I tried to implement Cymen's answer by using:
@Html.EditorFor(model=>model.Clubs,"ClubModel")
or specifying the elementtemplate while passing in a list of these element. However I am greeted by an exception: System.InvalidOperationException was unhandled by user code Message=The model item passed into the dictionary is of type 'System.Collections.Generic.List`1[InvallersManagementMVC3.ViewModels.ClubModel]', but this dictionary requires a model item of type 'InvallersManagementMVC3.ViewModels.ClubModel'.
Make a EditorFor one instance of ClubModel and let ASP.NET MVC render it (let it do the iteration). ASP.NET MVC has some specific naming/id schemes for the input tags and you're not rendering them in your iteration.
So use this -- same as yours but observe the template name:
And the EditorFor. Note that it is for a single instance of the model even though you're passing in a list above. This is ASP.NET MVC "magic".
You seem to be trying to group the model list passed to the view by 3. So in order to refactor your code I would recommend you start by introducing a proper view model => one that reflects the requirements of this specific view:
Now inside the controller action we should simply convert the domain model into a list of this view model:
Now all that's left is to write some views:
~/Views/Home/Index.cshtml
:~/Views/Home/EditorTemplates/GroupedClubs.cshtml
:~/Views/Home/EditorTemplates/StandInClubModel.cshtml
:and that's pretty much all. Now you could have a controller action which would handle the form submission: