Custom CheckBox HTML Helper in MVC3 Razor

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

Custom CheckBox 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 input type="checkbox" to render checkbox control.

Following are the steps :

First we will create a folder named CustomHelper. We will include a class file named CustomCheckBoxHelper.cs, which will hold code for Custom checkbox control.

We have created the folder and the class file as mentioned earlier as shown in the above image.

The class file looks as below :

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

namespace CustomHtmlHelpers.CustomHelpers
{
    public static class CustomCheckBoxHelper
    {
        //This helper accepts name attribute. This method in turns calls our second overload.
        public static MvcHtmlString Custom_Checkbox(this HtmlHelper helper, string name)
        {
            return Custom_Checkbox(helper, name, false);
        }

        //This helper accepts name and isChecked boolean attribute. 
        public static MvcHtmlString Custom_Checkbox(this HtmlHelper helper, string name,bool isChecked)
        {
            return Custom_Checkbox(helper, name, isChecked, null);
        }

        //This overload accepts name, isChecked and htmlAttributes as parameter.
        public static MvcHtmlString Custom_Checkbox(this HtmlHelper helper, string name,bool isChecked,object htmlAttributes)
        {
            //Creating input control using TagBuilder class.
            TagBuilder checkbox = new TagBuilder("input");

            //Setting its type attribute to checkbox to render checkbox control.
            checkbox.Attributes.Add("type", "checkbox");

            //Setting the name and id attribute.
            checkbox.Attributes.Add("name", name);
            checkbox.Attributes.Add("id", name);

            //Adding the checked attibute based on parameter received.
            if (isChecked)
                checkbox.Attributes.Add("checked", "checked");

            //Merging the other attributes passed in the attribute.
            checkbox.MergeAttributes(new RouteValueDictionary(htmlAttributes));

            return MvcHtmlString.Create(checkbox.ToString(TagRenderMode.Normal)); 
        }
    }
}

In the above example, we have created a static class. We have created three overloads accepting different number of parameters to support multiple requirements.

Overload 1 : The first overload accepts name parameter. This name parameter is used to set the name attribute. This method is extension method and accepts object of HtmlHelper class. The first parameter adds this overload to System.Web.MVC namespace. On view we can access this method using @html. This overload in turn calls another overload.

Overload 2 : The second overload accepts name and isChecked as parameters. The name is used to set name attribute and isChecked parameter decides whether the checkbox should be checked or not. This overload calls another overload.

Overload 3 : The third overload accepts name, value and htmlAttributes object. The htmlAttributes object contains route values passed from the view. In this method we are creating a input element using TagBuilder class. We are setting its type attribute to checkbox to render checkbox. We are also setting name, id and any other attributes passed using htmlAttributes.

View :

<div>
@Html.Custom_Checkbox("hello")
@Html.Custom_Checkbox("hello", true)
@Html.Custom_Checkbox("hello", false, new {@class = "checkBox" })
</div>

In the view we are using @html to access our Custom_CheckBox method. As we have three overloads for it we have defined three controls.

UI :

Rendered HTML :

<div>
<input id="hello" name="hello" type="checkbox"></input>
<input checked="checked" id="hello" name="hello" type="checkbox"></input>
<input class="checkBox" id="hello" name="hello" type="checkbox"></input>
</div>

This is how we can create our own Custom HTML Helper to render hidden control. You can customize the above class to add more features in it. We can customize the overloads to accept list to render multiple checkboxes.