Tag Helpers in ASP.NET Core
Table of Contents
- Key Takeaways:
- What are Tag Helpers in ASP.NET Core?
- Why use Tag Helpers?
- Using the Tag Helpers
- Opt out of tag helpers (!)
- The scope of Tag helpers
- Default Tag helpers
- Intellisense support for Tag helpers
- What are Tag Helpers in ASP.NET core and why use Tag Helpers.
- Using tag Helpers.
- How to add/remove/opt-out of tag helpers.
- Tag helpers scope.
Unlike normal HTML Helpers in MVC, the Tag Helpers in ASP.NET Core allow us to have server-side code to customize the HTML elements in razor files.
- Enables HTML friendly development experience
- Provides intellisense for using server-side properties
We’ll use the input element
asp-for attribute and see how the tag helpers work. So, we’ve got a Post Model class here.
public class PostModel
Now, go to the
Views/_ViewImports.cshtml file and add the following
@addTagHelper *, <your assembly name>
Now in our
Index.html file, we’ll just try to get the names of the PostModel into our Razor.
That should generate the following HTML with the
PostName in the
name attributes. And, it also generated
data-val-required attributes as we have the
[Required] data annotation decorated to the
Post name property in our model class.
<input type="text" data-val="true" data-val-required="The Post Name field is required." id="PostName" name="PostName" value="Hello">
The value for the input
Hello is generated as I’ve created an object of PostModel in the controller action and passed it to the view.
public IActionResult Index()
@addTagHelper directive makes the necessary tag helpers available to the view.
In the above input tag helper case, I’ve used a wildcard (*) to get all the model classes but you could use specific model classes only available to the view by giving a fully qualified name.
@addTagHelper CoreTagHelpers.Models.EmailTagHelper, CoreTagHelpers
This directive will remove the tag helper which was added. We can ignore a tag helper from
_ViewImports.cshtml by adding @removeTagHelper in the view.
Adding @removeTagHelper in the
Views\_ViewImports.cshtml will remove the tag helper from all the views.
The opt-out character (“!”) is used to disable the Tag Helper at the element level.
With the opt-out character, the HTML will not be generated for the label tag in the above case. We can use this opt-out character if we want to conditionally control rendering of the HTML elements.
We can add
_ViewImports.cshtml to any view folder, and the view engine applies the directives from both the view folder and from the
We can limit the Tag helper scope to specific view folder by adding a
_ViewImports.cshtml inside the view folder. If we want to control it in a Home folder then adding
Views/Home/_ViewImports.cshtml will make the view imports available within that folder itself.
There are many tag helpers created by Microsoft, which are included by default if you’ve created a dot net core project.
Once you start writing any HTML element the icon for the HTML tag displays like this.
This indicates that the element is targeted by Tag Helpers. Normal HTML elements will just display the “<>” icon.
Once you add the
asp-for attribute to the HTML element the color of the HTML element will be changed to purple.
So, you can distinguish between a normal HTML tag and a tag helper tag.
With the HTML helpers in ASP.NET MVC projects, it’s hard for the front-end designer to HTML attributes to the elements in the file.
Tag helpers offer the server side code into the HTML elements while keeping the original HTML markup.