Five Things Worth Knowing About ASP.NET Core Tag Helpers

If you developed ASP.NET Core web applications chances are you are already familiar with Tag Helpers. It is quite common for ASP.NET Core applications to rely on the tag helpers to render forms and form fields. So, a view typically contains many tag helpers as well as standard HTML markup. You can improve your development time experience with the tag helpers in variety of ways. This article discusses a few of them.

1. Using IntelliSense with tag helpers

Just like many other things such as HTML elements and JavaScript code, Visual Studio can also show IntelliSense for tag helpers. If you are using Visual Studio 2017 you might need to do a tiny bit of work to get the IntelliSense. From the Tools menu select Extensions and Updates menu option. In the resulting dialog look for Razor Language Services.

Click on the Download button to download the services. Then close the Visual Studio. As you close the IDE the Razor Language Services will be installed. So, be patient for a moment. Once the installation is done you will see the success dialog as shown below:

Now you can get IntelliSense in the razor view files (*.cshtml). For example, the following figure shows the IntelliSense for the form tag helper.

2. Customizing tag helper font and color

If your view is using a lot of tag helpers intermingled with a lot of HTML markup you may find it better to highlight the tag helpers with different font and colors. Luckily, Visual Studio allows you to do that. Go to Tools > Options and  then Fonts and Colors under Environment node.

You can use "HTML razor Tag Helper Element" and "HTML razor Tag Helper Attribute" settings to customize the look of the tag helpers. The following figure shows a sample customization in action.

As you can see tag helper tag as well as asp-* attributes are being shown in different color and font size.

3. Disabling a tag helper

At times you may want to disable a tag helper for an element. For example, you might want to use <form> as a standard HTML markup and not as a tag helper. You can disable tag helper for an element as shown below:

As you can see ! character has been added to the start and end tags of the <form>. This way tag helper attributes such as asp-action and asp-controller won't be applicable for this <form>.

4. Adding a tag helper prefix

If you wish to distinguish the tag helpers from the ordinary HTML markup (not just visual distinction) then you can resort to using tag prefixes. If you used ASP.NET web server controls and web user controls then you are already familiar with the idea of tag prefixes. To specify a tag prefix you use @tagHelperPrefix directive as shown below:

@tagHelperPrefix taghelper:

The above line assigns a tag prefix of taghelper: to all the tag helpers. You can write this line in _ViewImports.cshtml or individual view files. Once added you need to write the tag helper markup like this:

As you can see you no longer use <form> tag. Instead you use <taghelper:form> tag. 

5. Adding and removing tag helpers from a view

If you open the _ViewImports.cshtml file from under the Views folder you will find this line of code:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

The @addTagHelper is used to make one or more tag helpers available to all the view files in the project. The first parameter * indicates that all the tag helpers from the assembly that follows will be made available. You can also specify a particular tag helper rather than *. See the following example:

@addTagHelper Microsoft.AspNetCore.Mvc.TagHelpers.FormTagHelper, 
Microsoft.AspNetCore.Mvc.TagHelpers

The above code adds only the FormTagHelper to the views. That way only <form> will be considered as tag helper and IntelliSense for that will be shown.

Assume that you have added all the inbuilt tag helpers to a project using the _ViewImports.cshtml file. You want them to be made available to most of the views except a few. How do you disable the tag helpers for those views?Using @removeTagHelper directive. The following code shows how that can be done.

@removeTagHelper Microsoft.AspNetCore.Mvc.TagHelpers.FormTagHelper, 
Microsoft.AspNetCore.Mvc.TagHelpers

The above code removes the FormTagHelper from a particular view (you need to place this code at the top of that view). 

For a detailed introduction to ASP.NET Core tag helpers read the official documentation here.

That's it for now! Keep coding!!