Understanding ASP.NET Core Tag Helpers

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 biggest revolutionary released by the 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 in this technology, web developers need to take full responsibility related to all web content in their applications.

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. This helper objects basically simply and shorten the work of developer for designing any application of web interface. In MVC pattern, all the code of Razor views (include server-side) starts with @ 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 to use their old conventional HTML tags in their web applications for designing presentation layer. With the help of Tag Helpers, developers can design their presentation layer using HTML tag while they still can write business logic in the C# the code at server-side which will run in web server.

So, with the help of Tag Helpers which one is the Microsoft’s new features in ASP.NET CORE, developers can replace the Razor cryptic syntax with @ symbol with a more natural looking HTML-like syntax. So, the first question always arises that “Why we need Tag Helpers?”. The simple answer is that Tag Helpers actually 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 can create custom elements just like HTML elements with the help of Tag Helpers. Actually, we can write server-side code in the Razor files to create new elements or rendering 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 clearly 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>

TAG HELPERS ADVANTAGES

Now, we need to understand why Tag Helpers is important or what are the advantages of it's over the HTML Helper objects. So that can compare these two different helper objects. So, before going to in deep discussion about Tag Helpers, let’s discuss the main advantages of Tag Helpers over HTML Helpers objects

1. Tag Helpers use server-side binding without any server-side code.

2. This helper object is very much use full when HTML developers do the UI designing who does not have any idea or concept about Razor syntax.

3. It provides us an experience of working on basic HTML environments.the

4. It Supports rich IntelliSense environment support to create a markup between HTML and Razor

BUILT-IN TAG HELPERS

Microsoft provides many build-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.

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

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

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

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

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

 @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>

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

CUSTOM TAG HELPERS

In ASP.NET Core, there are several built-in Tag Helpers objects available. But in spite of that, we can create a 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 this custom tag helpers or can create in the same projects There are 3 easy steps need to perform for 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

For 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 which they are transforming through an instance of the TagHelperContext class. It mainly contains 3 values –

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

2.TagHelperOutput – This parameter is basically being the output of our tag helper declaration. It starts describing the HTML elements as it view 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 TagHelperContext object which is used in the view after the output element.

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

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

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

8. SupressOutput() – Execution of this method basically prevents the elements being including 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 developer custom reusable attribute 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. Business logic must remain in models or business service class. They can also be used as objects in strongly typed views. Also, it needs to remember that they're no new way to create web controls. 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.

Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.

GET TEST NOW