Custom Hidden HTML Helper in MVC3 Razor

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

Custom Hidden 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="hidden" to render hidden control.

Following are the steps :

First we will create a folder named CustomHelper. We will include a class file named CustomHiddenHelper.cs, which will hold code for Custom hidden 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 RouteValueDictionary class
using System.Web.Routing;

namespace CustomHtmlHelpers.CustomHelpers
{
    public static class CustomHiddenHelper
    {
        //Created a static method which accepts name as parameter. This method is extension method.
        //We can access this method using @html. 
        //This method inturn calls another method which is our second overload.
        public static MvcHtmlString Custom_Hidden(this HtmlHelper helper, string name)
        {
            return Custom_Hidden(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 inturn calls another method which is our third overload.
        public static MvcHtmlString Custom_Hidden(this HtmlHelper helper, string name, object value)
        {
            return Custom_Hidden(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_Hidden(this HtmlHelper helper, string name, object value, object htmlAttributes)
        {
            //Used TagBuilder class to create input element.
            TagBuilder hidden = new TagBuilder("input");

            //Set its type property to hidden to render input type="hidden" control.
            hidden.Attributes.Add("type", "hidden");

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

            if (value != null)
            {
                //Setting value for hidden input. This value we get in the for post.
                hidden.Attributes.Add("value", value.ToString());
            }

            //Merging the attribute object. This object contains html attributes defined in view.
            hidden.MergeAttributes(new RouteValueDictionary(htmlAttributes));

            //returning the HTML encoded string of hidden control.
            return MvcHtmlString.Create(hidden.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 value as parameters. The name is used to set name attribute and value is used to set the value of hidden control i.e. value attribute. 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 hidden to render hidden. We are also setting name, inner text and any other attributes passed using htmlAttributes.

View :

<div>
@Html.Custom_Hidden("Hidden1")
@Html.Custom_Hidden("Hidden2","Hello world")
@Html.Custom_Hidden("Hidden3", "Hello World", new { @class = "hiddenClass" })
</div>

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

Rendered HTML :

<div>
<input id="Hidden1" name="Hidden1" type="hidden"></input>
<input id="Hidden2" name="Hidden2" type="hidden" value="Hello world"></input>
<input class="hiddenClass" id="Hidden3" name="Hidden3" type="hidden" value="Hello World"></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.