Tag Helpers are a new feature introduced in ASP.NET Core that enables server-side code to participate in creating and rendering HTML elements in Razor files. Tag Helpers are C# classes that participate in view generation by manipulating HTML elements. By using Tag Helpers, we can add additional attributes to HTML elements, change the content, or replace them entirely. In simple terms, Tag Helper's code that helps us to build our .cshtml forms without needing to write Razor syntax. For example, if we were to write an anchor tag in Razor we would write it like:
@Html.ActionLink("Read my book", "Read", "Book")
where Read is the action in Book controller and the text between anchor tag would be "Read my book". Using Tag Helper, it becomes very easy to write the same anchor tag as:
<a asp-action="Read" asp-controller="Book">Read my book</a>
This is both very easy to write as well as easy to understand, and looks more neat and easily maintainable as well, as it looks like HTML. Visual Studio has great tooling support for Tag Helpers and it highlights all the HTML elements that use Tag Helpers, thus making it easier to identify them and also provide rich intellisense to explore and use them as needed. Notice that all the Tag Helper attributes start with asp- and their naming is self-explanatory. There are a number of inbuilt Tag Helpers that come with the framework and writing a new one is also pretty straightforward. Let's have a quick look at a few inbuilt Tag Helpers and then we will conclude this discussion by creating one custom Tag Helper as well. The following table lists a few of the inbuilt Tag Helpers:
|
Tag Helper |
Example |
|
Anchor |
<a asp-action="Index" asp-controller="Home">Back to Home</a> anchor Tag Helper has few other properties that could be set, such as asp-fragment, asp-route, asp-path. This defines the anchor tag. |
|
Label |
<label asp-for="Name"></label> defines a label for a control. |
|
Input |
<input type="text" asp-for="Name"/> Earlier we used to have multiple Razor helpers for different types of input (checkbox, select, radio, text). Now we have just two helper attributes asp-for and asp-format. |
|
Form |
<form asp-action="Create" asp-anti-forgery="true" asp-controller="Person"></form> action and controller are defined, as well as the ValidateAntiForgeryToken is taken care of ! Wonderful! |
|
Text area |
<textarea asp-for="Description"></textarea>. |
|
Select |
<select asp-for="SelectedBook" asp-items="Model.Books"></select>. |
|
Image |
<img src="~/content/images/image.png" alt="profile image" asp-append-version="true"/> Used for cache-busting the image as the Tag Helper appends the hash of the image as the query string parameter such as <img src="/content/images/image.png?v=Z6p6D366_nQ2fQqUso0F24gWy2ZekXjHz83WvYbaiOOk" alt="profile image"/>. |
|
Cache |
<cache expires-after="@TimeSpan.FromMinutes(5)"></cache> The content inside the cache tag is cached in server memory unless explicitly disabled.
|
|
Link and Script |
These are the most interesting Tag Helpers of the lot as they have cache busting as well as fallback mechanisms implemented in them, such as <link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css" asp-fallback-test-class="hidden" asp-fallback-test-property="visibility" asp-fallback-test-value="hidden" />. |
|
Validation |
<span asp-validation-for="Description"></span>.
|
|
Environment |
<environment names="Staging,Production"></environment>. This is a special helper as contents of helper gets rendered only if the deployed environment name matches the names property of the Environment tag. |
As we can see, Tag Helpers provide a great boost in productivity while coding .cshtml files. The Visual Studio tooling with IntelliSense makes this experience even more efficient. In ASP.NET Core 2.0, Application Insights is also enabled by using a Tag Helper in the background. Next let's create a custom Tag Helper. Creating a custom Tag Helper needs these steps to be followed:
- Create a custom class which derives from the Microsoft.AspNet.Razor.TagHelper.TagHelper class
- Create the properties in the class to hold the attribute values
- Restrict the Tag Helper to be applicable only to a certain type of HTML element by decorating the class with the HtmlTargetElement attribute
- Override the ProcessAsync method and set the attributes as needed
- Add a line to _ViewImports.cshtml for the Razor views to recognize the Tag Helpers
Since we are not using Tag Helpers right now, we will not go into details, but as we can see, it's quite straightforward and easy. Now that we have visited the fundamentals of Razor syntax and Tag Helpers, we will quickly recap views.