Monday, April 27, 2009

MVC || Views || Generating HTML Helpers

Generating HTML Helpers


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):


  • Html.ActionLink()
  • Html.BeginForm()
  • Html.CheckBox()
  • Html.DropDownList()
  • Html.EndForm()
  • Html.Hidden()
  • Html.ListBox()
  • Html.Password()
  • Html.RadioButton()
  • Html.TextArea()
  • Html.TextBox()


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

There are two approaches to achieve the same.


  1. Simple approach
  2. Using the 'TagBuilder' Class



Simple - Generating HTML Helpers


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>
          <% using (Html.BeginForm())
          { %>
               <%= Html.Label("firstName", "First Name:") %> 
               <%= Html.TextBox("firstName")%>   
          <% } %>



Using TagBuilder Class - Generating HTML Helpers


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
            // 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"})%>


Hope this helps.


Thanks & Regards,

Arun Manglick || Senior Tech Lead


No comments:

Post a Comment