Using Tag Helpers

In the previous article, we talked about how the concept of Tag Helpers were initially added to the MVC framework. We also saw a simple example of a Tag Helper in action, but in this article, we'll dig deeper into how they work and how you get started using them.

How does Tag Helpers work?

Have a look at this example:

<input class="form-control" asp-for="Title" />

At first, this might seem like a regular INPUT tag, but if you look closer, you'll notice that the last attribute is special. The asp- prefix will let you know that this HTML tag is using a Tag Helper and that the actual output, sent to the browser, will likely be manipulated by the server. In this specific case, we use the asp-for attribute to instruct ASP.NET to bind this Input field to a property called Title on the Model.

So, imagine that your Model is a class called Movie, which has a property called Title. Because you used the Title property in the asp-for attribute, ASP.NET MVC will now automatically bind to this property and fill the regular INPUT HTML attributes "name", "id" and "value" in accordance with the name and the value of the bound property. The result will look like this:

<input class="form-control" type="text" id="Title" name="Title" value="The Godfather">

Two things that are very cool about this: First of all, a lot of markup was just generated for you completely automatically, saving you lots of keystrokes and time. Second of all, the asp-for Tag Helper attribute is checked at compile-time, so if you ever misspell the property or suddenly decide to change its name in the Model, the compiler will complain about it and force you to fix it before you release your work and potentially break your website!

The addTagHelper directive

To use Tag Helpers in your Views, you need to add support for them. This is done using the addTagHelper directive, either directly in the View where you want to use them, or if you want to use them in all your Views: In the _ViewImports.cshtml file. I suggest the _ViewImports.cshtml solution unless you have a specific reason for not wanting Tag Helper support in all your views.

Please notice that if you have used one of the non-empty Visual Studio templates to create your project with, support for Tag Helpers might already have been added. Look for a file called _ViewImports.cshtml in your project - if it's there, and it includes the line below, you are good to go!

To add support for the built-in Tag Helpers, which are the ones we'll be discussing in this article as well as the following articles, you should add the following line:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

After doing this, you should be able to see the asp-* properties in IntelliSense whenever you type an HTML tag supported by one of the Tag Helpers. The syntax of this directive looks like this:

@addTagHelper [namespace], [assembly]

So, in our example we are importing all Tag Helpers (as noted by the wildcard asterisk character) from the Microsoft.AspNetCore.Mvc.TagHelpers assembly. In case you want to limit the helpers imported, you can specify just one, by using it's fully qualified name (e.g. Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper), or you can import all Tag Helpers within a namespace, like this: Microsoft.AspNetCore.Mvc.TagHelpers.*

The addTagHelper directive can also be used to add support for your own, custom Tag Helpers - more about that later!

Summary

Tag Helpers makes it a lot easier to write markup, while having the added benefit of creating a tight relation between your HTML controls/tags and your Model. This will become much more obvious in the next articles, where we'll look into the various Tag Helpers.