Custom tag helper not working

Question

I followed a few guides on creating a custom tag helper for ASP Core.

This is my helper:

using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;
using System;

namespace ToolControlSystem.TagHelpers
{
    [HtmlTargetElement("description", Attributes = DescriptionAttributeName, TagStructure = TagStructure.NormalOrSelfClosing)]
    public class DescriptionTagHelper : TagHelper
    {
        private const string DescriptionAttributeName = "asp-for";


        [HtmlAttributeName(DescriptionAttributeName)]
        public ModelExpression Model { get; set; }

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

            var description = GetDescription(Model.ModelExplorer);

            output.TagName = "span";
            output.TagMode = TagMode.StartTagAndEndTag;
            output.Content.SetContent(description);
        }

        private string GetDescription(ModelExplorer modelExplorer)
        {
            string description;
            description = modelExplorer.Metadata.Placeholder;

            if (String.IsNullOrWhiteSpace(description))
            {
                description = modelExplorer.Metadata.Description;
            }

            return description;
        }
    }
}

I drop this in _ViewImports.cshtml: @addTagHelper *, ToolConstrolSystem.TagHelpers

Annnndd... nothing. No intellisense, no tag replacing...

Any ideas?

Permeability

Tool Constrol System? – Chivalry

Answer 1

You need to provide only assembly name in the view imports file.

_ViewImports.cshtml:

@addTagHelper *, ToolConstrolSystem

Meryl

Wow, that should be at least (!) in bold in documentation. Spent a few hours too guessing what did go wrong. – Deposition

Documentation makes it look like it's a namespace, not an assembly name. *faceplam* – Libelee

Thankfully, they've made the documentation clearer since then: learn.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/… – Remainderman

in additional, assembly name can not have "_" in name – Bearberry

In addition, I just had to exactly match upper/lower case to make it work. And not a single error message displayed :/ – Hosbein

I had an '_' in the assembly name, which was defaulted in by VS when I rendered a project template out, then created a new one from it with a '-' in the project name. Removing that fixed the problem but I had to delete the contents of my bin folder for the change to take effect. – Eveland

@Libelee so thankful for your comment about assembly name vs name space. I looked at the above syntax a handful of times and wondered how my include was possibly wrong... – Laquitalar

Answer 2

Ah, Finally i find my mistake. @addTagHelper *, [needs assemply-name] not default namespace name!

for me:

@addTagHelper *, MyProject_Website

Must be:

@addTagHelper *, MyProject-Website

see your project property!

Pamper

Answer 3

See Managing Tag Helper scope

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AuthoringTagHelpers

The code above uses the wildcard syntax (*) to specify that all Tag Helpers in the specified assembly (Microsoft.AspNetCore.Mvc.TagHelpers) will be available to every view file in the Views directory or sub-directory.

Synecious

That what was wrong with mine as well in the example it was the wrong way around thanks very much – Bandwidth

This was my issue was well. – Greaves

Answer 4

And also keep in mind that at the moment (March 2020) .Net Core 3 automatically generates the namespaces with underscores in it. Nevertheless, the assembly name will be exactly the same as the folder name (even if it does contain whitespaces and other uncommon for folder name symbols). It can cause troubles with adding your custom tag helpers.

Let's assume:

1. You have a folder called SUPER-TEST
2. You cd into it and call dotnet new mvc
3. This makes your new project have a namespace "SUPER_TEST".
4. You create a tag helper in this namespace and include the assembly name into the _ViewImports like this:

***
@addTagHelper *, SUPER_TEST
***

It's not gonna work. Because in fact your assembly is now called SUPER-TEST. .Net Core runtime replaces underscores with dashes when creating the new project.

So, you have to import the tag helpers from SUPER-TEST, like this:

***
@addTagHelper *, SUPER-TEST
***

Stingo

Holy macaroni. Thank you. It was ironic I created a project called "electronic_test_project" just to practice tag helpers. Changing the '_' to '-' made it work and kicked in the Intellisense. @addTagHelper *, electronic-test-project – Vlissingen

Answer 5

I had the same problem, but it was the result of a rogue, accidental semi-colon at the end of the @addTagHelper line.

I had:

@addTagHelper *, ToolConstrolSystem;

Instead of:

@addTagHelper *, ToolConstrolSystem

While the solution will build and run fine, the tag helper will not work if the @addTagHelper line contains a semi-colon.

Geter

Answer 6

So I wasted a bit of time chasing the problem where a taghelper was not working. After a while I went to bed and today with fresh eyes I gave it another try, was then that I realized that I did not add the @addTagHelper in the Razor Pages folder only in the Views folder.

So if you like I have this /Pages + /Views concepts make sure to go through all those _ViewImports.cshtml. Leaving this note here hopefully will remind someelse's tired brain, and if it helped take a break and go for a walk or a snooze.

Disadvantaged

Answer 7

Another thing to check if you're finding you can't set your content with calls like:

output.Content.AppendHtml("<tags...>");
output.Content.SetHtmlContent("<tags...>");

Is to check that you didn't use your tag helper as an empty/void element, e.g.:

<my-tag-helper attr="value" />

To add content the tag helper must have a closing tag:

<my-tag-helper attr="value"></my-tag-helper>

Morbihan

Answer 8

A way you can make the search for your TagHelpers a bit quicker is to provide the namespace that your tag helpers live in instead of the asterisk, which will look everywhere in your assembly.

@addTagHelper com.excellor.TagHelpers.*, excellor

Where excellor is the assemblyname and com.excellor.TagHelpers is the namespace the tag helpers reside in.

Note, the following entry is NOT needed as long as you are namespacing your tag helpers.

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Orellana

Answer 9

Another little tip that caused my tag helper not to work:

E.g. CustomButtonTagHelper will be available as custom-button.

So pascal case will be replaced by kebab case.

Bidden

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Unscrew

Answer 10

I had a related problem. I could not get any content using output.Content.SetContent(). For me I had to set the TagMode to start and end tag.

Considering this example of a simple email link helper.

using Microsoft.AspNetCore.Razor.TagHelpers;

namespace TagHelpers.TagHelpers; 

public class EmailTagHelper : TagHelper {


    public string Address { get; set; } = "";
    
    public string Domain { get; set; } = "";

    public string Name { get; set; } = "";

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {        
        output.TagName = "a"; 
        output.Attributes.SetAttribute("href", $"mailto:{Address}@{Domain}");
        output.Content.SetContent($"Send Email to {Name}");
        output.TagMode = TagMode.StartTagAndEndTag;
    }

}

Usage:

    <email address="john" domain=".doe" name="John Doe" />

In addition, there is both SetContent and SetHtmlContent available. It worked with both.

Stenography

Answer 11

For those who are using the syntax correctly, but have their views and their TagHelpers in separate projects:

• Rebuild the TagHelper project
• Then rebuild the View project

It will work.

Tippett