Why use tag helpers

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

In this video we will discuss why should we use tag helpers instead of writing the same HTML by hand. Let's understand the advantage of using tag helpers with an example.


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


We could manually generate this as shown below

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

OR

Use the anchor <a> tag helper as shown below

<a asp-controller="home" asp-action="details" asp-route-id="@employee.Id">View</a>

Advantage of using Tag helpers

Tag helpers generate links based on the application routing templates. This means if we later change routing templates, the links generated by tag helpers will automatically reflect those changes made to the routing templates. The generated links just work. 

Where as if we have hard-coded the URL paths manually, we would have to change the code in lot of places when the application routing templates change.

Let's understand this with an example

The following is the route template our application is using

app.UseMvc(routes =>
{
    routes.MapRoute("default", "{controller=Home}/{action=Index}/{id?}");
});

The following code is not using tag helpers. We are manually generating the link by hard-coding the URL paths.

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

The following code is using <a> anchor tag helper. 

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

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

Notice here, we are not hard coding the URL paths. We are only specifying the controller and action names and the route parameters along with their values. When tag helpers are executed on the server they look at the route templates and generate the correct URLs automatically.

Both the above techniques generate the correct URL path (/home/details/5) and it works with the current route template ({controller=Home}/{action=Index}/{id?})

Now let's say we have changed the routing template to the following. Notice in the URL we have the string literal "pragim"

app.UseMvc(routes =>

{

    routes.MapRoute("default", "pragim/{controller=Home}/{action=Index}/{id?}");

});

The code that's using the anchor tag helper generates the following correct link

<a href="/pragim/home/details/1">View</a>

Where as the code that's not using the anchor tag helper continues to generate the following link. Notice the URL path "/pragim" is missing.

<a href="/home/details/1">View</a>

We also have tag helpers that generate forms. When this form is posted back to the server, the posted values are automatically handled and the associated validation messages are displayed. Without these tag helpers we would have to write a lot of custom code to achieve the same. 

If this does not make much sense at the moment, please do not worry. We will discuss form tag helpers when we create "Create Employee" form in our upcoming videos.