A while back I blogged about how to create an HTML Helper to produce a radio button list. In that post, my HTML helper was “wrapping”
the FluentHtml library from MvcContrib to produce
the following html output (given an IEnumerable list containing
the items “Foo” and “Bar”): 1: <div>
2: <input id="Name_Foo" name="Name" type="radio" value="
Foo" /><label for="Name_Foo" id="Name_Foo_Label">Foo</label>
3: <input id="Name_Bar" name="Name" type="radio" value="Bar" /><label for="Name_Bar" id="Name_Bar_Label">Bar</label>
4: </div>
With
the release of MVC 2, we now have editor templates we can use that rely on metadata to allow us to customize our views appropriately. For example, for
the radio buttons above, we want
the “id” attribute to be differentiated and unique and we want
the “name” attribute to be
the same across radio buttons so
the buttons will be grouped together and so model binding will work appropriately. We also want
the “for” attribute in
the <label> element being set to correctly point to
the id of
the corresponding radio button.
The default behavior of
the RadioButtonFor() method that comes OOTB with MVC produces
the same value for
the “id” and “name” attributes so this isn’t exactly what I want out
the the box if I’m trying to produce
the HTML mark up above.
If we use an EditorTemplate,
the first gotcha that we run into is that, by default,
the templates just work on your view model’s property. But in this case, we *also* was
the list of items to populate
all the radio buttons. It turns out that
the EditorFor() methods do give you a way to pass in additional data. There is an overload of
the EditorFor() method where
the last parameter allows you to pass an anonymous object for “extra” data that you can use in your view – it gets put on
the view data dictionary:
1: <%: Html.EditorFor(m => m.Name, "RadioButtonList", new { selectList = new SelectList(new[] { "
Foo", "Bar" }) })%>
Now we can create a file called RadioButtonList.ascx that looks like this:
1: <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
2: <%
3: var list = this.ViewData["selectList"] as SelectList;
4: %>
5: <div>
6: <% foreach (var item in list) {
7: var radioId = ViewData.TemplateInfo.GetFullHtmlFieldId(item.Value);
8: var checkedAttr = item.Selected ? "checked=\"checked\"" : string.Empty;
9: %>
10: <input type="radio" id="<%: radioId %>" name="<%: ViewData.TemplateInfo.HtmlFieldPrefix %>" value="<%: item.Value %>" <%: checkedAttr %>/>
11: <label for="<%: radioId %>"><%: item.Text %></label>
12: <% } %>
13: </div>
There are several things to note about
the code above. First, you can see in line #3, it’s getting
the SelectList out of
the view data dictionary. Then on line #7 it uses
the GetFullHtmlFieldId() method from
the TemplateInfo class to ensure we get unique IDs. We pass
the Value to this method so that it will produce IDs like “Name_Foo” and “Name_Bar” rather than just “Name” which is our property name. However, for
the “name” attribute (on line #10) we can just use
the normal HtmlFieldPrefix property so that we ensure
all radio buttons have
the same name which corresponds to
the view model’s property name. We also get to leverage
the fact
the a SelectListItem has a Boolean Selected property so we can set
the checkedAttr variable on line #8 and use it on line #10. Finally, it’s trivial to set
the correct “for” attribute for
the <label> on line #11 since we already produced that value.
Because
the TemplateInfo class provides
all the metadata for our view, we’re able to produce this view that is widely re-usable across our application. In fact, we can create a couple HTML helpers to better encapsulate this call and make it more user friendly:
1: public static MvcHtmlString RadioButtonList<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, params string[] items)
2: {
3: return htmlHelper.RadioButtonList(expression, new SelectList(items));
4: }
5:
6: public static MvcHtmlString RadioButtonList<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItem> items)
7: {
8: var func = expression.Compile();
9: var result = func(htmlHelper.ViewData.Model);
10: var list = new SelectList(items, "Value", "Text", result);
11: return htmlHelper.EditorFor(expression, "RadioButtonList", new { selectList = list });
12: }
This allows us to simply
the call like this:
1: <%: Html.RadioButtonList(m => m.Name, "
Foo", "Bar" ) %>
In that example,
the values for
the radio button are hard-coded and being passed in directly. But if you had a view model that contained a property for
the collection of items you could call
the second overload like this:
1: <%: Html.RadioButtonList(m => m.Name, Model.FooBarList ) %>
The Editor templates introduced in MVC 2 definitely allow for much more flexible views/editors than previously available. By knowing about
the features you have available to you with
the TemplateInfo class, you can take these concepts and customize your editors with extreme flexibility and re-usability.
