0

Consider the following Process function of a custom TagHelper:

public override async void Process(TagHelperContext context, TagHelperOutput output) {
    // ...

    var htmlContent = (await output.GetChildContentAsync()).GetContent();
    output.Content.SetHtmlContent(htmlContent);
}

I can use the following and it will render the nested taghelper:

<custom-button>
    <icon name="search" />
</custom-button>

However I need something more like this:

<custom-button icon="search"></custom-button>

That means I need to somehow render the icon taghelper inside the custom-button taghelper. Here's what I tried and failed:

public override async void Process(TagHelperContext context, TagHelperOutput output) {
    // ...

    // Set the content (first with the icon tag)
    output.Content.SetHtmlContent("<icon name=\"search\" />");

    // Render the icon
    var htmlContent = (await output.GetChildContentAsync()).GetContent();

    // Set the final content
    output.Content.SetHtmlContent(htmlContent);
}

Is there any way to achieve this?

EDIT! Here's the full CustomButtonTagHelper code:

[HtmlTargetElement("custom-button")]
public class CustomButtonTagHelper : TagHelper
{
    private readonly IFileVersionProvider _fileVersionProvider;

    [ViewContext]
    public ViewContext ViewContext { get; set; }
    
    public CustomButtonTagHelper(IFileVersionProvider fileVersionProvider)
    {
        _fileVersionProvider = fileVersionProvider;
    }

    [HtmlAttributeName("icon")]
    public string Icon { get; set; }

    public override async void Process(TagHelperContext context, TagHelperOutput output) {

        // ...

        output.TagMode = TagMode.StartTagAndEndTag;
        output.TagName = "button";

        // Set the content (first with the icon tag)
        output.Content.SetHtmlContent($"<icon name=\"{this.Icon}\" />");

        // Render the icon
        var htmlContent = (await output.GetChildContentAsync()).GetContent();

        // Set the final content
        output.Content.SetHtmlContent(htmlContent);
    }
}
DimChtz
  • 4,043
  • 2
  • 21
  • 39
  • 1
    What you show as your desired result is not a tag helper inside a tag helper. That's a custom attribute on a tag and it's not following the recommended standard for [custom attributes](https://stackoverflow.com/questions/1735230/can-i-add-a-custom-attribute-to-an-html-tag) – devlin carnate Sep 20 '21 at 21:41
  • @devlincarnate The `icon` attribute will actually go away once the taghelper gets rendered. – DimChtz Sep 20 '21 at 21:48
  • Also, you've left out the relevant code segment(s)...we need to see what's happening in those methods that are called inside of the `Process()` method, and then you also need to provide sample input so we know what gets passed to `Process()`' – devlin carnate Sep 20 '21 at 21:48
  • @devlincarnate I don't pass anything to `Process()`, I don't even call it. This is all handled by razor (I guess). – DimChtz Sep 20 '21 at 21:55

1 Answers1

-1

If you want to add attribute to Custom TagHelper,you can try to set output.Attributes. Here is a demo:

public override async void Process(TagHelperContext context, TagHelperOutput output)
            {


                output.TagMode = TagMode.StartTagAndEndTag;
                output.TagName = "button";
                output.Attributes.Add("icon", Icon);
               
            }

View:

<custom-button icon="search"></custom-button>

Rendered Html:

<button icon="search"></button>
Yiyi You
  • 16,875
  • 1
  • 10
  • 22