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

Written by Jonathan "JD" Danylko • Last Updated: • Develop •

Scrabble pieces that spell HTML

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:

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.

Did you like this content? Show your support by buying me a coffee.

Buy me a coffee  Buy me a coffee
Picture of Jonathan "JD" Danylko

Jonathan Danylko is a web architect and entrepreneur who's been programming for over 25 years. He's developed websites for small, medium, and Fortune 500 companies since 1996.

He currently works at Insight Enterprises as an Principal Software Engineer Architect.

When asked what he likes to do in his spare time, he replies, "I like to write and I like to code. I also like to write about code."

comments powered by Disqus