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
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:
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>
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:
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.
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
That's it for now! Keep coding!!