Tag Helpers In ASP.NET CORE MVC

In this tutorial we will discuss tag helpers in ASP.NET Core MVC and significant of tag helpers. Tag helpers are one of the new features introduced in ASP.NET Core MVC.

Tag Helpers

In ASP.NET Core MVC, Tag Helpers are the server-side components. They are basically used to perform defined transformations on HTML Elements. As they are server-side components, so they are going to be processed on the server to create and render HTML elements in the Razor files.

If you are coming from ASP.NET MVC background, then you may find the Tag Helpers are similar to the HTML helpers.

Types of Tag Helpers:

There are two types of Tag helpers in ASP.NET Core. They are as follows:

Built-In Tag Helpers: They come in-built in the ASP.NET Core Framework and can perform common tasks like generating links, creating forms, loading assets, showing validation messages, etc.

Custom Tag Helper: That can be created by us to perform our desired transformation on an HTML element.

How to use built-in Tag Helpers in ASP.NET Core MVC?

In order to make the built-in tag helpers available for all the views of our application, we need to import the @addTagHelper directive helpers in the _ViewImports.cshtml file. 

The @addTagHelper makes the built-in tag helpers available in the application which are defined in an assembly called Microsoft.AspNetCore.Mvc.TagHelpers. Here the wildcard “*” specifies that all the Tag Helpers are made available.

As of now we have implemented the details and student listview to display data. No let’s take an example of a create link on a student list cshtml.

So we have different ways to add link

1. 1. 1. We can create manually using anchor tag
      2. Using actionlink html helper.
      3. Tag helper will discuss one by one.

Option 1: Add manually

Achor View

Option 2: Using action link

@Html.ActionLink("Achor View", "Details", "Student", new { id = 1 })

Option3: Using Tag Helpers:

In order to use Tag Helpers first import the @addTagHelper directive in the _ViewImport.cshtml file. Along with the @addTagHelper directive, we also add the model namespace using the @using directive. So, modify the _ViewImport.cshtml file as shown below which you can find within the Views folder.

@using FirstCoreMVCApplication.Models;
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

The Anchor Tag Helper in ASP.NET Core creates the standard HTML anchor () tag by adding new attributes such as: 

1. 1. 1. asp-controller: It is used to specify the controller to target based on the routing system. If you omitted this, then the controller of the current view is used by default.
      2. asp-action: It is used to specify the Action method to target based on the routing system. If you omitted this attribute then the action rendering the current view is used by default.
      3. asp-route-{value}: It is used for specifying the additional segment value for the URL. For example, asp-route-id is used to provide value for the ‘id’ segment.

The rendered anchor element’s “href” attribute value is determined by the values of these “asp-“ attributes. As the name says, asp-controller specifies the name of the controller whereas asp-action specifies the name of the action name. Similarly, the asp-route-{value} attribute is used to include route data in the generated href attribute value. {value} can be replaced with route parameters such as id, name, etc.

All above implementation will generate link like below.

/Student/Details/1

If all the implementation are generating same link so why we choose tag helpers over html5 or action link.  Below are the advantages over the html5 or action link.

Advantage of using Tag helpers in ASP.NET Core MVC Application:

In ASP.NET Core MVC, the Tag Helpers generates link based on the application routing templates. That means. in future, if we change routing templates, then the link generated by tag helpers will automatically reflect those changes made to the routing templates. So, the generated links just work as expected without any trouble. 

On the other hand, if we have hard-coded the URL paths manually, then we need to change the code wherever we have hardcoded the path in our application when the application routing templates change. For understanding this concepts i would suggest watch our video version of this tutorial with step by step explanation.