Post
Ask Question

Creating Custom HTML Helpers in MVC

In this post I am going to demonstrate various ways of creating a custom HTML helper. I am going to create HTML helpers using below two classes: 
 
1. StringBuilder class
2. TagBuilder class
 
Let’s first create a default MVC application. I am using Visual Studio 2015 Update 3 with ASP.Net Core 1.0 installed. So let’s not get confused with the templates shown in the screenshot. Click on File -> New Project -> Web -> ASP.NET Web Application (.Net Framework). Provide a name to the solution and click OK.
 
Select the MVC template from the different templates shown in the pop up window and click OK which will load a default MVC application with some Controllers and Views.
 
 
 
Right click on the project MVCHtmlHelpers and click Add -> New Folder and name it as Components. Inside the components folder add a class named HtmlExtensionsImage as shown in the below screenshot.
 
 
 
Now let’s proceed to create HTML helpers along with the advantages and disadvantages of each of the class. In this demo we are going to create a custom HTML helper for Image tag.
 
1. StringBuilder class
 
Steps: 
  1. Build a static class
  2. Add static method to return an MvcHtmlString
  3. Use StringBuilder class to build HTML
  4. Return the HTML as an MvcHtmlString
HtmlExtensionsImage.cs
  1. using System.Text;  
  2. using System.Web.Mvc;  
  3. namespace MVCHtmlHelpers  
  4. {  
  5. public static class HtmlExtensionsImage  
  6. {  
  7. public static MvcHtmlString Image(this HtmlHelper htmlHelper,  
  8. string src,  
  9. string altText)  
  10. {  
  11. StringBuilder sb = new StringBuilder();  
  12. sb.AppendFormat("<img src='{0}' alt='{1}' />", src, altText);  
  13. return MvcHtmlString.Create(sb.ToString());  
  14. }  
  15. }  
  16. }  
About.cshtml 
  1. @{  
  2. ViewBag.Title = "About";  
  3. }  
  4. <h2>@ViewBag.Title.</h2>  
  5. <h3>@ViewBag.Message</h3>  
  6. <p>Use this area to provide additional information.</p>  
  7. @Html.Image("/Images/hello_world.gif","Hello World")  
Disadvantages
  • We have to build everything our own.
  • It may introduce run-time errors like:
    • Forget to close a tag
    • Potential mismatch quotes
  • No help for building HTML tags
2. TagBuilder class
 
It has some advantages like:
  • TagBuilder is designed specifically to create HTML tags.
  • It automatically adds open and closing elements.
  • Adds attributes to elements.
  • Adds multiple css classes in correct format.
  • Methods to generate valid ‘name’ and ‘id’ attributes.
Let’s update the below code and run the application. It still works the same way.
 
HtmlExtensionsImage.cs 
  1. using System.Web.Mvc;  
  2. namespace MVCHtmlHelpers  
  3. {  
  4. public static class HtmlExtensionsImage  
  5. {  
  6. public static MvcHtmlString Image(this HtmlHelper htmlHelper,  
  7. string src,  
  8. string altText,  
  9. string cssClass)  
  10. {  
  11. TagBuilder tb = new TagBuilder("img");  
  12. tb.MergeAttribute("src", src);  
  13. tb.MergeAttribute("alt", altText);  
  14. if (!string.IsNullOrWhiteSpace(cssClass))  
  15. {  
  16. tb.AddCssClass(cssClass);  
  17. }  
  18. return MvcHtmlString.Create(tb.ToString(TagRenderMode.SelfClosing));  
  19. }  
  20. }  
  21. }  
About.cshtml 
  1. @{  
  2. ViewBag.Title = "About";  
  3. }  
  4. <h2>@ViewBag.Title.</h2>  
  5. <h3>@ViewBag.Message</h3>  
  6. <p>Use this area to provide additional information.</p>  
  7. @Html.Image("/Images/hello_world.gif","Hello World","img-responsive img-rounded")  
Hope you enjoyed this small trick for creating a custom HTML helper. Happy coding :)