Create Custom MVC 5 HTML Helper

An HTML Helper is a method that returns a string. The string can represent any type of content like standard HTML tags like HTML <input> and <img> tags. You also can use HTML Helpers to render more complex content such as a tab strip or an HTML table. We can either use standard\built-in helpers like Html.CheckBox(), Html.TextBox() or create our own helper.

Let’s create a new Visual Studio 2015 MVC 5 application and name it as HTMLHelperDemo,





We will a build a helper using C# extensions method on HtmlHelper class using TagBuilder class, which is used to create HTML elements. For more details on TagBuilder, refer here. We are using TagBuilder instead of StringBuilder, which avoids run-time errors like not closing a tag or invalid quotes within emitted HTML.

Create a folder, name it as Helpers than add a class HTMLButton.cs with below piece of code:



Here, I added CustomButton extension method on HtmlHelper class which will accept text, name and cssclass name for a button. Then, used TagBuilder to build HTML by using MergeAttribute for adding an attribute, AddCssClass method to add css class, GenerateId method to generate ID based on Name property and CreateSanitizedId method to set name attribute by removing spaces and special characters.

Let’s build the solution and use our helper in Home/Index.cshtml view as shown below:



Run the application and view source for rendered HTML:




Here, our helper added name, id (replaced space with _), css Class and Text for the button. By following above steps, we can create our own custom HTML helpers to reduce and centralize markup in our MVC views.

I attached source code and ending the things here on HTML helpers, I hope this article will be helpful for all.

Read more articles on MVC:

• Display Multiple Tables Data in Single View From DataBase in ASP.NET MVC Using Dapper
• ASP.NET MVC 5: REST Web API Routing With Different Names