Tag helpers in asp.net core

Suggested Videos
Part 32 - Routing in ASP.NET Core MVC | Text | Slides
Part 33 - Attribute Routing in ASP.NET Core MVC | Text | Slides
Part 34 - Install and use Bootstrap in ASP.NET Core | Text | Slides

Tag helpers are new in ASP.NET Core. Let's understand what are Tag Helpers and their use with an example.


What are Tag Helpers

Tag Helpers are server side components. They are processed on the server to create and render HTML elements in Razor files. If you have any experience with previous version of ASP.NET MVC, then you may be familiar with HTML helpers. Tag Helpers are similar to HTML helpers. There are many built-in Tag Helpers for common tasks such as generating links, creating forms, loading assets etc.


Importing built-in Tag Helpers

To make the built-in tag helpers available for all the views in our entire application, import the tag helpers using _ViewImports.cshtml file. To import tag helpers we use @addTagHelper directive.

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

The wildcard * indicates that we want to import all the tag helpers
Microsoft.AspNetCore.Mvc.TagHelpers is the assemly that contains the built-in tag helpers

Generating Links using Tag Helpers

Let's say we want to view a specific employee details. So we want to generate the following hyperlink. The number 5 is the ID of the employee whose details we want to view.

/home/details/5

There are several ways we could do this in a razor view

Option 1 : Manually generating the links

@foreach (var employee in Model)

{

    <a href="/home/details/@employee.Id">View</a>

}

Option 2 : Using HTML helpers

@Html.ActionLink("View", "details", new { id = employee.Id })

generates an anchor element

<a href="/hom/details/5">View</a>

@Url.Action("details", "home", new { id = employee.Id })

generates a string

/hom/details/5

Option 3 : Using Tag Helpers

<a asp-controller="home" asp-action="details"

    asp-route-id="@employee.Id">View</a>

generates

<a href="/Home/details/5">View</a>

Anchor Tag Helper

The Anchor Tag Helper enhances the standard HTML anchor (<a ... ></a>) tag by adding new attributes such as 
asp-controller
asp-action
asp-route-{value}

The rendered anchor element's href attribute value is determined by the values of these asp- attributes. 

As the names imply asp-controller specifies the controller name and asp-action specifies the action name to include in the generated href attribute value. asp-route-{value} attribute is used to include route data in the generated href attribute value. {value} can be replaced with the route parameters such as id for example.

<a asp-controller="home" asp-action="details"

    asp-route-id="@employee.Id">View</a>

generates

<a href="/Home/details/5">View</a>

As you can see from the code below, manually generating links is much easier than using HTML Helpers or Tag Helpers.

<a href="/home/details/@employee.Id">View</a>

The obvious question that comes to our mind is, why should we use HTML helpers or Tag Helpers over manually generating these links. We will answer this question in our next video.