Naif.Blog 9. Tag Helpers (part 1)
I have been making some updates to my Blog Application (Naif.Blog) over the last few weeks, as I both enhance the application with some new features and bring it up to the latest version of ASP.NET Core (v2.1). In my implementation of theming I have allowed themes to “override” any of the default Views. This makes the theming engine very powerful but it also makes it potentially harder for theme creators as they would need to understand some basic Razor. This is where Tag Helpers come in - Tag Helpers provide a way to express functionality in HTML markup. In this blog I review the built-in Tag Helpers.
A Simple Tag Helper
Lets first look at a simple built-in Tag Helper – the Label Tag Helper. The first thing to ensure is that our Views can use the built-in Tag Helpers.
The Razor command in the gist above needs to be added either to the View in question or to the _ViewImports.cshtml Razor file in the root of the Views folder. If it is added to the _ViewImports file then the built-in Tag Helpers are available to all Views.
The Label Tag Helper essentially provides the same functionality as the HTML Helper (Html.LabelFor). Lets look at an example:
In this example we have a simple Model – MyModel with one property – Test. We could use the HTML Helper to render the label but using the Tag Helper, but the C# syntax for a lambda expression is not intuitive to a non-programmer. Meanwhile the simple use of the “asp-for” attribute to identify the property could be written by anyone with HTML knowledge. Note that just like the HTML Helper method the Tag Helper respects the DisplayName Data Annotation and renders “A property” rather than the name of the property “Test”.
Built-in Tag Helpers
There are a number of built-in Tag Helpers mostly to support Form creation. Some examples include
- Anchor Tag Helper
- Cache Tag Helper
- Form Tag Helper
- Select Tag Helper
- Validation Message Tag Helper
- View Component Tag Helper
The Form Tag Helper provides attributes for building the Route where the form is posted to (asp-controller, asp-action). It also provides a very flexible attribute for any route parameters, e.g. asp-route-id (the route parameter id) or asp-route-returnUrl (the route parameter returnUrl)
Note that it also automatically generates the hidden Anti Forgery Token (name="__RequestVerificationToken").
The ViewComponent Tag Helper is another interesting Tag Helper as it provides the ability to configure ViewComponents. To use the ViewComponent Tag Helper you must use the vc: prefix together with the “name” of the ViewComponent – using kebab-casing.
As you can see, Tag Helpers are quite useful, especially for simplifying your Views. You can of course create your own Tag Helpers - in a future blog post I will show how you would go about that exercise.