5 Useful TagHelpers Built Into ASP.NET Core
TagHelpers simplifies your server-side code with HTML tags. Today, I present some useful, lesser-known TagHelpers already included in ASP.NET Core
Since ASP.NET Core was released, TagHelpers are a great way to expand your HTML vocabulary and make complex server-side logic even easier. As a web developer, HTML can be the limiting factor here. You can only do so much with the HTML tags given to you.
However, TagHelpers allow you to augment existing HTML making it even more abstract by building your own industry-specific HTML tags.
Some of the custom TagHelpers built on DanylkoWeb include:
- Using ASP.NET Core Tag Helpers for Image Layout
- How to Schedule a Link using TagHelpers in ASP.NET Core
- Create Smart Links Using TagHelpers in ASP.NET Core 1.0
- Advanced Basics: Bootstrap 4 with ASP.NET Core TagHelpers
- Create A/B Tests with ASP.NET MVC Core 1.0 TagHelpers
All of these create a new syntax and flexible parameters to use within your existing HTML making the rendered HTML generic enough for every browser. TagHelpers can be as simple or advanced as you want which brings me to the point of this post.
After digging into the ASP.NET Core docs, I found a number of TagHelpers built into the release that I never knew existed until last week (How's that for keeping up on technology?)
1. Cache
The Cache TagHelper allows you to improve performance by caching content in ASP.NET Core's caching provider.
For example, if you wanted to cache a section of content by date, you could use the expires-on attribute as shown below.
<cache expires-on="@new DateTime(2025,1,29,17,02,0)"> Current Time Inside Cache Tag Helper: @DateTime.Now </cache>
This gives you more granularity and flexibility with specific page content instead of entire pages. I believe Phil Haack called it donut caching.
2. Component
With all of the JavaScript frameworks out there, you knew a Component TagHelper was available, didn't you?
If you've developed ASP.NET MVC Pages, you know about the @Html.Partial and @Html.RenderPartial HtmlHelpers. In ASP.NET Core, this TagHelper is similar where it builds segmented components for your HTML. Of course, you need to adhere to specific guidelines when using it.
While I see the benefit, implementing a style attribute into a component doesn't shine a favorable light when it comes to Google (translate: no style attributes in HTML...it's so 2000).
3. Distributed Cache
While the Cache TagHelper caches content by a single cache provider, the DistributedCache TagHelper caches content to a distributed cache provider.
A concrete implementation of the IDistributedCache is required for the TagHelper to work. With that said, there are only two implementations of IDistributedCache: either SQL Server or Redis.
4. Condition
This simple example shows how to include (or exclude) a section of code based on a bool expression.
For example, if you want a <div> tag to appear when something is approved, your HTML would look like this:
<div condition="Model.Approved"> <p> This website has <strong surround="em">@Model.Approved</strong> been approved yet. Visit www.contoso.com for more information. </p> </div>
This is probably one of the easiest ways to make content appear/disappear based on a condition. Authorization to specific resources is a great example.
<div condition="!User.Identity.IsAuthenticated">I'm not a valid user</div> <div condition="User.Identity.IsAuthenticated">I can use the system</div>
You also have the ability to use the Model object as well in a condition.
<div condition="Model.User.HasPermission">You can see this...you're allowed</div>
Very powerful with such a simple TagHelper.
5. Environment
When you create a new ASP.NET Core website in Visual Studio 2019, you automatically get a view of the Environment TagHelper in the _Layout.cshtml file.
There is an include and exclude attribute for determining what content to display when staging, production, development, or any other environment you have defined in your Project file.
include Attribute
<environment include="Staging,Production"> <strong>HostingEnvironment.EnvironmentName is Staging or Production</strong> </environment>
exclude Attribute
<environment exclude="Development"> <strong>HostingEnvironment.EnvironmentName is not Development</strong> </environment>
The Environment TagHelper provides a way to display certain content based on different environments. Very helpful for displaying a version number, status of APIs, or the actual environment name as well.
Conclusion
There are a couple of other TagHelpers I didn't include because they were too simple (like the bold tag) and merely for demonstration purposes on how to create them.
I didn't realize these TagHelpers existed until I did a search last week for how to make a section of code appear based on a condition.
How simple and extremely valuable for ASP.NET Core development!
Did you create an extremely valuable TagHelper? Is it simple or complicated? Post your comments below and let's discuss.
