Creating a custom HTML Helper in ASP.Net MVC

asplogo-square
Asp.net 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

2014-07-01_22-40-09

 

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

2014-07-01_22-45-06

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

2014-07-01_22-58-59

<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
    {
        Primary,
        Info,
        Success,
        Warning,
        Danger,
        Default
    }

    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");
                    break;
                case LabelType.Success:
                    builder.MergeAttribute("class", "label label-success");
                    break;
                case LabelType.Info:
                    builder.MergeAttribute("class", "label label-info");
                    break;
                case LabelType.Danger:
                    builder.MergeAttribute("class", "label label-danger");
                    break;
                case LabelType.Warning:
                    builder.MergeAttribute("class", "label label-warning");
                    break;
                default:
                    builder.MergeAttribute("class", "label label-default");
                    break;
            }
            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

2014-07-03_00-06-43

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

2014-07-03_00-11-50

Summary

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.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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