HTML Helpers In ASP.NET MVC 5

 

In this article, you will learn the following points about HTML Helpers in MVC 5.

• What is HTML Helper in ASP.NET MVC 5?
• Type of HTML Helpers?
• What is Inline HTML Helper in MVC 5?
• How to use Inline HTML helpers on View?.
• Example of Inline HTML helpers?
• How to reuse same Inline Html Helper method in different Div?
• Interview Questions

Following are my previous articles on ASP.NET MVC 5.

• Razor View Engine in ASP.NET MVC 5
• Model in ASP.NET MVC 5
• Action Method in MVC 5 with example

What is HTML Helper in ASP.NET MVC 5?

• HTML Helpers are methods that return a string.
• Helper class can create HTML controls programmatically. HTML Helpers are used in View to render HTML content.
• It is not mandatory to use HTML Helper classes for building an ASP.NET MVC application.
• We can build an ASP.NET MVC application without using them, but HTML Helpers helps in the rapid development of a view.
• HTML Helpers are more lightweight as compared to ASP.NET Web Form controls as they do not use ViewState and do not have event models.
• MVC has built-in Helpers methods
• We can create custom HTML helpers.

Type of HTML Helpers?

 

HTML Helpers are categorized into three types,

1. Inline HTML helpers
2. Built-in HTML helpers
1. Standard HTML Helpers
2. Strongly Typed HTML helpers
3. Templated HTML helpers
3. Custom HTML helpers

In this article, we will understand about Inline HTML Helper in MVC 5. We will discuss the other types in the next subsequent article of this series.

 

What is Inline HTML Helper in MVC 5?

• Inline HTML Helper is used to create a reusable Helper method by using the Razor @helper tag.
• Inline helpers can be reused only on the same view.
• We can not use Inline helper to the different view Pages.
• We can create our own Inline helper method based on our requirements.

Advantages of using Inline HTML Helper in MVC 5

• It is reusable on the same view.
• It reduces the code repetition
• It is simple to create and easy to use.
• It is easy to customization the method based on the requirement.

Syntax of Inline Html Helper

 

@helper HelperName(Parameters list..)

{

// code.....

}

 

Example of Inline HTML helpers

 

To understand the Inline HTML Helper, we need to create an application in Visual Studio 2015/2017/above.

 

In previous tutorials, we have understood about create the project in ASP.NET MVC 5 using Visual Studio, how to add a controller and Add View in MVC 5, and steps to create an application for ASP.NET MVC 5 using Visual Studio.

 

After creating the application, we need to create one Index view and add the following code.

 

Example 1

 

We can create inline HTML Helper method having integer parameter.

@helper AddHelper(int a, int b)
{
    <label>Addition of two No = @(a + b)</label>
}

This is how we use inline HTML Helper method in View.

<div style="background-color:azure;">
    <label> @AddHelper(100, 200)</label>
</div>

Output 1

 

 

Example 2

 

We can create inline HTML Helper method having string parameter.

@helper PrintHelper(string message)
{
    <label>@message</label>
}

This is how to use inline HTML Helper method in View.

<div style="background-color:azure;">
    <label> @PrintHelper("Welcome to Learning ASP.NET MVC 5 Tutorials Step by Step.")</label>
</div>

Output 2

 

Example 3

 

We can create “ListHelper()” inline HTML Helper method having list as a parameter.

@helper ListHelper(string[] strList)
{
    <ol>
        @foreach (var item in strList)
        {
            <li>@item</li>
        }
    </ol>
}

How to use “ListHelper()” inline Html Helper method in View.

 

Declare one string array as follow.

@{
    string[] strBooks = new string[] { "C#.NET", "ASP.NET MVC", "ASP.NET CORE", "VB.NET", "WEB API" };
}

After declaring string array, use the Inline HTML Helper method in View and pass the string array to the “ListHelper()” method.

 

Print the book list using ListHelper Inline HTML Helper as follow.

<div id="div1" style="background-color:yellow;">
    Book Name List: @ListHelper(strBooks)
</div>

Output 3

 

 

How to reuse the Inline HTML Helper method in the same View

 

We can declare a string array for list of the programming languages as follows. 

@{
    string[] strBooks = new string[] { "C#.NET", "ASP.NET MVC", "ASP.NET CORE", "VB.NET", "WEB API" };
    string[] strLanguages = new string[] { "C#.NET", "VB.NET", "F#.NET", "JAVASCRIPT" };
}

How to reuse the same “ListHelper()” inline HTML Helper method in View.

<div id="div1" style="background-color:yellow;">
    Book Name List: @ListHelper(strBooks)
</div>
<hr />
<div id="div2" style="background-color:azure;">
    Programming Languages: @ListHelper(strLanguages)
</div>

Output 4

 

 

If you see in the above example, you will get an idea of how we have used ListHelper() method in div1 and div2 on the same View page. So, it reduces the code repetition and complicity. We can use the same method multiple times in the same view.

 

Related Articles

• Razor View Engine In MVC 5 example
• Model In MVC 5 with example
• Action Method in MVC 5 with example

Interview Questions & Home Work

 

Interview Questions

• What is HTML Helper in ASP.NET MVC?
• Use of Inline HTML Helpers in ASP.NET MVC 5?

HomeWork

• Create inline HTML helper for list of Students.
• @helper StudentListHelper(string[] str) {// Code...........}

References

• HTML Helpers In MVC 5 with example
• Inline HTML Helpers In MVC 5
• HTML Helpers In MVC 5 (Video)

I hope you understand the concepts of HTML Helpers in ASP.NET MVC 5. If you like this article, then please share this article with your friends that will help other people to increase their knowledge.

 

Thanks for reading.

 

Connect Me(“Shrimant Telgave”)