MVC || Views || Generating HTML Helpers

Monday, April 27, 2009

An HTML Helper is just a method that returns a string. The string can represent any type of content that you want.

The ASP.NET MVC framework includes the following set of standard HTML Helpers (this is not a complete list):

However, the HTML Helper methods can be generated based on the need as well.

There are two approaches to achieve the same.

Just create an extension method as below.

namespace MvcApplication1.Helpers

     public static class LabelExtensions

          public static string Label(this HtmlHelper helper, string target, string text)

               return String.Format("<label for='{0}'>{1}</label>", target, text);

               //Output -  <label for="firstName">First Name:</label>

<body>

     <div>

          <% using (Html.BeginForm())

          { %>

               <%= Html.Label("firstName", "First Name:") %>

               <%= Html.TextBox("firstName")%>

          <% } %>

     </div>

</body>

It enables you to easily build HTML tags.

The TagBuilder class is contained in the System.Web.Mvc namespace. It has five methods:

AddCssClass() – Enables you to add a new class="" attribute to a tag.
GenerateId() – Enables you to add an id attribute to a tag. This method automatically replaces periods in the id (by default, periods are replaced by underscores)
MergeAttribute() – Enables you to add attributes to a tag. There are multiple overloads of this method.
SetInnerText() – Enables you to set the inner text of the tag. The inner text is HTML encode automatically.
ToString() – Enables you to render the tag. You can specify whether you want to create a normal tag, a start tag, an end tag, or a self-closing tag.

The TagBuilder class has four important properties:

Attributes – Represents all of the attributes of the tag.
IdAttributeDotReplacement – Represents the character used by the GenerateId() method to replace periods (the default is an underscore).
InnerHTML – Represents the inner contents of the tag. Assigning a string to this property does not HTML encode the string.
TagName – Represents the name of the tag.

namespace MvcApplication1.Helpers

    public static class ImageHelper

        public static string Image(this HtmlHelper helper, string id, string url, string alternateText)

            return Image(helper, id, url, alternateText, null);

        public static string Image(this HtmlHelper helper, string id, string url, string alternateText, object htmlAttributes)

            // Create tag builder

            var builder = new TagBuilder("img");

            // Create valid id

            builder.GenerateId(id);

            // Add attributes

            builder.MergeAttribute("src", url);

            builder.MergeAttribute("alt", alternateText);

            builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

            // Render tag

            return builder.ToString(TagRenderMode.SelfClosing);

<%@ Import Namespace="MvcApplication1.Helpers" %>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">

    <!-- Calling helper without HTML attributes -->

    <%= Html.Image("img1", ResolveUrl("~/Content/XBox.jpg"), "XBox Console") %>

    <!-- Calling helper with HTML attributes -->

    <%= Html.Image("img1", ResolveUrl("~/Content/XBox.jpg"), "XBox Console", new {border="4px"})%>

</asp:Content>

Hope this helps.

Thanks & Regards,

Arun Manglick || Senior Tech Lead

Arun Manglick - Technical View