LolaTheriotRelease: MVC 2 Editor Template for Radio Buttons

How to create an HTML helper to produce a radio button list? Here, the 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>

MVC 2 has released, providing an editor template that can be used as it rely on metadata, which allow us to customize the 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 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 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>

IN the above code, there are several things that to be noted. 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 to 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:  }
   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.


Tags: , , ,