Financial Year 2023 End Sale: Get upto 40% OFF on Job-oriented Training! Offer Ending in
D
H
M
S
Get Now
Browse Tutorials
Understanding ASP.NET Core Tag Helpers

Understanding ASP.NET Core Tag Helpers

07 Mar 2024
Intermediate
64.8K Views
29 min read

Understanding ASP.NET Core Tag Helpers: An Overview

In the year 2008, Microsoft released the first version of MVC i.e. Model, View, and Controller for the web programming framework. It was one of the biggest revolutionary steps by Microsoft in the recent past. Because, before this era, web developers mainly developed by using web forms which are mainly maintained by the control of the HTML templates including CSS and Scripting languages as required.

The concept of web forms is very simple and easy for web developers, especially for beginners. But, in the case of MVC, the concept is a little harder. Because of this technology, web developers need to take full responsibility related to all web content in their applications.

Check out our ASP.NET Core Training to get an edge over the competition.

In MVC, developers normally do not use any web content for their applications. Because, Microsoft introduced three helper objects (HtmlHelper, UrlHelper, and AjaxHelper) for generating web control in the application. These helper objects simply shorten the work of the developer for designing any application of web interface. In the MVC pattern, all the code of Razor views (including server-side) starts with the @ sign. In this way, the MVC framework always has a clear separation between the server-side code and client-side code.

Why Tag Helpers?

Microsoft introduced a new feature in the MVC Razor engine with the release of ASP.NET Core which is known as Tag Helpers. This feature helps web developers use their old conventional HTML tags in their web applications for designing presentation layers.

So, with the help of Tag Helpers, developers can replace the Razor cryptic syntax with the @ symbol, a more natural-looking HTML-like syntax. So, the first question always arises “Why do we need Tag Helpers?”. The simple answer is that Tag Helpers reduce the coding amount in HTML which we need to write and also create an abstracted layer between our UI and server-side code. We can extend the existing HTML tag elements or create custom elements just like HTML elements with the help of Tag Helpers.

We can write server-side code in the Razor files to create new elements or render HTML elements. So, we can define the customs elements name, attribute, or parent name just like the HTML elements by using Tag Helpers. But, we need to remember that Tag Helpers does not replace the HTML helpers, so we can use both of them side by side as per our requirement. In the below example, we can see the difference between the two helper methods


// HTML Helpers
@Html.ActionLink("Click", "Controller1", "CheckData", { @class="my-css-classname", data_my_attr="my-attribute"}) 

//Tag Helpers
<a asp-controller="Controller1" asp-action="CheckData" class="my-css-classname" my-attr="my-attribute">Click</a>

In the above sample HTML code, it is clear how similar tag helper syntax is to the HTML code. Similar to the data attributes in HTML that is also optional in this case.

Characteristics of Tag Helpers in ASP.NET Core MVC

  • HTML-like Syntax: Tag Helpers use an HTML-like syntax that is familiar to web developers, making it easier to understand and work with.
  • Separation of Concerns: Tag Helpers help separate UI logic from markup, promoting a cleaner and more organized codebase.
  • Reusability: Custom Tag Helpers can encapsulate complex UI components and behaviors, making them reusable across multiple views.
  • Intuitive Integration: Tag Helpers naturally integrate server-side logic into your markup, making the code more readable and coherent.
  • Encapsulation of Complexity: Complex server-side logic and conditional rendering can be encapsulated within Tag Helpers, making your views cleaner and more maintainable.
  • IDE Support: Tag Helpers provide better IntelliSense and tooling support in modern development environments.

Types of Tag Helpers

ASP.NET Core MVC has two main types of Tag Helpers: Built-in Tag Helpers and Custom Tag Helpers. Both types of Tag Helpers contribute to simplifying the process of generating HTML elements in views, but they serve different purposes.

  1. Built-In Tag Helpers

Microsoft provides many built-in Tag Helpers objects to boost our development. In the below table, there is a list of available built-it Tag Helpers in ASP.NET Core.

Tag Helpers About Descriptions
Anchor Tag Helpers

The Anchor Tag Helpers extend the standard HTML anchor tag (<a>..</a>) which provides some new attributes. By standard convention, the attribute name must start with asp-. This helper object contains the following attributes –

  1. asp-controller - This attribute assigns the controller name which is used for generating the URL.

  2. asp-action - This attribute is used to specify the controller action method name. If no value is assigned against this attribute name, then the default asp-action value in the controller will execute to render the view.

  3. asp-route-{value} - This attribute enables a wildcard-based route prefix. Any value specified in the {value} placeholder is interpreted as a route parameter.

  4. asp-route - This attribute is used for creating a direct URL linking to an actual route value.

  5. asp-all-route-data - It supports to creation of a dictionary of key-value pairs. The key is the parameter name and the value is the parameter value.

  6. asp-fragment - This attribute specifies a URL fragment section to append the URL.

  7. asp-area - This attribute name sets the area name used in the actual route.

  8. asp-protocol - This attribute is used to specify the protocol value like https in the URL.

  9. asp-host - It is used to specify the hostname in the URL.

  10. asp-page - This attribute is needed to be used with the Razor Pages.


<a asp-controller="Student" asp-action="Index" 
asp-route-id="@Model.Id"> StudentId: @Model.StudentId </a> >Student List</a>
Cache Tag Helpers

This Tag Helper object provides the ability to catch the application content within the ASP.NET core cache provider. These helper objects increase the performance of the application. The default cached date time is set to twenty minutes by the Razor engine. The attributes of this Tag Helpers –

  1. enabled - This attribute decides whether the content within the Cache Tag Helper is cached or not. The default value is true.

  2. expires-on - This attribute is used to set the absolute expiration date for the cached data.

  3. expires-after - This attribute sets the length of time from the first request to the cached content.

  4. expires-sliding - This attribute sets the time of the cached entity so that after that time that entity can be deleted if not accessed.


 <cache enabled="true">
 Last Cached Time: @DateTime.Now
</cache>
Distributed Cache Tag Helpers

This Tag Helper object provides the ability to catch the application content within the ASP.NET core distributed cache provider. These helper objects increase the performance of the application. So, his Helpers objects and Cache Tag Helpers inherit from the same base class. So, for this reason, all attributes available under cache tag helpers will also be available Distributed Cache Tag Helpers. Except for this attribute, it contains one new attribute as below –

  1. name -> This attribute provides the key of each instance of the cache entirely in the cache provider.

 <distributed-cache name="unique-cache-1">
 Time Inside Cache Tag Helper: @DateTime.Now
</distributed-cache>
Environment Tag Helpers

This Tag Helper renders the enclosed HTML content based on the current hosting environment conditionally. This helper object contains a single attribute named name. This attribute accepts string type value and the value can be assigned as a comma separation method.


 <environment names="Testing,Release">
<strong>Application Environemt is Staging or Production</strong>
</environment>
Form Tag Helper

This Tag Helpers method helps us to work with Form and HTML elements within a Form. The Form Tag Helpers can do -

  1. It can generate the same form action attribute that we normally use for the MVC Controller to provide an action name.
  2. Generate a hidden token to present cross-origin forgery.

 <form asp-controller="Demo" asp-action="Save " method="post">
………………………………
</form>
Image Tag Helper

The Image Tag Helpers extend the <img> tag of the HTML. It always required an src tag as well as a Boolean attribute named asp- append-version. If we need to provide a static image source from a hosted web server, then a cache-bursting string is added to the query parameter as the image source. This process ensures that if the file changes then the related changes need to be done mandatorily for the web server changes.

Input Tag Helper

This Tag helper is used for the HTML input element to display model data in our Razor view. These helper objects do the following –

  1. asp-for attribute normally populate id and name of the specified HTML attribute for the display expression name.
  2. It can assign attribute value based on the model data to the HTML attribute
  3. It supports HTML 5-based validation attributes related to the model data annotations
 @model Login
<form asp-controller="Demo" asp-action="Register" method="post">
Provide Email: <input asp-for="Email" /> 
Provide Password: <input asp-for="Password" />
<button type="submit">SignUp</button>
</form>
Label Tag Helper

This Tag Helper extends the label tag of the HTML. It populates the caption of the label and attributes against the expression name. This Helper Object provides advantages like -

  1. We automatically retrieve the label description from the Display attribute.
  2. It reduced the code volume of the markup.
  3. It also can be used as a strong type for the model property.

 <form asp-controller="Demo" asp-action="Register" method="post">
<label asp-for="Email">Email Address</label>
<input asp-for="Email" /> 
</form>
Select Tag Helper

This Tag Helpers populate <select> tag of HTML and also associated option elements for the properties of the error. The asp-for attribute of this tag helps is used to mention the model property name of the select element. Similarly, asp-items specify the option element.


 <select asp-for="Country" asp-items="Model.Countries"></select>
Text Area Tag Helpers

This Tag Helper is a similar type of Input Tag Helper. The only difference is that this tag helper is applicable on <textarea> tag.

Validation Message Tag Helper

It is used to show the validation message in our view model.


<span asp-validation-for="Username" class="text-danger"></span>
Validation Summary Tag Helper

It is used to display validation summary messages.

  1. Custom Tag Helpers

In ASP.NET Core, there are several built-in Tag Helpers objects available. But despite that, we can create custom Tag Helpers and that can be included in the ASP.NET Core. We can add a custom tag helper in our MVC Core projects very easily. We can create separate projects for these custom tag helpers or can create the same projects. Three easy steps need to be performed to create a custom tag helper –

Step 1

First, we need to decide, which tag we need to target for creating the custom tag helpers and then we need to create a class for the tag helpers. So, I want to create our first tag helper named "hello-world", so for that, I need to add a class named HelloWorldTagHelper. Also, we need to remember that your tag helper class must be inherited from the TagHelper class.

Step 2

To perform the operations, we need to override the Process or ProcessAsync. In this method, we get two parameters as input –

1. TagHelperContext – The Tag Helpers receive information about the HTML element that they are transforming through an instance of the TagHelperContext class. It mainly contains 3 values –

  1. AllAttributes – It is a dictionary of properties that we can use in our Tag Helpers.
  2. Items – It returns a dictionary which is used to coordinate between tag helpers.
  3. UniqueId – This property returns a unique ID or identifier for the HTML element that has been transformed.

2.TagHelperOutput – This parameter is the output of our tag helper declaration. It starts describing the HTML elements as they are viewed in the Razor engine and can be modified through the below properties as mentioned.

  1. TagName - It provides the root name of the tag element.

  2. Attributes – Provides a dictionary of items for the output attributes.

  3. PreElement – It returns TagHelperContext object which is used in the view before the output element.

  4. PostElement - It returns the TagHelperContext object which is used in the view after the output element.

  5. PreContent – It returns the TagHelperContext object which is used in the view before the output element con.

  6. PostContent - It returns the TagHelperContext object which is used in the view after the output element con.

  7. TagMode – This property mentions that either tag is SelfClosing, StartTagAndEndTag, or StartTagOnly Tag.

  8. SupressOutput() – Execution of this method prevents the elements from being included in the view.


namespace CustomTagHelper.TagHelpers 
 { 
 using Microsoft.AspNetCore.Razor.TagHelpers; 
 using System.Text; 
 
 [HtmlTargetElement("hello-world")] 
 public class HelloWorldTagHelper : TagHelper 
 { 
 public string Name { get; set; } 
 public override void Process(TagHelperContext context, TagHelperOutput output) 
 { 
 output.TagName = "CustumTagHelper"; 
 output.TagMode = TagMode.StartTagAndEndTag; 
 
 var strSb = new StringBuilder(); 
 strSb.AppendFormat("<span>Hello! My Name is {0}</span>", this.Name); 
 
 output.PreContent.SetHtmlContent(strSb.ToString()); 
 } 
 } 
 }

3.Use the tag in your view and pass the required attribute


<div class="row"> 
 <hello-world name="Debasis Saha"> 
 </hello-world> 
</div>

SUMMARY

With the tag helper, we can extend the existing element or create new elements. We can develop custom reusable attributes or elements with the help of Tag Helpers. It also maintains the MVC naming conventions. But the most important thing is that Tag helpers can contain presentation logic. They can also be used as objects in strongly typed views. Tag Helpers does not contain any event model or view state. Tag Helpers give us more flexibility over the content in a great maintainable fashion. To make things easier for you, Dot Net Tricks brings a comprehensive skill-oriented ASP.NET Core Certification.

FAQs

Q1. What is the use of Anchor Tag Helpers?

These tag helpers generate hyperlinks. You can use them to create links to different actions, controllers, or URLs.

Q2. What are the types of Tag Helpers in ASP.NET Core MVC?

ASP.NET Core MVC has two main types of Tag Helpers: Built-in Tag Helpers and Custom Tag Helpers.

Q3. What are the types of attributes of Cache Tag Helpers?

enabled, expires-on, expires-after, and expires-sliding are the four attributes of Cache Tag Helpers.

Take our free aspnet skill challenge to evaluate your skill

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET CHALLENGE

Share Article
About Author
Debasis Saha (Technical Manager, Author and Mentor)

He is an ASP.Net, MVC and Angular Technical Manager with 10 years of experience. He always been a great fan of Microsoft Technologies and loves working on them. He has expertise in Asp.Net, MVC, SQL Server, MongoDB, Angular JS, and Angular. He loves to write articles about these technologies.
Accept cookies & close this