Creating a custom HTML Helper in ASP.Net MVC

asplogo-square MVC has many built-in Razor HTML Helpers that you can use them to create your views. By using these Helpers, you’re going to reduce the time you normally need to create a view by using HTML from scratch.

What’s an HTML Helper

An HTML helper is just a method that returns a string that contains a valid HTML, for example it can contain a valid password input HTML tag.
There is many built-in HTML hlepers in ASP.Net MVC like (not a complete list):

  • Html.TextBox()
  • Html.Label()
  • Html.Hidden()
  • Html.ActionLink()
  • Html.Checkbox()
  • Html.DropDownList()

Just for information, there is also a strongly-typed version of almost each HTML helper

  • Html.TextBoxFor()
  • Html.LabelFor()
  • Html.HiddenFor()
  • Html.ActionLinkFor()
  • Html.CheckboxFor()
  • Html.DropDownListFor()

let’s take the example of Html.TextBox() and Html.Label() and see how they will be rendered in the browser. This is the code we have written in our View



Now let’s use the F12 developer tools of Google chrome to inspect our result HTML


As you can see each HTML Helper will generate a simple HTML string that will be inserted in our HTML page

Create a custom HTML Helper

Now, let’s suppose that you’re building a web application that uses Bootstrap labels extensively.
This is a the list of all Bootstrap labels


<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Now, we have to create an extension method for @Html Helper.
To create an HTML Helper you have to follow these rules

  • The class where you’re going to define your HTML helper must be static
  • Like you guessed, the function also must be static
  • The function must return an object of type IHtmlString( or MvcHtmlString

This is a complete example of our custom HTML Helper

    public enum LabelType

    public static class Helper
        public static IHtmlString BootStrapLabel(this HtmlHelper helper, string text, LabelType type)
            var builder = new TagBuilder("span");
            switch (type)
                case LabelType.Primary:
                    builder.MergeAttribute("class","label label-primary");
                case LabelType.Success:
                    builder.MergeAttribute("class", "label label-success");
                case LabelType.Info:
                    builder.MergeAttribute("class", "label label-info");
                case LabelType.Danger:
                    builder.MergeAttribute("class", "label label-danger");
                case LabelType.Warning:
                    builder.MergeAttribute("class", "label label-warning");
                    builder.MergeAttribute("class", "label label-default");
            builder.InnerHtml = text;
            return MvcHtmlString.Create(builder.ToString(TagRenderMode.Normal));

After building your project, you’ll see that your custom HTML helper will available from your *.cshtml views


and you can use it like you any default built-in HTML Helper



As you can see, creating a custom HTML Helper is very easy in the recent version ASP.Net MVC and that’s why I really suggest everybody to create their own HTML helpers because they’re reusable and will save you a lot of time.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s