Razor Tag Helper

[Foxtrek64]

Hi all,

I made a basic Tag Helper. I'll provide the source here.

using Microsoft.AspNetCore.Razor.TagHelpers;

namespace LuzFaltex.Web
{
    [HtmlTargetElement("github")]
    public class GithubTagHelper : TagHelper
    {
        public string Name { get; set; }
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "a";
            output.TagMode = TagMode.StartTagAndEndTag;
            output.Attributes.Add("href", $"https://github.com/{Name}");
            output.Attributes.Add("target", "_blank");
            output.Attributes.Add("rel", "noopener");
            output.PreContent.SetHtmlContent(Name);
        }
    }
}

This is a fairly basic example that should then let me use <github name="Foxtrek_64" /> and it'll automatically expand it into an anchor.

When the site is built however, the anchor isn't rendered and instead the github tag is placed in the resultant HTML. This tells me that the tag helper isn't being recognized.

I do have this line in my _ViewImports.cshtml file: @addTagHelper *, LuzFaltex.Web.GithubTagHelper. But adding it had no affect on my site output.

Do I need to perform any additional tasks to get this to render properly, such as registering it with a statiq pipeline?

Edit: I should also note that built-in tag helpers don't work properly either.

<div class="copyrightFooter">
    <div class="layoutContainer">
        <partial name="_footer" /> @*Renders raw*@
        @await Html.PartialAsync("_footer") @*Renders as expected*@
    </div>               
</div>

Edit 2: Adding @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers to my View Imports allows the built-in tag helpers to function. My custom tag helper is still non-functional.

[daveaglick]

The @addTagHelper *, [assembly name] syntax specifies the assembly that contains the tag helper and that all tag helpers in that assembly should be loaded and brought into scope (see https://docs.microsoft.com/en-US/aspnet/core/mvc/views/tag-helpers/intro?view=aspnetcore-5.0#addtaghelper-makes-tag-helpers-available). In your case, @addTagHelper *, LuzFaltex.Web.GithubTagHelper contains the name of the tag helper class, not the assembly so the import doesn't work. You either need to use @addTagHelper *, LuzFaltex.Web or @addTagHelper LuzFaltex.Web.GithubTagHelper (without the * that indicates an assembly-based import).

[daveaglick]

The syntax with a comma should only be used when importing from an assembly, not when specifying the full type name of a tag helper.

Try @addTagHelper LuzFaltex.Web.TagHelpers.GithubTagHelper

I'd also be curious if this works at all if you make a new standard ASPNET Core app and add your tag helper and Razor pages to that (commenting out all the Statiq stuff in the Razor page). The Statiq tag helper support uses the Razor engine directly, there are no modifications or anything, so I'd expect it to work in Statiq if it works in Razor and vice versa if it doesn't work.

[Foxtrek64]

Trying without the comma in the format as suggested results in the following exception:

[CRIT] One or more compilation failures occurred:
_ViewImports.cshtml(12,15): Error RZ1036: Invalid tag helper directive look up text 'LuzFaltex.Web.TagHelpers.GithubTagHelper'. The correct look up text format is: "name, assemblyName".

[Foxtrek64]

I'd also be curious if this works at all if you make a new standard ASPNET Core app and add your tag helper and Razor pages to that (commenting out all the Statiq stuff in the Razor page). The Statiq tag helper support uses the Razor engine directly, there are no modifications or anything, so I'd expect it to work in Statiq if it works in Razor and vice versa if it doesn't work.

I made a new asp.net core razor app. Added my tag helper, registered it with _ViewImports, and added the tag to my index.cshtml

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    <github name="Foxtrek_64" />
</div>

When you look at the output, you get this:

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    <github name="Foxtrek_64" />
</div>

You're welcome to try it yourself but it seems it's not specific to Statiq.

[daveaglick]

Trying without the comma in the format as suggested results in the following exception

Ah, my brain is stuck in .NET 5 - the non-comma syntax looks like it's new there and you still need to register the specific helper and assembly using a comma as you were trying.

You're welcome to try it yourself but it seems it's not specific to Statiq.

That's actually helpful to hear :). Otherwise I'd be concerned I messed up the Razor implementation (although I do use tag helpers elsewhere, so I know they work in some capacity).

I wonder if it's because the tag helper is closed? Wild guess here, but maybe <github ...></github>?

[Foxtrek64]

I wonder if it's because the tag helper is closed? Wild guess here, but maybe <github ...></github>?

I thought of that too, but doing it that way sees no change. That said, if I put content in inside the content portion, it'll happily render the content, but it pretty much just continues to ignore the github tag itself.

I ended up finding the solution after tinkering with that sample project a bit. I'm not sure what it thought the assembly was before, but this was the change I made:

--- a/LuzFaltexWeb.csproj
+++ b/LuzFaltexWeb.csproj
@@ -3,6 +3,7 @@
   <PropertyGroup>
     <OutputType>Exe</OutputType>
     <TargetFramework>netcoreapp3.1</TargetFramework>
+    <AssemblyName>LuzFaltex.Web</AssemblyName>
   </PropertyGroup>

   <ItemGroup>

Once I told the project explicitly what its assembly name was, it immediately found the helper and it was happy.

[Foxtrek64]

Solution was found:

The project didn't seem to know what assembly it belonged to. Adding an explicit AssemblyName declaration appears to have resolved the issue.

--- a/LuzFaltexWeb.csproj
+++ b/LuzFaltexWeb.csproj
@@ -3,6 +3,7 @@
   <PropertyGroup>
     <OutputType>Exe</OutputType>
     <TargetFramework>netcoreapp3.1</TargetFramework>
+    <AssemblyName>LuzFaltex.Web</AssemblyName>
   </PropertyGroup>

   <ItemGroup>