Problem with MVC EditorFor named template

Question

I have what appears (to me anyway) to be a strange problem...

I created a simple editor template for a SelectListItem (SelectListItem.cshtml in the ~/Views/Shared/EditorTemplates folder), for example:

<ul class="select-list-item cell-15 col-3 omega clearfix">
    @Html.EditorFor(c => c.Categories)
</ul>

Where c.Categories is an IEnumerable

This worked fine, but I wanted another template to render the collection with slightly different markup, so I copied and renamed the editor template to, for example, 'CategoryIcons.cshtm' and invoked as follows:

<ul class="select-list-item cell-15 col-3 omega clearfix">
    @Html.EditorFor(c => c.Categories, "CategoryIcons")
</ul>

In short, the only difference is I'm specifying a named editor template.

When I open the page, I now get the following error:

The model item passed into the dictionary is of type 'System.Collections.Generic.List`1[System.Web.Mvc.SelectListItem]', but this dictionary requires a model item of type 'System.Web.Mvc.SelectListItem'

The template's model declaration, in both templates id:

@model System.Web.Mvc.SelectListItem

I don't understand why the default template works and the named template doesn't. Any help would be appreciated.

Thanks.

Answer 1

When you call @Html.EditorFor(c => c.Categories) it is falling back to the default template for IEnumerable. This default template is provided by the MVC framework, and its behaviour is to output Html.EditorFor() for each item in the enumeration. That in turn emits the appropriate editor template for each item in the list individually - in your case they're all instances of SelectListItem, so in the first case, the SelectListItem template is used for each item.

In the second case, by explicitly setting your EditorFor to use a particular editor template CategoryIcons, you are telling it to use that editor template for the whole enumeration, instead of allowing the enumerable to be templated by default, in turn using the template for each enumerated item.

I'm not sure of the best way around this just yet.

One approach would be to define a CategoryIcons template, whose model is an instance of IEnumerable<CategoryIcon>, which simply foreaches the Model enumeration, and performs Html.EditorFor for each item, with an explicit template reference of CategoryIcon. You then put your per-item editor template in that template (CategoryIcon not CategoryIcons). You would then call this by doing @Html.EditorFor(c => c.Categories, "CategoryIcons").

I'm going to have a look around to see if there are better ways to get this done, but I hope this might be useful for now. It would be great if templates could be parameterized, so you could write an IEnumerable template that takes as an argument the name of the template to use for each of its items.

Answer 2

Just an update, I stumbled on this question trying to address the same issue myself.

What I ended up doing was iterating through each instance of the collection and calling the EdtorFor individually, sort of like this:

<ul class="select-list-item cell-15 col-3 omega clearfix">
    @for (int i=0;i<Model.Categories.Count;i++) {
        @Html.EditorFor(c => c.Categories[i], "CategoryIcons")
    }
</ul>

Still not clean, but I like it better than inheriting a new class like you ended up doing.

(Sorry if my C# syntax is a little off, I write in vb.net)

Answer 3

If you're using EditorFor, I don't think the looping solution will work. It seems that using the IEnumerable template is the only way for the form inputs to be named correctly; if you just call EditorFor repeatedly, then your form <INPUT>s will have the same ID, rather than indexed IDs.

I experienced this issue and the solution was to emit the enumerable template and not loop through the list items.

Sorry to make this an answer not a comment -- don't have commenting rights.