What is HTML Helper Class

HTML helpers are the way by which we can render html on the view page of MVC. These Helpers are simple functions that let the developer specify the type of HTML needed on the view.
The following built-in Helpers are available.
  1. Html.ActionLink
  2. Html.BeginForm
  3. Html.CheckBox
  4. Html.DropDownList
  5. Html.EndForm
  6. Html.Hidden
  7. Html.ListBox
  8. Html.Password
  9. Html.RadioButton
  10. Html.TextArea
  11. Html.TextBox
There are some Html Helper also available for strongly typed View.
  1. Html.CheckBoxFor
  2. Html.DropDownListFor
  3. Html.HiddenFor
  4. Html.ListBoxFor
  5. Html.PasswordFor
  6. Html.RadioButtonFor
  7. Html.TextAreaFor
  8. Html.TextBoxFor
The above list of HTML Helper is for strongly typed view. Inside these helper methods we pass lambda expression as a method argument.
But if we want to create our own HTML Helper Method then there are three ways to create your custom Html Helpers.
  1. Using Static Method
  2. Using Extension Method
  3. Using the @helper
Custom Helper Using Static Method
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  6. namespace CustomHelper.CustomHelpers
  7. {
  8. /// <summary>
  9. /// This Class Helpes
  10. /// </summary>
  11. public static class HelperByStaticMethod
  12. {
  13. /// <summary>
  14. /// This is a Helper Method For Image Element
  15. /// </summary>
  16. /// <param name="Source">Provide Source</param>
  17. /// <param name="Alt">alt Attribute For That Image</param>
  18. /// <param name="Title">Title For the Image</param>
  19. /// <param name="Height">Height Attribute (By Default Height will be 128)</param>
  20. /// <param name="Width">Width Attribute (By Default Width will be 128)</param>
  21. /// <returns></returns>
  22. public static string img(string Source, string Alt, string Title, int Height=128, int Width=128)
  23. {
  24. return String.Format("<img src='{0}' alt='{1}' title='{2}' height='{3}' width='{4}'/>", Source, Alt, Title, Height, Width);
  25. }
  26. }
  27. }
And inside View we will use like the following:
  1. @using CustomHelper.CustomHelpers
  2. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta name="viewport" content="width=device-width" />
  7. <title>Index</title>
  8. </head>
  9. <body>
  10. <div>
  11. @Html.Raw(HelperByStaticMethod.img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg"))
  12. @Html.Raw(HelperByStaticMethod.img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167))
  13. @Html.Raw(HelperByStaticMethod.img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250))
  14. @Html.Raw(HelperByStaticMethod.img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200))
  15. </div>
  16. </body>
  17. </html>
Output
In the above code I have created a static class and method taking Image Source, Alt, Title, Height and Width and returning simple string. But one problem is that I am explicitly converting these into html format using Html.Raw. If I don't convert this string into html format and keep my code as in the following,
  1. @HelperByStaticMethod.img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg")
  2. @HelperByStaticMethod.img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167)
  3. @HelperByStaticMethod.img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250)
  4. @HelperByStaticMethod.img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200)
then our output will be the following.
Custom Helper Using Extension Method
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  7. namespace CustomHelper.CustomHelpers
  8. {
  9. public static class HelperByExt
  10. {
  11. public static MvcHtmlString img(this HtmlHelper htmlHelper,string Source, string alt, string title, int Height=128, int Width=128)
  12. {
  13. var imgTag = new TagBuilder("image");
  14. imgTag.MergeAttribute("src", Source);
  15. imgTag.MergeAttribute("alt", alt);
  16. imgTag.MergeAttribute("title", title);
  17. imgTag.MergeAttribute("width", Width.ToString());
  18. imgTag.MergeAttribute("height", Height.ToString());
  19. return MvcHtmlString.Create(imgTag.ToString(TagRenderMode.SelfClosing));
  20. }
  21. }
  22. }
In view we will use our Custom Helper class as in the following:

I am writing the following code for our view.
  1. @using CustomHelper.CustomHelpers
  2. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta name="viewport" content="width=device-width" />
  7. <title>Index</title>
  8. </head>
  9. <body>
  10. <div>
  11. @Html.img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg")
  12. @Html.img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167)
  13. @Html.img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250)
  14. @Html.img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200)
  15. </div>
  16. </body>
  17. </html>
Output
Custom Helper Using @helper

This method is specific for only razor view engine. The @helper syntax within Razor enables you to easily create re-usable helper methods that can encapsulate output functionality within your view templates. They enable better code reuse, and can also facilitate more readable code. Let’s look at a super-simple scenario of how the @helper syntax can be used.

Because as I said @helper is specific for only razor view engine so we can use it only on view or cshtml file.

How to use @helper

I am writing the following code for our view.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width" />
  5. <title>Index</title>
  6. </head>
  7. <body>
  8. <div>
  9. @helper img(string Source, string alt, string title,
  10. int Height = 128, int Width = 128)
  11. {
  12. <img src="@Source" alt="@alt" title="@title" height="@Height" width="@Width"/>
  13. }
  14. @img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg")
  15. @img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167)
  16. @img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250)
  17. @img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200)
  18. </div>
  19. </body>
  20. </html>
Output

Finally, I am combining all view's code, which I have created for all type of ways to create HTML Helper that is as follows,
  1. @using CustomHelper.CustomHelpers
  2. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta name="viewport" content="width=device-width" />
  7. <title>Index</title>
  8. </head>
  9. <body>
  10. <div>
  12. <h1>Helper By Static Method</h1>
  13. @Html.Raw(HelperByStaticMethod.img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg"))
  14. @Html.Raw(HelperByStaticMethod.img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167))
  15. @Html.Raw(HelperByStaticMethod.img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250))
  16. @Html.Raw(HelperByStaticMethod.img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200))
  17. <hr />
  19. <h1>Helper By Extension Method</h1>
  20. @Html.img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg")
  21. @Html.img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167)
  22. @Html.img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250)
  23. @Html.img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200)
  24. <hr />
  27. <h1>Helper By @@helper </h1>
  29. @helper img(string Source, string alt, string title,
  30. int Height = 128, int Width = 128)
  31. {
  32. <img src="@Source" alt="@alt" title="@title" height="@Height" width="@Width"/>
  33. }
  34. @img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg")
  35. @img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167)
  36. @img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250)
  37. @img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200)
  38. </div>
  39. </body>
  40. </html>
Output

Read more articles on ASP.NET: