Core MVC

ASP.NET Core MVC Custom Tag Helpers

ASP.NET Core MVC Custom Tag Helpers

This entry is part 4 of 5 in theASP.NET Core Tag Helpersseries

All posts inASP.NET Core Tag Helpersseries:

ASP.NET Core MVC All about Tag Helpers

ASP.NET Core MVC Caching Tag Helpers

ASP.NET Core MVC Form Tag Helpers

ASP.NET Core MVC Custom Tag Helpers

ASP.NET Core MVC Tag Helper Components

In on of the previous posts we talked aboutTag Helpers, we also talked aboutcaching Tag Helpersandform Tag Helpers.

By creating our custom Tag Helpers, we have an ability to extend existing HTML elements or create our custom HTML elements.

A Tag Helper is any class that implementsITagHelperinterface. However, MVC provides us with an implementation of that interface.TagHelperthat comes with MVC, and it resides inMicrosoft.AspNetCore.Razor.Runtimeassembly.  Therefore we will mostly inherit fromTagHelperclass. By doing so, we inherit following methods (among other things):

public virtual void Process(TagHelperContext context, TagHelperOutput output); public virtual Task ProcessAsync(TagHelperContext context, TagHelperOutput output);

Process method is where all the magic happens. It receives context of Tag Helper instance and the Tag Helper output which we can use to read and change the actual content thats in the scope of our Tag Helper.

Lets create our own Tag Helper as an element. Lets say we will makesimple/simpleTag Helper and that text inside of it will be bold.

We are going to create a new project namedCustomTagHelpers. Therefore, the assembly name will also beCustomTagHelpers.

First, let us create a new Tag Helper. With Visual Studio we can doNew Item – Web – Razor Tag Helper.

The output that we get is following:

All we need to do is to set output tag name tostrong:

public class SimpleTagHelper : TagHelper public override void Process(TagHelperContext context, TagHelperOutput output) output.TagName = strong;

For us to be able to use the newly created Tag Helper inside of our views we have to add one line in the_ViewImports.cshtmlfile:

You can notice two strings [email protected]:

denotes the name of the assembly from where we will load Tag Helper or Tag Helpers.

directive denotes the TagHelper name to load, wildcard (

) means we will use all Tag Helpers from given assembly.

If we now go to one of the pages and place this code:

We will see thatsimpletag has gone purple in our Visual Studio and that it got recognised as Tag Helper. If we run the application, we will see this text in bold.

If we peek into HTML output we can see that oursimpletag got replaced bystrong:

Lets build another Tag Helper that will serve as another way to formimgtag. I will add a new Tag Helper named CuteTagHelper.

using Microsoft.AspNetCore.Razor.TagHelpers; namespace CustomTagHelpers.TagHelpers [HtmlTargetElement(cute)] public class CuteTagHelper : TagHelper public string ImageLink get; set; public string AlternativeText get; set; public override void Process(TagHelperContext context, TagHelperOutput output) output.TagName = img; output.TagMode = TagMode.StartTagOnly; output.Attributes.SetAttribute(src, ImageLink); output.Attributes.SetAttribute(alt, AlternativeText);

If I now go to.cshtmlfile and start typing:

You can see thatcuteis in purple meaning that Visual Studio recognises it as a Tag Helper. Furthermore, it gives us IntelliSense for two attributes that we specified in CuteTagHelper class.

Any public property we define in TagHelper class will appear as an attribute in the.cshtmlfile.

With Tag Helpers, we can extend existing elements with attributes or create new elements

Once we create a Tag Helper, we usually have a reusable attribute or element

class that ships with MVC provides methods and properties for writing Tag Helpers

Tag Helpers use a naming convention (just like controllers in MVC), so if you use class name

Previous post: ASP.NET Core MVC Form Tag Helpers

Next post:ASP.NET Core MVC Tag Helper Components

Software Engineer, Mentor and Consultant interested and specialising in Core, C, JavaScript, Angular, React.js. Experienced in MeteorJS, Node.js, ASP.NET, Windows Forms and Web Forms as well.

Get Free updates on ASP.NET Core, Angular, React.js, SignalR!

ASP.NET Core SignalR Chat with React.js

EntityFramework Core Add an implementation of IDesignTimeDbContextFactory

Entity Framework Core Generic Repository

ASP.NET Core SignalR Chat with Angular 5

ASP.NET Core MVC All about Tag Helpers

ASP.NET Core Best practices (tips and tricks) an opinionated approach Part 1

ASP.NET Core SignalR Chat with React.js

Using React Router v4 with create-react-app

ASP.NET Core SignalR Simple chat