Tag Helpers in ASP.NET Core 2.0

In this tutorial, we will take a look at Tag Helpers in ASP.NET Core like what are Tag helpers? difference between Tag helpers and other helpers, and how to use Tag Helpers in ASP.NET Core Application. So, Tag helpers are introduced in ASP.NET Core. They are similar to HTML helpers which help us to render HTML.

Previous ASP.NET Core Tutorials

• Introduction to ASP.NET Core 2.0
• How to create a new project in ASP.NET Core 2.0 using Visual Studio.
• Project Folder structure and responsibility of each file in ASP.NET Core 2.0 Application.
• Middleware in ASP.NET Core.
• Routing in ASP.NET Core.
• Attribute-based Routing in ASP.NET Core.

What are Tag helpers in ASP.NET Core

Tag helpers enable server-side code to participate in creating and rendering HTML elements in razor files. Tag helpers are similar to HTML helpers and much more natural to use. Tag helpers are introduced in ASP.NET Core. Tag Helpers can be used to define custom tags. They can also be used to modify the behavior of existing tags. Tag helpers are very focused around the HTML elements. So, they bind to specific element’s attribute and the element’s name.

• There are many built-in Tag Helpers for common tasks such as creating form, links and etc.
• They provide HTML-Friendly development experience.
• They also provide a rich intellisense environment for creating HTML and razor markup.
• Most of the built-in Tag Helpers target existing HTML elements and provide server-side attributes for the element.

Difference between Tag Helpers and Angularjs Directives.

There are many similarities between angular directives and Tag Helpers. But there is also a major difference between Angular Directives and Tag Helpers.

• Tag helpers are for server-side rendering while Angularjs directives are for Client-side.

Let’s see how to use Tag Helpers in ASP.NET Core Application.

How to add Tag Helpers’ library in ASP.NET Core

Let’s take a look and follow the below steps to add Tag helpers.

Step 1: Create a project

I will not create a new project in this tutorial, I will use that project which I have created in the previous tutorial. If you don’t know how to create a project new project then click here

Step 2: NuGet Library

Note: –  If you have created the MVC template of ASP.NET Core project, then you don’t need to install the library. Because it has already installed all the required libraries for you. But if you have created ASP.NET Core empty project, then follow the below steps to install the library.

• Go to solution explorer => right click on project => choose “Manage NuGet Packages…”.
• Click browse link => then Search for “taghelpers” in the search bar. And then click on “AspNetCore.Mvc.TagHelpers”, then click on Install button.

Step 3:  Add addTagHelper

Now, go to solution explorer =>  open _ViewImports.cshtml file just under Views folder => then add below line into _ViewImports.cshtml file.

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Note: – You can add this into an individual view. If you add into individual view, then you can’t use tag helpers for other views. But if you want to use tag helpers throughout the application, then you can use it in _ViewImports.cshtml file.

How to use Tag Helpers instead of HTML Helper in ASP.NET Core Application.

This below code shows how we use Tag helpers.