Can I use a Tag Helper in a custom Tag Helper that returns html?

I recently ran into a situation where I would like to use a tag helper within a tag helper. I looked around and couldn’t find anyone else trying to do this, am I using a poor convention or am I missing documentation?

Ex. Tag Helper A outputs HTML that contains another tag helper.

Ex.

[HtmlTargetElement("tag-name")]
public class RazorTagHelper : TagHelper
{
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("<a asp-action="Home" ");
        output.Content.SetHtmlContent(sb.ToString());
    }
}

Is there a way for me to process the <a asp-action> </a> tag helper from C#? Or to reprocess the output HTML with tag helpers?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

No you cannot. TagHelpers are a Razor parse time feature.

One alternative is creating a TagHelper and manually invoking its ProcessAsync/Process method. Aka:

var anchorTagHelper = new AnchorTagHelper
{
    Action = "Home",
};
var anchorOutput = new TagHelperOutput("a", new TagHelperAttributeList(), (useCachedResult, encoder) => new HtmlString());
var anchorContext = new TagHelperContext(
    new TagHelperAttributeList(new[] { new TagHelperAttribute("asp-action", new HtmlString("Home")) }),
    new Dictionary<object, object>(),
    Guid.NewGuid());
await anchorTagHelper.ProcessAsync(anchorContext, anchorOutput);
output.Content.SetHtmlContent(anchorOutput);

Method 2

If anyone’s looking to reuse the built-in tag helpers from asp.net core, you can use the IHtmlGenerator instead. For reusing other types of tag helpers, I haven’t found a simpler option then @N. Taylor Mullen answer

Here is how to reuse the asp-action tag helper:

[HtmlTargetElement("helplink")]
public class RazorTagHelper : TagHelper
{
    private readonly IHtmlGenerator _htmlGenerator;

    public RazorTagHelper(IHtmlGenerator htmlGenerator)
    {
        _htmlGenerator = htmlGenerator;
    }

    [ViewContext]
    public ViewContext ViewContext { set; get; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "div";
        output.TagMode = TagMode.StartTagAndEndTag;
        var actionAnchor = _htmlGenerator.GenerateActionLink(
            ViewContext,
            linkText: "Home",
            actionName: "Index",
            controllerName: null,
            fragment: null,
            hostname: null,
            htmlAttributes: null,
            protocol: null,
            routeValues: null
            );
        var builder = new HtmlContentBuilder();
        builder.AppendHtml("Here's the link: ");
        builder.AppendHtml(actionAnchor);
        output.Content.SetHtmlContent(builder);
    }
}

Method 3

I don’t know if this works for your scenario, but it is possible to inherit from the AnchorTagHelper and then do your customisations like this.

public class TestTagHelper : AnchorTagHelper
{
    public TestTagHelper(IHtmlGenerator htmlGenerator) : base(htmlGenerator) { }

    public async override Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        // Replaces <test> with <a> tag
        output.TagName = "a"; 
        // do custom processing
        output.Attributes.SetAttribute("class", "custom-class");
        // let the base class generate the href 
        // note the base method may override your changes so it may be  
        // preferable to call it first instead of last.
        await base.ProcessAsync(context, output);
    }
}

Then you can just use this tag helper in your view with all the built-in goodness of the default AnchorTagHelper.

<test asp-action="Index" asp-route-id="5"></test>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x