MVC Radio Button List

As predicted, I came around to using some radio buttons. As you might guess by now, I didn’t like the HTML or the implementation in the current MVC release. As you may expect, I wrote my own :-)

The implementation is fairly simple and straightforward. It extends System.Web.MVC.ViewPage, takes a list of objects, allows for selection of one of the radio buttons, supports orientation and supports selection of both the value the radio button submits and the display string for that item independently.

using System;
using System.Collections.Generic;
using System.Linq.Expressions;
using System.Web.Mvc;
using System.Web.UI;
public static partial class HtmlHelpers
{
    public static void ShowRadioButtonList<T>(this ViewPage page, IList<T> list, string name, Expression<Func<T, object>> valueProperty, Expression<Func<T, object>> displayProperty, System.Web.UI.WebControls.Orientation orientation)
    {
        page.ShowRadioButtonList(list, name, valueProperty, displayProperty, "3", orientation);
    }
    public static void ShowRadioButtonList<T>(this ViewPage page, IList<T> list, string name, Expression<Func<T, object>> valueProperty, Expression<Func<T, object>> displayProperty, string selectedValue, System.Web.UI.WebControls.Orientation orientation)
    {
        HtmlTextWriter writer = new HtmlTextWriter(page.Response.Output);
        if (writer != null)
        {
            Func<T, object> valueGetter = valueProperty.Compile();
            Func<T, object> displayStringGetter = displayProperty.Compile();
            for (int i = 0; i < list.Count; i++)
            {
                T row = list[i];
                string value = valueGetter(row).ToString();
                writer.AddAttribute(HtmlTextWriterAttribute.Type, "radio");
                writer.AddAttribute(HtmlTextWriterAttribute.Id, name + "_" + i);
                writer.AddAttribute(HtmlTextWriterAttribute.Name, name, true);
                writer.AddAttribute(HtmlTextWriterAttribute.Value, value, true);
                if (value == selectedValue)
                {
                    writer.AddAttribute(HtmlTextWriterAttribute.Checked,"checked");
                }
                writer.RenderBeginTag(HtmlTextWriterTag.Input);
                writer.Write(displayStringGetter(row));
                writer.RenderEndTag();
                if (orientation == System.Web.UI.WebControls.Orientation.Vertical)
                {
                    writer.RenderBeginTag(HtmlTextWriterTag.Br);
                    writer.RenderEndTag();
                }
            }
        }
    }
}

This implementation uses the type Expression<Func<T,Object>> for the selection of the value and the display string. To invoke the helper, assuming you have a list of Product objects, Product being defined:

public class Product
{
    public int ProductID { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
    public decimal Price { get; set; }
}

You can now call the helper from your MVC View Page strongly typed with a model List:

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<List<Product>>"
    MasterPageFile="~/Views/Shared/Site.Master" %>

invoked simply

<% this.ShowRadioButtonList<Product>(Model, 
                            "productRadioButtonList", 
                            a => a.ProductID, 
                            d => d.Title, "4", 
                            Orientation.Horizontal); %>

This call will create a radio button for each product in the list (Model is a List<Product> because we strongly typed the page as such). The radio button will use the ProductID property for the value of the input, and the Title property as the displayed string. If one of the product Id’s happens to be 4, that radio button will be selected in the group. The radio buttons will all be named “productRadioButtonList” but their ID will be appended an ordinal number “productRadioButtonList_1”,”productRadioButtonList_2”,”productRadioButtonList_3” etc.

There you have it: another day, another MVC control, another blog post.