30 October

Use of Tag Helpers

By Jorge Perales Diaz Asp Core

ASP.NET Core introduced a new feature “Tag Helpers” that allows us to change and enhance our existing HTML markup using server-side C# code. We normally add tag helpers in our Razor Views and Razor Engine then process them to generate and render the HTML returned from the server. This allows us to use all the power and cool features of C# in HTML. Tag Helpers are also easy to read and understand by designers and development tools. ASP.NET Core is shipped with many built-in Tag Helpers such as Cache, Anchor, Form, Label, etc. and we can also create our own custom tag helpers and use them in a similar manner as we use built-in Tag Helpers. In this tutorial, I will explain the difference between the Tag Helpers vs HTML Helpers vs View Components. I will also explain how to use ASP.NET Core built-in Tag Helpers in your projects.

Tag Helpers vs HTML Helpers

Many developers think that Tag Helpers are similar to HTML Helpers. It is somewhat true in a sense that many HTML helpers have their equivalent Tag Helpers but there are some differences.

Tag Helpers
 Html Helpers
Tag Helpers are attached to HTML elements inside Razor views and they help us in writing cleaner and easier to read markup. Here is an example of a Label Tag Helper used as an HTML element

<label asp-for="Email"></label>

Here is an example of tag helpers asp-controller and asp-action, which are attached to the existing HTML form element as attributes and enhanced the functionality of HTML form from the server-side C# code.

<form asp-controller="Account" asp-action="Register" method="post">
 HTML Helpers are invoked as methods as you can see below where we are calling a Label method to generate Label using HTML Helper

@Html.Label("FullName", "Full Name:", new {@class="user-name"})

Similarly to generate HTML forms we use the method BeginForm.

@using (Html.BeginForm(…)){
{
}
Tag Helpers provide an HTML friendly development experience Mostly Razor markup using Tag Helpers looks like standard HTML. Front-end designers conversant with HTML/CSS/JavaScript can edit Razor without learning C# or Razor syntax.

<cache vary-by-user="true"></cache>

Or

<img src="~/images/logo.png" asp-append-version="true" />
 HTML helpers do not provide an HTML friendly development experience. Front end designers need to learn C# and Razor syntax in order to use HTML Helpers. For example, if a designer will see a code similar to below in the HTML file, he needs to understand what is the meaning of the new operator, how to use lambda expressions =>, and so on.

@Html.TextBoxFor(m => p.Name,
new {@class="form-control has-error", placeholder="Enter Name",
superCoolFeature="Do something cool"})
Visual Studio provides rich intelligence support for Tag Helpers. Visual studio also gives a different color to Tag Helpers as compared to normal HTML elements such as h1, img, etc.

Visual Studio Intellisense for Tag Helpers
 Visual Studio do not provide a good IntelliSense support when writing HTML Helpers because in most cases the parameters or settings you pass to HTML helpers are simple Strings e.g. “FullName” and “Full Name:” shown below:

@Html.Label("FullName", "Full Name:", new {@class="user-name"})


Tag Helpers Vs View Components

Tag Helpers and View Components have many similarities. They both support Dependency Injection and they both have support to execute code synchronously or asynchronously, however, there are still some differences between them.

Tag Helpers
 View Components
TagHelpers don’t have a lifecycle like we have in Controller actions or View Components. When a razor view runs, any TagHelper gets compiled into the output and the HTML is returned.

Tag Helpers enables you to work alongside existing HTML and create or introduce new HTML elements and attributes which either modify the page contents or add new behavior to existing HTML elements.
View Components are like a mini, lightweight Controller with no Model Binding support. They expose many methods and properties, which already exist in Controllers. View Components support dependency injection just like controllers.
When you create Tag Helper, you inherit from TagHelper class

public class ProductTagHelper : TagHelper
{ }
 When you create View Components, you inherit from ViewComponent class

public class ProductViewComponent : ViewComponent
{ }
Tag Helpers can add new HTML as well as alter the existing HTML elements in the Razor View.
 View Components do not alter a Razor View’s HTML. They just add to it.
Tag Helpers can be called with a simple HTML like syntax. No Razor syntax required to invoke/call Tag Helpers.

<my-colorful-heading></my-colorful-heading>
To invoke/use a View Components in Razor View, we normally use Invoke or InvokeAsync methods of Component class.

@await Component.InvokeAsync(“Widget”)

Note: For ASP.NET Core 1.1 and higher, you can also invoke a View Components as a Tag Helper.

<vc:widget></vc:widget>

Using Tag Helpers in Razor Views

When we create a new ASP.NET Core MVC Web application, the following line is automatically added in the project Views/_ViewImports.cshtml file.


This line is using @addTagHelper directive that can be used to register a specific or all Tag Helpers in all your views. Here is an example of using Environment Tag Helper in the default Index View of Home Controller.


As our current project environment is set as “Development” so only the first Tag Helper will render the output.

There are two parameters for @addTagHelper directive. The first parameter specifies which Tag Helper we want to load in Views and the second parameter specifies the fully qualified name of the assembly that contains the tags. The above line is using wildcard (” * “) to register all Tag Helpers but we can also register a specific Tag Helper e.g. Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper as follows:


As soon as you will build the project with the above line, you will notice that Visual Studio is not recognizing the above environment tag and also not giving the environment element a Teal color. This is because we explicitly register only the Anchor Tag Helper in our Views/_ViewImports.cshtml file.

We also have @removeTagHelper directive available that can be used to remove specific Tag Helpers from all the views available in the current folder. For example, if you have a Views/_ViewImports.cshtml and Views/Account/_ViewImports.cshtml files and you have registered all TagHelpers in Views/_ViewImports.cshtml file you can remove some of those tags from all the views available in the Account folder by using the following @removeTagHelper directive within Views/Account/_ViewImports.cshtml file.


Built-in ASP.NET Core Tag Helpers

ASP.NET Core shipped with many built-in Tag Helpers available in Microsoft.AspNetCore.Mvc.TagHelpers library. Some built-in Tag Helpers are related to validations and others are related to Forms. Let’s review some of the built-in Tag Helpers in detail.

Label Tag Helper

Label Tag Helper is an alternate of Html.LabelFor HTML Tag Helper to generate the

Let’s say you have a following class with a property FullName


You can use the Label Tag Helper with the above property as follows:


The following HTML is generated for the element:


You can see that we are writing a lot less markup and code is also very easy to read. The FullName property is strongly typed in asp-for attribute of the Label Tag Helper.

Another advantage of using Tag Helpers is that they made developers more productive. Let’s say you are using the above “FullName” property in many forms of your application and one day you decided to change the forms label from “Full Name” to “Your Full Name”, you just have to change the Display attribute [Display(Name = “Your Full Name”)] and Label Tag Helper will automatically update in all the forms of your application.

Input Tag Helper

The Input Tag Helper binds an HTML element to a model expression in your razor view.


Let’s say you have a model class with following properties


You can bind these properties with the HTML element as follows:


The code above generates the following HTML:


You can see from the above generated HTML that Input Tag Helper is a powerful tag helper because it is generating a lot of HTML markup which we were normally used to write manually in our Razor Views in the past. Input Tag Helper has the following features:

  1. It generates id and name attributes matching with the asp-for expression name e.g. Email
  2. It automatically set the correct HTML type attribute based on the DataType data annotation attribute e.g. [DataType(DataType.Password)]
  3. It automatically generates HTML 5 validation attributes using the data annotations applied to model properties. e.g. data-val-required
  4. It provides a strong typing feature which means if the name of the model property changes, you will get the compile-time error in Razor Views.

More detail information about the Input Tag Helper can be found here.

Textarea Tag Helper

The Textarea Tag Helper is very similar to Input Tag Helper and it generates id, name, and data validation attributes from the model. It generates HTML

Share this post