MVC 2 Editor Template for Radio Buttons
- by Steve Michelotti
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.
