Taghelpers are new to Asp.net mvc 6. In this post i’ll show you how to create a custom taghelper.

What is a taghelper?

Basically taghelpers do the same thing as the htmlhelpers we all know. If you use a htmlhelper in your view, you’ll see that it is actually C# code. If you would use a taghelper, it would lean more to html than to C# code.

Defining your taghelper

Your custom taghelper will need to inherit from the TagHelper base class. This base class defines two virtual methods called Process and ProcessAsync. In these methods you’ll write your taghelper logic.

    public class MyTagHelper : TagHelper
    {
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            base.Process(context, output);
        }
    }

In order to use your taghelper, i’ll need to register it. This done in the “_ViewImports.cshtml” file that can be found in the View folder.

      @addTagHelper "MyWebApplication.MyTagHelper, MyWebApplication"

The last part is your dll name. The first part is the name (namespace + classname) of the taghelper you want to register. If you want to register all the taghelpers from a specific dll you can use a wildcard.

      @addTagHelper "*, MyWebApplication"

When you succesfully have registered your taghelper, i’ll get intellisense for your taghelper in your views.

Next, you will need to specify a target html tag that will invoke your custom taghelper. This can be done in 2 ways:

• by naming convention
  • If your your taghelper is called TestTagHelper, it will target all Test-tags

• using the TargetElement attribute
  • you explicitly set the target tag

    [TargetElement("Person")]
    public class MyTagHelper : TagHelper
    {        
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            base.Process(context, output);
        }
    }

Adding attributes/properties on a taghelper

I now want to pass a name and lastname to the custom taghelper. These parameters will be passed like this:

<Person name="kenny" lastname="tordeur"></Person>

In the taghelper you will need to define these attributes. This can be done using the TargetElement tag.

    [TargetElement("Person",Attributes = "name,lastname")]
    public class MyTagHelper : TagHelper
    {        
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            base.Process(context, output);
        }
    }

In order to get the values of the attributes, you can use the TagHelperContext. This object will contain all the defined attributes. You can also create properties that will map to the attribute names.

    [TargetElement("Person",Attributes = "name,lastname")]
    public class MyTagHelper : TagHelper
    {
        public string Name { get; set; }

        public string Lastname { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            base.Process(context, output);
        }
    }

To map the attribute values to the correct properties, a naming convention is used. The attribute “name” will map to the property “Name”. So the first letter of the attribute will be transformed to an uppercased letter. If you would have an attribute “last-name”, it would be mapped to “LastName” property. So the “-” will be remove from the attribute name and the next letter will be transformed to an uppercased letter.

You aren’t just limited by passing in simple types (string, int, …) to the taghelper. You can also pass complex types to the taghelper.

Rendering some html

The only thing left to do is to implement an output for the taghelper. This can be done using the TagHelperOutput object. This object contains everything you need to create your custom html output. In this example i’ll just concatent the Name with the Lastname.

    [TargetElement("Person",Attributes = "name,lastname")]
    public class MyTagHelper : TagHelper
    {
        public string Name { get; set; }

        public string Lastname { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.Content.SetContent($"{Name}, {Lastname}");

            base.Process(context, output);
        }
    }

The result

I’ve but this in my view.

    <Person lastname="Tordeur" name="Kenny"></Person>

The intellisense helped me.

This is the output when the view is rendered in the browser.