HTML Helpers In MVC 5

We will learn HTML Helpers in MVC 5 and type of HTML Helpers in MVC 5. Also, we will learn about the Inline HTML helper in ASP.NET MVC 5 with examples. Use of Inline HTML helper in ASP.NET MVC 5.

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

• What are HTML Helpers 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 the same Inline Html Helper method in different Div?
• Html Helpers are C# methods then why did they call them helpers?
• Interview Question & Home Work

Following are the previews 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 learn about Inline Html Helper in MVC 5 and other types we will discuss in the next subsequent article of this series.

What is Inline HTML Helper in MVC 5? 

• Inline Html Helper is used to create 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 and easy to create.
• It is easy to customization the method based on the requirement.

Syntax:

@helper HelperName(Parameters list..)

{

// code.....

}

Example of Inline HTML helpers:

To understand the Inline Html Helper we need to create one application in visual studio 2017/2015/above.

In previous tutorials, we have understood about creating a project in ASP.NET MVC 5 using Visual Studio. How to add a controller and Add View in MVC 5.

Link Step to create an application for ASP.NET MVC 5 using Visual Studio.

 After creating the application we need to create on 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>

}

How to use inline Html Helper method in View.

<div style="background-color:azure;">

    <label> @AddHelper(100,200)</label>

</div>

Output:

Example 2:

We can create "PrintHelper()" inline Html Helper method having string parameter.

@helper PrintHelper(string message)

{

    <label>@message</label>

}

How to use "PrintHelper()" 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 a 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.

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

@{

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

}

Print the book list using ListHelper Inline Html Helper in View as follow.

<div id="div1" style="background-color:yellow;">

    Book Name List: @ListHelper(strBooks)

</div>

Output 3:

Example 4:

How to reuse the Inline Html Helper method in the same view

We can declare one string array for list of a programming language as follow.

@{

    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 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 on the above example you will get an idea about the Inline Html Helper method we have used ListHelper() method in div1 and div2 on the same view page. it reduces the code repetition and complicit. We can use the same helper method multiple times in the same view.

Html Helpers are C# methods then why did they call them helpers?

Because they all generate Html type of element which returns type is “MvcHtmlString” and It is a type of “HtmlHelper” class. All the Html c# extension methods are inside the “HtmlHelper” class. And the people remember them easily.

Example:

 public static MvcHtmlString TextBox(this HtmlHelper htmlHelper, string name); 

Interview Question & Home Work

Interview Question:

• What is HTML Helper in Asp.NET MVC/MVC 5?
• Use of Inline HTML Helpers in Asp.NET MVC/MVC 5?
• Html Helpers are C# methods then why did they call them helpers?

HomeWork:

Create inline HTML helper for list of Students.

@helper StudentListHelper(string[] str) {// Code...........}

Related Articles:

• Razor View Engine in MVC 5
• Razor View Engine In MVC 5 (Video)
• Model In MVC 5 with Example
• Action Method in MVC 5 with Example

References:

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

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

Thanks for reading.

Don't Forget To:   

• Subscribe my YouTube Chanel
• Like the Facebook page.
• Follow on Twitter
• Share with your friends
• Add your valuable comment.

More detail watch follow video on HTML Helpers In ASP.NET MVC 5:

Read More

Razor View Engine In ASP.NET MVC 5

We will learn Razor View Engine in MVC 5 and why view engine is required in MVC 5. Also, we will learn about Razor View Engine syntax in MVC 5 with examples.

In this article, you will learn the following points about Razor View Engine in MVC 5.

• What is a View Engine in ASP.NET MVC?
• Why View Engine is Required in ASP.NET MVC 5?
• What is Razor Engine in MVC 5?.
• What is Razor Syntax in MVC 5?
• Comments in razor syntax in MVC 5
• Escape sequence in Razor syntax
• Interview Question

Following are the previews two articles on ASP.NET MVC 5

• Model In ASP.NET MVC 5
• Layout View in ASP.NET MVC 5

What is a View Engine in ASP.NET MVC 5?

• View Engine is responsible for rendering the view into Html form to the browser. ASP.NET MVC 5 support Razor View(.cshtml).
• View Engine is used to converts html+Programming language to pure Html.

As per the above diagram you can see view can contain C# and Html code. Once the view renders on the browser the C# code written on the view is converted into pure Html format. To converting C# code into pure Html this is the job of ViewEngine. You can cross verify by inspecting browser and verify the C# data on inspected browser you could not found the C# code on the browser.

Why View Engine is Required in ASP.NET MVC 5?

• View engine is responsible for creating Html for view
• It converts html+Programming language to pure Html
• View engine is used to find the corresponding view for the action method.
• View engine is used to find a view from the shared folder.
• View engine is required to write C#/VB code on view
• View Engine is required to implement strongly typed view.

What is Razor Engine In MVC 5?

• Razor Engine is an advanced view engine.
• This is not a new language but it is a new markup syntax.
• The namespace for Razor Engine is System.Web.Razor.
• View file extension is .cshtml or .vbhtml (partial and layout view) based on language.
• Razor syntax is easy to learn and much cleaner than Web Form syntax.
• Razor Engine prevents XSS attacks(Cross-Site Scripting Attacks)
• Razor Engine does not support design mode in Visual Studio means you can not see your view page look and feel.
• Razor Engine support TDD. it does not depend on System.Web.UI.Page class.

What is Razor Syntax in MVC 5?

Two types of Razor syntax:

• Single statement block: It starts with @.
• Multi statement block: 

Multi statement block must be always enclosed in @{ ... }
The semicolon “;” must be used to ending statements
Inline expressions (variables and functions) start with @

Example of Single statement  block:

A single statement block is used to use only a single line of code needs to write on View.

Example: To display current DateTime.

Create Index.cshtml View and add following code. If you new with creating an application in ASP.NET MVC 5 then go with following links.

• Create ASP.NET MVC Application using Visual Studio 2017

@{

    ViewBag.Title = "Index";

}

<hr />

<div>

    <label>Current Date : @DateTime.Now.ToString()</label><br />

    <label>Current Long Date: @DateTime.Now.ToLongDateString()</label><br />

    <label>Addition of Numbers: @(500+250)</label>

</div>

Output:

Inspect browser and search “DateTime.Now.ToString()” on browser we can not found the C# code on the browser.

If you inspect browser and search “DateTime.Now.ToString()” on the browser you could not see the C# code on browser we can only see the pure Html code. This is the job of View Engine to convert C# code into pure Html format on the browser.

Example of Multi statement block:

In the multi-statement block, we can write more than one line of code as follow.

<hr />

@{ 

    var num1 = 100;

    var num2 = 200;

    var num3 = num1 + num2;

    string message = "Welcome to ASP.NET MVC 5 Tutorials.";

}

<label>Addition of two Num is = @num3</label><br />

<label>@message</label>

Output:

Comments in razor syntax in MVC 5

Two types of comments

• Single Line:

Example: // code.........

• Multi-Line:

Example: /* code........ */

Single Line comment Code: 

//var num1 = 100;

Multi-Line comment Code: 

 /*var num1 = 100;

    var num2 = 200;

    var num3 = num1 + num2;

    string message = "Welcome to ASP.NET MVC 5 Tutorials.";*/

Escape sequence in Razor syntax in MVC 5

Razor syntax always starts with “@” then how can we print “@” symbol on the browser.

If you want to print your twitter account on browser then we need to take help of escape sequence. If we want to print “@shrimant_vt” then we need to write double at the rate symbol like “@@shrimant_vt”.

Example:

My Twitter Account = @shrimant_vt

First, we will not use the escape sequence in razor syntax to display the twitter account. 

Code:

<label>My Twitter Account = @shrimant_vt</label>

After executing application you will get following error message.

Compiler Error Message: CS0103: The name 'shrimant_vt' does not exist in the current context

Output:

To avoid the above compiler error message you need to use escape sequence in razor syntax as follow.

Code:

<label>My Twitter Account = @@shrimant_vt</label>

Output:

Interview Question on Razor View Engine in ASP.NET MVC 5

What is Razor View Engine in MVC?

Why View Engine is Required in ASP.NET MVC 5?

What is Razor?.

What is Razor Syntax?

Use of Escape sequence in Razor view engine.

Related Articles:

• Model In ASP.NET MVC 5
• Layout View in ASP.NET MVC 5

References: 

• Razor View Engine In MVC 5 (Video)
• Razor View Engine in MVC 5
• Razor View Engine in MVC 5 

I hope you understand the concepts of Razor View Engine in ASP.NET MVC 5. If you like this article then please share this article that will help other people to increase there knowledge.

Thanks for reading.

Don't Forget To:   

• Subscribe my YouTube Chanel
• Like the Facebook page.
• Follow on Twitter
• Share with your friends
• Add your valuable comment.

 More detail watch follow video on Razor View Engine In ASP.NET MVC 5:

Read More