Custom tag helper isn't interpreted on razor page

Question

I try to add a custom tag helper to my project that would convert a markdown text to html. For the conversion I tried using both Makrdig.Markdown and CommonMarkConverter.Convert, without success, but I think that the problem lies in not detecting my implementation by the razor page.

My TagHelper:

using Markdig;
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;

namespace CustomTagHelpers.Helpers
{
       [HtmlTargetElement("markdown")]
       public class MarkdownTagHelper : TagHelper
       {
              [HtmlAttributeName("for-content")]
              public ModelExpression Content { get; set; }

              public override void Process(TagHelperContext context, TagHelperOutput output)
              {
                     output.TagMode = TagMode.SelfClosing;
                     output.TagName = "markdown-helper";

                     var markdown = Content.Model.ToString();
                     //var html = CommonMarkConverter.Convert(markdown);
                     var html = Markdig.Markdown.ToHtml(markdown);
                     output.Content.SetHtmlContent(html);
              }
       }

I've added it to the _ViewImports file

@addTagHelper *, CustomTagHelpers.Helpers MarkdownTagHelper

And that's the code using my tag helper in my view, HelloMarkdown is an attribute located in my viewmodel linked to the current view, it's a public string with [BindProperty]

<markdown for-content="HelloMarkdown"> </markdown>

Lastly, if I inspect the html code in my browser, it seems to interpret it literally, so it's the same as in the code:

<markdown for-content="HelloMarkdown"> </markdown>

While I would like to get something like that

<markdown-helper><p><em>Hello World</em></p></markdown-helper>

Eatos Eatos · Accepted Answer · 2020-02-22T11:26:41

Welcome to StackOverflow!

I dig into Adam Freeman's ASP.NET Core MVC 2 book as I found Your _ViewImports.cshtml declaration strange looking and also found confirmation in the docs that You are most probably use the invalid syntax there.

Based on the documentation it should be something like this (note the ., not space):

@addTagHelper *, MarkdownTagHelper

as the second argument sholud point to either FQN or the short name of the assembly and then the first argument is telling us which classes from the given assembly we want to use. Your current declaration is saying "import all classes from the CustomTagHelpers.Helpers assembly" which does not exists (it is a namespace). As for the 3ed part after the whitespace honestly I don't know how it would be interpreted, most probably ignored.

You can also use this syntax:

@addTagHelper CustomTagHelpers.Helpers, MarkdownTagHelper

but I guess Your intention was the first one, to import all helpers from Your assembly.

Please check it out if it would help? I think it might be it.

EDIT:

I've created a short exampe to verify and yes - it was a matter of the invalid @addTagHelper syntax.

After creating a new project (dotnet new mvc -o Sample), creating a lib for Your tag helpers (an assembly) (dotnet new classlib CustomTagHelpers), adding a reference of that lib to the main project I end up with this:

| Sample (sln)
|- CustomTagHelpers (classlib)
|-- Helpers (dir)
|--- MarkdownTagHelper.cs (Your code with CustomTagHelpers.Helpers namespace)
|- Sample (mvc project)
...

and _ViewImports.cshtml file:

@addTagHelper CustomTagHelpers.Helpers.MarkdownTagHelper, CustomTagHelpers

After rebuilding the tag helper is visible:

Of course You can also use @addTagHelper *, CustomTagHelpers to import all classes fro the assembly.

And what about the default @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers which is seems to be a namespace (docs)? This is actually the name of the dll file (assembly). You can find it here: %USERPROFILE%\.nuget\packages\microsoft.aspnetcore.mvc.taghelpers\2.0.0\lib\netstandard2.0 or similar directory. Here is the source code for it: link. The Microsoft.AspNetCore.Mvc.TagHelpers is just a name of the classlib/assembly. We can also do the same trick by changing our project's structire into this:

| Sample (sln)
|- CustomTagHelpers.Helpers (classlib)
|-- MarkdownTagHelper.cs (Your code with CustomTagHelpers.Helpers namespace)
|- Sample (mvc project)
...

and then we can use @addTagHelper *, CustomTagHelpers.Helpers.

Custom tag helper isn't interpreted on razor page

1 Answers