Custom TextArea HTML Helper in Asp.net MVC3 Razor

Home » Custom HTML Helpers » HTML Helper » MVC 3 » Custom TextArea HTML Helper in Asp.net MVC3 Razor

Custom TextArea HTML Helper in Asp.net 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 TextArea to render TextArea control.

Follow the steps :

First we will create a folder named CustomHelper. We will include a class file named CustomTextAreaHelper.cs, which will hold code for Custom TextArea 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;
//namespace to use HtmlHelper class
using System.Web.Mvc;
//namespace to use TagBuilder class
using System.Text;
//namespace to use RouteValueDictionary class
using System.Web.Routing;


namespace CustomHtmlHelpers.CustomHelpers
{
    public static class CustomTextAreaHelper
    {
        //Created a static method which accepts name as parameter. This method is extension method.
        //We can access this method using @html. 
        //This method in turn calls another method which is our second overload.
        public static MvcHtmlString Custom_TextArea(this HtmlHelper helper, string name)
        {
            return Custom_TextArea(helper, name, null);
        }


        //Created a static method which accepts name and value as parameter. This method is extension method.
        //We can access this method using @html. 
        //This method in turn calls another method which is our third overload.
        public static MvcHtmlString Custom_TextArea(this HtmlHelper helper, string name, string value)
        {
            return Custom_TextArea(helper, name, value, null);
        }


        //Created a static method which accepts name, value and htmlAttributes as parameter. This method is extension method.
        //We can access this method using @html.
        public static MvcHtmlString Custom_TextArea(this HtmlHelper helper, string name, string value,object htmlAttributes)
        {
            //Created a textarea tag using TagBuilder class.
            TagBuilder textarea = new TagBuilder("textarea");
            //Setting its name attribute
            textarea.Attributes.Add("name", name);
            if (!string.IsNullOrEmpty(value))
            {
                //assigning the value passed as parameter. This valus is shown inside the TextArea.
                textarea.InnerHtml = value;
            }
            //Merging the attribute object.
            textarea.MergeAttributes(new RouteValueDictionary(htmlAttributes));
            return MvcHtmlString.Create(textarea.ToString());
        }
    }
}

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 value as parameters. The name is used to set name attribute and value is used to set the inner text of TextArea. 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 TextArea element using TagBuilder class. We are also setting name, inner text and any other attributes passed using htmlAttributes.

View :

<h2>About</h2>
<div>
@Html.Custom_TextArea("textarea")
@Html.Custom_TextArea("textarea", "This is Custom Textarea")
@Html.Custom_TextArea("textarea", "This is Custom TextArea", new { style = "color:Red;" })
</div>

In View we are using all the three overloads to render textarea with multiple parameters.

UI :

The textarea elements rendered as expected.

Rendered HTML :

<textarea name="textarea"></textarea>
<textarea name="textarea">This is Custom Textarea</textarea>
<textarea name="textarea" style="color:Red;">This is Custom TextArea</textarea>

This is how we can create our own Custom HTML Helper to render TextArea control.