Home » How to » How to Create Custom HTML Helpers in Asp.Net?

How toTechnology

How to Create Custom HTML Helpers in Asp.Net?

webhostingecommerce

October 6, 2021

69 Views 0

SaveSavedRemoved 0

An HTML wizard is a method that is used to make the HTML content specified in the view. It can be applied as a method of extension.

If you are familiar with ASP.NET webforms, you may be familiar with the idea of web controls. If you use these controls in the web form on browsers, they will be converted to their equivalent HTML controls like TextBox will be and the label will be span tag.

The methods of HTML helpers are the same as the web controls it enables to make HTML appropriate in view.

HTML Helper is only a method that returns HTML content within a view. Using HTML helpers, you can seamlessly render standard HTML tags such as HTML input, image tags, buttons, etc. To get a glimpse of the difference between Asp.Net and Asp.Net MVC is that Asp.Net has server sider controls while Asp.Net MVC makes use of Html helpers to display Html in a browser.

Here is a list of HTML helper methods that are present in ASP.NET MVC:

• @Html.BeginForm
• @Html.EndForm
• @Html.TextBox
• @Html.TextArea
• @Html.Password
• @Html.Hidden
• @Html.CheckBox
• @Html.RadioButton
• @Html.DropDownList
• @Html.ListBox

HTML Custom Helpers

In the case of any specific use case which seems difficult to develop with default HTML helpers, then custom helpers can be created to fulfill the purpose. Having magnificent features in ASP.NET MVC, it provides a custom wizard functionality; you can use it to create an HTML wizard depending on your needs. Below are three ways you can define a custom HTML wizard:

• Using static methods
• Using extension methods
• Using @helper

Building our own helper has the advantage that the page is cleaner and easier to read. We can write a test for the individual for that particular HTML helper.

HTML helper is a method that gives back an HTML string. Afterward, this string is displayed. MVC provides numerous HTML assistance methods. It also allows the creation of your own HTML support methods. Once you create your help method, it can be reused multiple times.

Add an expansion method for the HtmlHelper class.

A static method is required in the static class.

• The first argument must be the type for which we add the extension method. For us, that’s HtmlHelper Class.
• The return type must be IHtmlString because those strings are excluded from the HTML encoding.
• To create an HTML beacon, we need to use the TagBuilder class.
• Include the helper’s namespace in view or web. config

If you want to create HTML Helpers that work as standard HTML Helpers included in the ASP.NET MVC framework, you must create extension methods. Extension methods allow you to append new methods to an existing class. When creating an HTML Helper method, you add new methods within the HtmlHelper class represented by the Html property of a view.

The Listing 3 class adds an expansion method to the HtmlHelper class named Label(). There are a few things you might want to note about this course. First and foremost, note that the class is a static class. An extension method with a static class is required.

Secondly, notice that the first parameter of the Label() method is preceded by the keywords this. The first parameter in an extension method specifies the class to which the extension method applies.

We can create our own HTML wizard by writing the add-on method for the HTML helper class. These helpers are available in the Helper property of class and you can use them as the built-in helpers.

Example :

Add a new class to the MVC application and give it an important name. In this example, we create a new folder “CustomHelper” in the application, then we add the class “CustomHelpers” in this folder.

As we will create an expansion method, make this class static. Write this code to the class:

1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Web;
5. using System.Web.Mvc;
7. namespace CustomeHelper.CustomHelper
8. {
9. public static class CustomHelpers
10. {
11. public static IHtmlString File(this HtmlHelper helper, string id)
12. {
13. TagBuilder tb = new TagBuilder(“input”);
14. tb.Attributes.Add(“type”, “file”);
15. tb.Attributes.Add(“id”, id);
16. return new MvcHtmlString(tb.ToString());
17. }
18. }
19. }

In the above code, one creates a static method file for the HtmlHelper class. In this method, we build HTML tags using the TagBulider class. In this code, we simply use two attributes that you can add more HTML attributes according to your needs.

Now we use this HTML helper method on view in the same way as the built-in helpers. Since this class resides within the “CustomHelper” namespace, we should add this namespace to the view below.

1. @using CustomeHelper.CustomHelper
2. @ {
3. ViewBag.Title = “Index”;
4. }
6. < h2 > Index < /h2>

Using the Static Method

In this method, we do not create an extender method for the HtmlHelper class. We’re creating a new class like CustomHelper. Type the following code into class:

1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Web;
5. using System.Web.Mvc;
7. namespace CustomeHelper.CustomHelper
8. {
9. public class CustomHelper
10. {
11. public static IHtmlString File(string id)
12. {
13. TagBuilder tb = new TagBuilder(“input”);
14. tb.Attributes.Add(“type”, “file”);
15. tb.Attributes.Add(“id”, id);
16. return new MvcHtmlString(tb.ToString());
17. }
18. }
19. }

Once you create this, you are in a position to use this view help method. Because we do not create an extension method for the HtmlHelper class in this method, we do not use it like inbuilt helpers.

HTML helpers are methods for returning HTML content to the view. People from the background of ASP.NET web forms are accustomed to putting ASP.NET server control on the toolbox page. In ASP.NET MVC, there are no server commands. In MVC, only HTML controls are available. These HTML Helpers will help you to render HTML into your browsers. HTML helpers are similar to the Asp.Net Webform server controls, but Helper does not have ViewState.

Conclusion

This article is all about creating personalized HTML helpers. By creating a customized HTML wizard, we can eliminate repetitive HTML code fragments from the application. We hope you got a basic understanding of how to use the custom HTML wizard when reading this article. Custom HTML wizards are powerful tools in MVC, used to encapsulate reusable HTML snippets.