Custom Tag Helper in ASP.NET Core

Today are we going to learn how to build a custom Tag Helper, but first of all let’s see what is Tag Helper!capture

What’s a Tag Helper ?

Tag Helpers enable server-side code to participate in creating and rendering HTML elements in Razor files. For example, the built-in ImageTagHelper can append a version number to the image name. Whenever the image changes, the server generates a new unique version for the image, so clients are guaranteed to get the current image (instead of a stale cached image). There are many built-in Tag Helpers for common tasks – such as creating forms, links, loading assets and more – and even more available in public GitHub repositories and as NuGet packages. Tag Helpers are authored in C#, and they target HTML elements based on element name, attribute name, or parent tag. For example, the built-in LabelTagHelper can target the HTML <label>element when the LabelTagHelper attributes are applied. If you’re familiar with HTML Helpers, Tag Helpers reduce the explicit transitions between HTML and C# in Razor views.

For example,

<a asp-action='Create' asp-controller='Items' > Add item </a>

will be rendered to

<a href='/items/create' > Add item </a> 

Creating a custom Tag Helper

Let’s create a new ASP.NET Core project using Visual Studio (VS 2015 with the latest update or higher).

1

Project type

This is a simple ASP.NET Core project template provided by Visual Studio, our project contains only one controller which is HomeController and 3 Views (Index, Contact and About).

Now, let’s create a class titled LoopTagHelper, this class will inherit from a base class named TagHelper. This is a simple TagHelper to display an html content {count} times, so count will be a property in our LoopTagHelper class. In dev-time, count will be considered as an HTML attribute inside our loop HTML tag.

In the next step, we should override the ProcessAsync method defined in the base class (TagHelper) to define the behavior of our tag.

capture

This method output.GetChildContentAsync() will return a TagHelperContent object that contains all the html between <loop> and </loop>, this content will be stored in a string variable named htmlContent output.Content.AppendHtml(string) method will append a html content to our tag’s content.

Now we are done with our TagHelper but we still can’t use it until now, we should reference it in _ViewImports.cshtml file to be available in all views we have. Let’s add this line to _ViewImports.cshtml file :

@addTagHelper *, MyCustomTagHelper 

Note: MyCustomTagHelper is the namespace of my project, so you should change it with the name of your project.capture

Now everything is OK and we are ready to use our TagHelper.

Using the custom Tag Helper

Choose any view in your Views directory so you can use the Tag Helper we have created before. For me I’ll use it in the About page (About.cshtml).

capture

Let’s run the project (Ctrl + F5) and see how it looks.

5

And Voilà, our TagHelper works well and displays the HTML content 7 times because we have settled the count attribute to 7.

That’s it for this post, I hope you learned something new and if there is any questions please feel free to contact me.