Friday, July 26, 2013

ASP.NET MVC Custom HTML Helpers (C#)

In this article we will understand the different ways of creating custom helper method in ASP.NET MVC4 application. Though we have built-in html helpers like Html.ActionLink(), Html.TextBox() and many more, some times we may need to have custom helper methods for example Image or a block of html controls which is commonly used across the application like Address fields.


Custom HTML Helpers make it easier to generate view content. We can create custom helpers in three ways:

1. with Static Methods
2. with Extension Methods
3. with @helper in the razor view.

Let's understand how to implement the same.

1. Static Methods:


In this approach we will create a static method and use that method in the view, here its is ImageStatic method which will return HtmlString.


CustomHelper.cs:
namespace HelperApplication.Helpers
{
    public static class CustomHelpers
    {
        //Static method
        public static IHtmlString ImageStatic(string src, string alt = "Image", int width = 50, int height = 50)
        {
            var value = String.Format("<img src='{0}' alt='{1}' width='{2}' height='{3}'/>", src, alt, width, height);
            return new HtmlString(value);
        }
        //Extension method
        public static IHtmlString ImageExtension(this HtmlHelper helper, string src, string alt = "image", int width = 50, int height = 50)
        {
            var value = String.Format("<img src='{0}' alt='{1}' width='{2}' height='{3}'/>", src, alt, width, height);
            return new HtmlString(value);
        }
    }
}

src- image source (path)
alt- alternative text if image could not be loaded, and it is assigned a default value "Image". When no values is passed to this parameter it will take the default value "Image".
width & height- width and height of the image these parameters are also assigned a default value 50

Using the ImageStatic html helper method in view..
Index.cshtml:

@using HelperApplication.Helpers
<div>
     <span>ImageTag with default values for alt, width, height</span>     
     @CustomHelpers.ImageTag("../../images/image.png")
</div>
<div>
     <span>ImageTag with width=100 and height=100</span>     
     @CustomHelpers.ImageStatic("../../images/image.png","Image With alt",100,100)
</div>

The above code will render the images one with default dimensions(i.e width and height) and another one with given dimension (i.e width=100 and height=100)

2. Extension Methods:


This is another approach to create custom html helpers, here we will extend the functionality of the HtmlHelper class.

In the CustomHelper.cs class we have created another method called ImageExtension. We can see this HtmlHelper helper parameter, this implies that ImageExtension method extends functionality of HtmlHelper class. Thus, we can use this method just like other helper methods (Html.ActionLink() similarly Html.ImageExtension).

Note: To make our method accessible like other built-in helper methods we have to add namespace to webconfig file <add namespace="HelperApplication.Helpers"/> in ~/Views/web.config not in ~/web.config

Index.cshtml:
<div>
    <span>ImageTag with default values for alt, width, height</span>
     @Html.ImageExtension("../../images/image.png")
</div>
<div>
     <span>ImageTag with width=100 and height=100</span>
     @Html.ImageExtension("../../images/image.png","Image With alt",100,100)
</div>

3. @helper :
Post a Comment