ASP.NET Core provides many built-in Tag Helpers to help you create the necessary HTML elements for many scenarios. However, this process is not comprehensive and is exhaustive. Sometimes, you may want to make some changes in the generated HTML element, or you may want to create an HTML element with new properties or a new HTML element altogether. You are not restricted to using only the existing Tag Helpers in the ASP.NET Core application. You can create your own Tag Helper if the existing Tag Helpers do not suit your needs. Let's create a simple Tag Helper to create an e-mail link:

<a href="mailto:[email protected]"> 

There are a couple of ways to create Tag Helpers to implement the ITagHelper interface or inherit the TagHelper class. The TagHelper class has a Process method that you can override to write your custom Tag Helpers. The TagHelper class also has the TagHelperOutput parameter, which you can use to write and generate the desired output HTML. So, it is preferable to create Tag Helpers by inheriting from the TagHelper class.

Our objective is to write a custom e-mail Tag Helper so that when someone uses that Tag Helper, which is <email mailTo="[email protected]"></email>, it should be converted to the following line of code:

<a href="mailto:[email protected]">Drop us a mail</a> 

The following are the steps that need to be performed to create the custom Tag Helper in the ASP.NET Core application.

Create a folder called TagHelper and add a new item named the EmailTagHelper.cs file. By convention, all Tag Helpers class should end with TagHelper, even though we can override this convention.

Once you have created the file, you will need to override the Process method to generate the desired HTML output:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Razor.TagHelpers;

namespace Chapter4.TagHelpers
{
  public class EmailTagHelper : TagHelper
  {
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
      string emailTo= context.AllAttributes["mailTo"].Value.ToString();
      output.TagName = "a";
      output.Attributes["href"] = "mailto:" + emailTo;
      output.Content.SetContent("Drop us a mail");
    }
  }
}

The parameters used in the preceding code are explained as follows:

We have created the e-mail Tag Helper. Now, we have to make it available to our Views so that we can make use of that Tag Helper in our Views. Edit Views\_ViewImports.cshtml to include the namespace of the TagHelpers and add the associated TagHelpers. In the following _ViewImports.cshtml file, we have added the content highlighted in bold:

@using Chapter4
@using Chapter4.Models
@using Chapter4.TagHelpers
@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers" 
@addTagHelper "*, Chapter4"

The "*" symbol in the following line tells the view engine to include all the TagHelpers in the Chapter4 namespace:

@addTagHelper "*, Chapter4"

You can only specific TagHelpers, For example, the following line will include only the EmailTagHelper so it is available for our Views:

@addTagHelper "Chapter4.TagHelpers.EmailTagHelper, Chapter4" 

Let's create a simple action method in our Home Controller. In the view of the associated action method, we will use the e-mail Tag Helper:

public IActionResult AboutUs()
{
  return View();
}

The following is the view of the preceding AboutUs action method:

<h3>About Us</h3>
We are one of the biggest electronics retail store serving millions of people across the nation. blah.blah. blah <br/>

If you want to hear great offers from us 
<email mailTo="[email protected]"></email>

When you run the application and access the http://localhost:50132/Home/AboutUs URL, you will see the following output:

Here, we created an anchor tag with the mailto attribute and the email value as the href attribute value.

I have opened the Developer Tools window (Press F12 to do this and select the DOM Explorer tab) to see the generated HTML.