Naif.Blog 10. Tag Helpers (part 2)
In a previous post, I introduced the concept of Tag Helpers in ASP.NET Core. In this post I will show how you can create your own Tag Helper. As an example I will rewrite my User Profile ViewComponent as a Tag Helper. As I mentioned in the previous post I can use the User Profile View Component as a Tag Helper by using the built-in ViewComponent Tag Helper, but this exercise will show how we can build it as a pure Tag Helper.
The first thing to decide is the syntax we are going to use in mark-up. Tag Helpers support the use of custom element names and/or custom attribute names. I can use an existing element, like “section” or “div" or I could create a new custom element, for example <nb-user-profile> following the kebab casing strategy used for Tag Helpers. I have decided that for this example I will use the div element and add custom attributes.
The User Profile View Component
The gist below shows the existing code in the User Profile View Component.
The code in the ViewComponent class shows that I could place (hide?) all the logic inside the Tag Helper class, but I would like to keep this Tag Helper as flexible as possible and I would like to expose some attributes to demonstrate how Tag Helpers are built. So the goal of my tag helper will be to replace the View markup in the gist above by the following markup.
Note that because we are targeting a generic Html element it is important to namespace the attributes to avoid possible ambiguity when multiple Tag Helpers are defined which target the same element.
Creating the User Profile Tag Helper class
The gist below shows the basic code required to support the markup required.
The HtmlTargetElement attribute applied to the class identifies the element which we are using for the Tag Helper and the Attributes parameter identifies the required attributes. For the purposes of this example I am only going to require that the nb-profile-name attribute be present. The attributes themselves are mapped to properties of the class using the HtmlAttributeName attribute. This allows the Tag Helper attributes to show up in Intellisense (see below)
The TagHelper base class provides two methods that you can override to implement your functionality – Process and ProcessAsync. If your Tag Helper needed an Http call to collect data for example, a task that is asynchronous then you should probably override the ProcessAsync method, but in this example there is nothing asynchronous so I will overload the Process method (see he gist below)
The method is fairly straightforward - we just build the required markup and insert the properties as required.
The gist above shows how the Tag Helper can be used.
Summary
Tag Helpers are a useful addition to the ASP.NET Core developers arsenal, and they makes it much easier to divide the development responsibility between HTML designers and developers for big applications.
Source
The source for Naif.Blog can be found at https://github.com/cnurse/Naif.Blog. If you want to find the state of the repository used in this post then you can find that at the tagged release v0.6.0 (https://github.com/cnurse/Naif.Blog/releases/tag/v0.6.0)