Custom RadioButton HTML Helper in MVC3 Razor

Home » Custom HTML Helpers » HTML Helper » MVC 3 » Custom RadioButton HTML Helper in MVC3 Razor

Custom RadioButton HTML Helper in MVC3 Razor

Posted by 20Fingers2Brains on Tags: Custom HTML Helpers , HTML Helper , MVC 3

In MVC3 Razor we have HTML helpers to render different controls.
Instead of using these helpers we can create our own helper classes and methods and use them as we want.
The creation of custom helpers provides flexibility to change the attributes and style of the control that renders.
In this article we will create Custom HTML helper for Radio Button to render radio buttons.

Following are the steps :

We have created a separate folder named CustomHelpers to hold Custom HTML Helpers. We have created a class named CustomRadioButtonHelper which will contain code to render radio buttons.

The class file looks like below :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Text;

namespace CustomHtmlHelpers.CustomHelpers
{
    public static class CustomRadioButtonHelper
    {
        public static MvcHtmlString CustomRadioButton(this HtmlHelper helper, string name, IEnumerable<selectlistitem> radioList)
        {
            StringBuilder radiobutton = new StringBuilder();
            TagBuilder radio = null;
            TagBuilder label = null;
            foreach (SelectListItem item in radioList)
            {
                radio = new TagBuilder("input");
                label = new TagBuilder("label");
                label.InnerHtml = item.Text;
                radio.Attributes.Add("type", "radio");
                radio.Attributes.Add("name", name);
                radio.Attributes.Add("value",item.Text);
                radiobutton.Append(label.ToString());
                radiobutton.Append(radio.ToString());
            }
            return MvcHtmlString.Create(radiobutton.ToString());
        }
    }
}

The above class is static class contains a static method which is extension method. This method accepts name and list as parameter. The name parameter is used to group the radio buttons. The list contains the items for which radio button is to render. We have created a object of StringBuilder class to hold the strings of label and radio button. We have used TagBuilder class to create both label and radio button control.
The list received as parameter is iterated and for each item in the list the label and radio button is created and the string is added to StringBuilder object. Thus for all the values in the list the label and radio controls are created.

View :

@model CustomHtmlHelpers.Models.Register

@{
    ViewBag.Title = "About Us";
    List<SelectListItem> gender = new List<SelectListItem>();
    gender.Add(new SelectListItem { Text = "Male", Value = "1" });
    gender.Add(new SelectListItem { Text = "Female", Value = "2" });
}

<h2>About</h2>
<p>
@Html.CustomRadioButton("Gender", gender)
</p>

In the above view, we have created a list named Gender and added two items in the list. We have used our CustomRadioButton and passed the required parameters.

UI :

The radio buttons are rendered according to the list passed to the Custom helper.

Rendered HTML :

<label>Male</label>
<input name="Gender" type="radio" value="Male"></input>
<label>Female</label>
<input name="Gender" type="radio" value="Female"></input>