Tag Helpers in ASP.NET Core MVC

Tag Helpers are new features in ASP.NET Core, which help us add the server side code easily into our HTML markup. In this tutorial, we will make use of them to update the HTML form, which we created in the previous tutorial on strongly typed view.

What is a Tag Helper

The Tag helpers help us to write HTML elements in razor markup using easy to use syntax. They look just like standard HTML code but it is processed by Razor engine on the server giving it all the advantageous of server-side rendering.

The razor markup created using the Tag Helpers looks like standard HTML elements. They manipulate the HTML elements on which they are operated or insert new HTML element, or replace the existing content with the new one.

For Example, by using the Form Tag Helper, we can rewrite the <form> tag as shown below. Here the asp-action & asp-controller are attributes of the Form Tag Helper.

And it translates into

Purpose of Tag Helpers

You can create forms without using the Tag Helpers ( or HTML Helpers) as we shown in the Forms in ASP.NET Core.  

But,  the Tag Helpers simplify the code required to generate the view’s HTML output based on the data provided to it. For Example Label Tag Helper generates the caption based on the display Data Annotation attribute. Similarly, the Input Tag Helper renders id, name & type HTML attribute based on the Model data type & Data Annotation attribute.

How to use Tag Helpers

The ASP.NET Core MVC Tag Helpers resides in the assembly Microsoft.AspNetCore.Mvc.TagHelpers assembly. We need to import it to use the Tag Helpers

Adding the Tag Helpers using @addTagHelper

To use the Tag Helpers, you need to add a @addTagHelper directive to view, or in specific views where you want to use them.

The code above uses the wildcard syntax (“*”) to specify that all Tag Helpers in the specified assembly (Microsoft.AspNetCore.Mvc.TagHelpers) will be available to the view

Making the Tag Helpers available globally

Adding the @addTagHelper to specific view makes it available only to that view.

You can add the @addTagHelper directive to the _ViewImports.cshtml, which makes it to available in all the views.

Removing the Tag Helpers

The @removeTagHelper is used to remove them from a specific view. The syntax of the @removeTagHelper is similar to the @addTagHelper

The above @removeTagHelper directive removes the ScriptTagHelper from the View.

Removing all the Tag Helpers

The code below removes all the tag helpers from the assembly Microsoft.AspNetCore.Mvc.TagHelpers from the specific view.

Selectively Adding the Tag Helpers

Instead of adding all helpers, you can selectively add the helper you need.

! Tag Helper opt-out character

By prefixing the ! before an HTML element, you will be able to disable the tag helper for that element.

The label Tag helper is disabled for the above code

You must apply the Tag Helper opt-out character to the opening and closing tag.

Using @tagHelperPrefix to selectively opt-in.

Instead of selectively opting out using the opt-out character !, you can use the @tagHelperPrefix to selectively opt-in for tag helper

To do that you must first define the opt-in prefix using the @tagHelperPrefix as shown below.

Now, the th: must be prefixed to every tag helper in the view, so as to enable tag helper on them

Example of Tag Helpers 

We built a simple Form in the previous tutorial. Let us add the Tag Helpers to that form.

First, Open the HomeController.cs and change Create Action method as follows.

The Instance of the ProductEditModel is passed to the View creating a Strongly Typed View.

Open the Create.cshtml from the folder /Views/Home.

Form Tag Helper

The Form Tag Helper is bound to the HTML <form> element.

The Form Tag Helper provides several server-side attributes which help us to manipulate the generated HTML. Some of the available attributes are

asp-controller: The name of the MVC controller.to use
asp-action: The name of the MVC Controller action.method to use
asp-area: The name of the Controller Area to use

For example

The above code translated into

Note that the Form tag helper has automatically inserted an Anti-forgery token into the generated HTML. 

Label tag Helper

The LabelTagHelper is applied on the label HTML elements. It has one server-side attribute named asp-for. It is used as shown below

Which translates into

The caption name is picked up from the model property name or from the data annotations applied on the model property.

Using @Model keyword is optional here. You can directly use the model property name as shown below.

You can read how to pass the model to view from the tutorial Strongly typed view

You can read more about Label Tag Helper

Input Tag Helper

Similarly, the Input tag Helper is applied to the input HTML element.

Which translates into

The type, id & name attributes are automatically derived from the model property type & data annotations applied on the model property

Finally, our HTML form will look like this

The Above form translates into

You can read more about input tag helper

Advantages of Tag Helpers

The Tag helpers offer several benefits

An HTML-friendly development experience

The Tag Helpers look like standard HTML elements. The Front-end Developers need not learn the C# or razor syntax to add these elements in the view. and thus more easily achieving the separation which concerns.

You can easily add CSS element or any HTML attribute to tag helpers just like an HTML element

A Rich IntelliSense Help

The Tag Helpers provide a Rich IntelliSense help

The following image shows the intellisense help as you type <label asp-for=”Rating”></label>

Intellisense Help Tag Helpers

Cleaner Code

The Code becomes cleaner & more readable compared to using the HTML Helpers. There is no need to use the @ escape sequence to shift between C# code and HTML Markup.

Extensible

ASP.NET Core MVC provides many built-in Tag Helpers to help us to create the view. But if these Helpers do not suit your needs, then you can create your own Tag Helper. You can also extend the existing Tag Helpers also.

We will show you how to create your own Tag Helpers in one of the future articles

List of Built-in Tag Helpers

The Microsoft.AspNetCore.Mvc.TagHelpers assembly consists of many built-in Tag Helpers for common tasks such as creating forms, validation summaries, labels, links etc. 

TagHelperTargetsAttributes
Form Tag Helper<Form>asp-action, asp-all-route-data, asp-area, asp-controller, asp-fragment, asp-host, asp-page, asp-page-handler,asp-protocol,asp-route, asp-route-
Anchor Tag Helpers<a>asp-action, asp-all-route-data, asp-area, asp-controller, asp-Fragment, asp-host, asp-page, asp-page-handler, asp-Protocol, asp-route, asp-route-
Cache Tag Helper<cache>enabled1,expires-after2,expires-on3,expires-sliding4,priority5,vary-by6
Environment Tag Helper<environment>names, include, exclude
Image Tag Helper<img>append-version
Input Tag Helper<input>for
Label Tag Helper<label>for
Link Tag Helper<link>href-include, href-exclude, fallback-href, fallback-href-include, fallback-href-exclude, fallback-test-class, fallback-test-value, fallback-test-property, fallback-test-value, append-version
Options Tag Helper<select>asp-for, asp-items
Partial Tag Helper<partial>name,model,for,view-data
Script Tag Helper<script>src-include, src-exclude, fallback-src, fallback-src-include, fallback-src-exclude
fallback-test, append-version
Select Tag Helper<select>for, items
Textarea Tag Helper<textarea>for
Validation Message Tag Helper<span>validation-for
Validation Summary Tag Helper<div>validation-summary

Summary

In this tutorial, we learnt what is Tag Helpers are and how to make use of them, while building HTML Forms.  The Tag Helpers are the powerful new feature added in the ASP.NET Core. In the next few tutorials, we will look at some of the important Tag Helpers in detail

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top