Custom TextBox HTML Helper in MVC3 Razor

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

Following are the steps :

First we will create a folder named CustomHelper. We will include a class file named CustomTextBoxHelper.cs, which will hold code for Custom TextBox 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 CustomTextBoxHelper

        public static MvcHtmlString Custom_TextBox(this HtmlHelper helper, string name)
            return Custom_TextBox(helper, name, null, null);

        public static MvcHtmlString Custom_TextBox(this HtmlHelper helper, string name,string text)
            return Custom_TextBox(helper, name, text, null);

        public static MvcHtmlString Custom_TextBox(this HtmlHelper helper, string name, string text, object htmlAttributes)
            TagBuilder textBox = new TagBuilder("input");
            textBox.Attributes.Add("type", "text");
            textBox.Attributes.Add("name", name);
            textBox.Attributes.Add("id", name);

            if (!string.IsNullOrEmpty(text))
                textBox.Attributes.Add("value", text);

            textBox.MergeAttributes(new RouteValueDictionary(htmlAttributes));
            return MvcHtmlString.Create(textBox.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 id and 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 text as parameters. The name is used to set name attribute and text is used to set the value attribute of textbox. This overload calls another overload.

Overload 3 : The third overload accepts name, text 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 test to render textbox. We are also setting name, id, value and any other attributes passed using htmlAttributes.

View :

In View we are using all the three overloads to render textbox with different parameters. 

Before running the application add the namespace reference of the custom class in Web.config so that the method is accessed anywhere in the solution.

UI :

We can see the textbox rendered as we have used it in View and in our Custom TextBox helper.

Rendered HTML :

    <input id="CustomText" name="CustomText" type="text"></input>

    <input id="CustomText" name="CustomText" type="text" value="Hello World"></input>

    <input id="CustomText" name="CustomText" style="color:Red;" type="text" value="Hello World"></input>
This is how we can create a Custom TextBox Helper in MVC3 Razor and fulfill our specific project needs.


Post a Comment