HTML Helpers are used to create HTML markup to create HTML Controls. HTML Helper is just a method that returns an HTML string. There are three kinds of HTML Helpers:
- Inline HTML Helpers: These are created by the @helper tag of Razor Syntax. These Helpers can be reused only on the same view.
- Built-In HTML Helpers: These HTML Helpers are extension methods on the HtmlHelper class. These are categorized in to three parts:
- Standard HTML Helpers: These helpers are used to create the most common types of HTML elements.
- Strongly Typed HTML Helpers: The HTML is generated through Model Class Properties. These helpers work on lambda expression.
- Templated HTML Helpers: These helpers defines what HTML elements are required to render based on properties of our Model class.
- Custom HTML Helpers: You can also create your own custom helper methods by creating an extension method on the HtmlHelper class or by creating static methods within a utility class.
Step 1: Open the Visual Studio and select the “File” menu, New, then Project.
![Visual Studio](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/Visual Studio.jpg)
In the following figure select “Templates”, Visual C#, ASP.NET Web Application, and here I gave the name of project as “HTMLHelpersWithMVC.”
- You can give the project name as you wish.
- And then click on “OK” button.
![give the project name](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/give the project name.jpg)
- In the following figure as you can see the default MVC will be selected, select MVC and then click “OK” button.
![select MVC](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/select MVC.jpg)
- First, I want to create a Controller, so right click on "Controllers" folder and click on “Add”, then click on to Controller, to add a Controller.
![add Controller](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/add Controller.jpg)
- Select the MVC 5 Controller - Empty.
- Click on to the “Add” button to add a Controller.
![MVC 5 Controller](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/MVC 5 Controller.jpg)
- Here I gave the “MyController” name to my Controller.
- Click on to the “Add” button.
- You can give the Controller name as you wish.
![give the Controller name](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/give the Controller name.jpg)
- In the “MyController”, right click near return view(); to add a view.
![Create MyController](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/Create MyController.jpg)
- In the following figure, the view name is by default Index, and Templates name is by default Empty (without model).
- Click on “Add” button to add a view.
![default is Index](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/default is Index.jpg)
- Here is the first of all we have taken in the Inline HTML Helpers example, where we can show the items in Inline format.
![Inline HTML Helpers example](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/Inline HTML Helpers example.jpg)
- This is the output of Inline HTML Helpers:
![Inline HTML Helpers](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/Inline HTML Helpers.jpg)
- Now I’m going to create Built-In Type HTML Helpers:
- Firstly, I’m using the Standard HTML Helpers like HTML text boxes, Password, Dropdown list, etc.
![HTML Helpers](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/HTML Helpers.jpg)
![login](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/login.jpg)
![Dropdown list](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/Dropdown list.jpg)
![run program](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/run program.jpg)
- Now I’m going to create Strongly Typed HTML Helpers-
- For this I need to create a Model using a Model folder, right click on to Models folder, click on “Add” button and add a class.
![create a Model](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/create a Model.jpg)
- Select the class name and give the name of this class “UserModel”.
- Click on to the “Add” button.
![UserModel](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/UserModel.jpg)
- In the Model Class, we have to create two properties, EmployeeName and Password.
![Model Class](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/Model Class.jpg)
To demonstrate, I want to add a new Controller, so right click on the Controllers folder and click on Add. Click on Controller to add a new Controller.
![click on Controller](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/click on Controller.jpg)
- Select the MVC 5 Controller - Empty.
- Click on “Add” button to add a Controller.
![Select the MVC 5 Controller](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/Select the MVC 5 Controller.jpg)
- So give the Controller name “SignInController”.
- Click on “Add” button.
![SignInController](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/SignInController.jpg)
- Here we need to create a particular view, right click near return view(); and click “Add View”.
![Create a particular view](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/Create a particular view.jpg)
- The View name by default is Index and Template name by default is Empty.
- Click on Add button.
![View name by default](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/View name by default.jpg)
![Click on Add button](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/Click on Add button.jpg)
- In the RouteConfig.cs, change the Controller name, write the “SignIn”.
- Now run the Project, press F5 key to run the project.
![run the Project](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/run the Project.jpg)
![output](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/output.jpg)
- Now I’m going to create Templated HTML Helpers-
- In MyController.cs, right click near return view(); to add a view.
![My Cotroller.cs](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/My Cotroller.cs.jpg)
- The View Name is by default “Temp” and Template Name is by default Empty.
- Click on to the “Add” button.
![Template Name](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/Template Name.jpg)
![Temp](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/Temp.jpg)
- Change the Controller and action name according to the View and Controller name in the RouteConfig.cs file.
![RouteConfig.cs file](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/RouteConfig.cs file.jpg)
![run](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/run.jpg)
- Now I’m going to create Custom HTML Helpers:
- First of all we need to create a Controller, so right click on Controllers folder, select “Add” and then Controller to add a Controller.
![select Controller](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/select Controller.jpg)
- Select the MVC 5 Controller - Empty.
- Click on “Add” button to add a Controller.
![add a Controller](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/add a Controller.jpg)
- So give the Controller name “CustomController”.
- Click on “Add” button.
![CustomController](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/CustomController.jpg)
- Now we need to create a class.
- Right click on to the Project and choose “Add” and then click on “class” to add a Class.
![add a Class](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/add a Class.jpg)
- Select the Class and give the “CustomClass” name of the class.
- Click on to the “Add” button.
![Class](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/Class.jpg)
![CustomClass](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/CustomClass.jpg)
- In the “CustomController.cs”, we need to add a View, so right click near view and click on “Add View”.
![Add View](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/Add View.jpg)
- Click on the “Add” button.
![Add index](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/Add index.jpg)
- In the view page take a button and a Label.
![index](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/index.jpg)
- In the RouteConfig.cs, change the name of Controller and action.
![RouteConfig.cs](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/RouteConfig.cs.jpg)
- Run the project by pressing F5.
- The final output is here.
![finally output](https://www.c-sharpcorner.com/UploadFile/Tutorial/admin/html-helpers-in-Asp-Net-mvc-5-0-part-ten15032017100207/Images/finally output.jpg)
Thanks for reading this article and stay connected with my articles.
Read more articles on ASP.NET MVC 5: