Custom Password HTML Helper in MVC3 Razor

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

Custom Password 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="password" to render password control.

Following are the steps :

First we will create a folder named CustomHelper. We will include a class file named CustomPasswordHelper.cs, which will hold code for Custom password 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 CustomPasswordHelper
    {
        //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_Password(this HtmlHelper helper, string name)
        {
            return Custom_Password(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_Password(this HtmlHelper helper, string name,string value)
        {
            return Custom_Password(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_Password(this HtmlHelper helper, string name,string value,object htmlAttributes)
        {
            //Used TagBuilder class to create input element.
            TagBuilder password = new TagBuilder("input");

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

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


            if (!string.IsNullOrEmpty(value))
            {
                //Setting text for the password field with value parameter.
                password.Attributes.Add("value", value);
            }

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

            //returning the HTML encoded string of password control.
            return MvcHtmlString.Create(password.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 text of password 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 password to render password. We are also setting name, inner text and any other attributes passed using htmlAttributes.

View :

<div>
@Html.Custom_Password("password")
@Html.Custom_Password("password","password")
@Html.Custom_Password("password", "password", new { maxlength = 10})
</div>

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

UI :

As we have defined three password controls, we can see three password controls getting rendered on UI.

Rendered HTML :

<div>
<input id="password" name="password" type="password"></input>
<input id="password" name="password" type="password" value="password"></input>
<input id="password" maxlength="10" name="password" type="password" value="password"></input>
</div>

This is how we can create our own Custom HTML Helper to render password control. You can customize the above class to add more features in it.