Using HTML Helpers

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:

  1. Inline HTML Helpers: These are created by the @helper tag of Razor Syntax. These Helpers can be reused only on the same view.

  2. 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.

  3. 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

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

  • In the following figure as you can see the default MVC will be selected, select MVC and then click “OK” button.

    select MVC

  • 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

  • Select the MVC 5 Controller - Empty.

  • Click on to the “Add” button to add a Controller.

    MVC 5 Controller

  • 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

  • In the “MyController”, right click near return view(); to add a view.

    Create MyController

  • 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

  • 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

  • This is the output of Inline HTML Helpers:

    Inline HTML Helpers

  • 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

    login

    Dropdown list

    run program

  • 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

  • Select the class name and give the name of this class “UserModel”.

  • Click on to the “Add” button.

    UserModel

  • In the Model Class, we have to create two properties, EmployeeName and Password.

    Model Class

    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

  • Select the MVC 5 Controller - Empty.

  • Click on “Add” button to add a Controller.

    Select the MVC 5 Controller

  • So give the Controller name “SignInController”.

  • Click on “Add” button.

    SignInController

  • Here we need to create a particular view, right click near return view(); and click “Add View”.

    Create a particular view

  • The View name by default is Index and Template name by default is Empty.

  • Click on Add button.

    View name by default

    Click on Add button

  • 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

    output

  • Now I’m going to create Templated HTML Helpers-

  • In MyController.cs, right click near return view(); to add a view.

    My Cotroller.cs

  • The View Name is by default “Temp” and Template Name is by default Empty.

  • Click on to the “Add” button.

    Template Name

    Temp

  • Change the Controller and action name according to the View and Controller name in the RouteConfig.cs file.

    RouteConfig.cs file

    run

  • 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

  • Select the MVC 5 Controller - Empty.

  • Click on “Add” button to add a Controller.

    add a Controller

  • So give the Controller name “CustomController”.

  • Click on “Add” button.

    CustomController

  • 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

  • Select the Class and give the “CustomClass” name of the class.

  • Click on to the “Add” button.

    Class

    CustomClass

  • In the “CustomController.cs”, we need to add a View, so right click near view and click on “Add View”.

    Add View

  • Click on the “Add” button.

    Add index

  • In the view page take a button and a Label. 

    index

  • In the RouteConfig.cs, change the name of Controller and action.

    RouteConfig.cs

  • Run the project by pressing F5.

  • The final output is here.

    finally output

Thanks for reading this article and stay connected with my articles.

Read more articles on  ASP.NET MVC 5:
 
 
Author
Nitin Pandit
12 52.9k 31.4m