Use Razor Tag helpers inside custom tag helper

Question

Hello this is my tag helper

    [HtmlTargetElement("card")]
    public class CardTagHelper : TagHelper
    {
        public string Title { get; set; }
        public string Icon { get; set; }
        public string Url { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "CardTagHelper";
            output.TagMode = TagMode.StartTagAndEndTag;

            var preContent = new StringBuilder();
            preContent.AppendFormat($@"
                    <div class='card custom-card'>
                        <div class='card-header'>
                            <div class='card-title'>");

            if (Url != null)
            {
                preContent.AppendFormat($@"
                                <a asp-for='{Url}'>
                                    <div class='float-left return'>
                                        <i class='fas fa-arrow-alt-circle-left fa-lg'></i>
                                    </div>
                                </a>");
            }

preContent.AppendFormat($@"<i class='{Icon}'></i>
                                {Title}
                            </div>
                        </div>
                        <div class='card-body'>");

            var postContent = new StringBuilder();
            postContent.AppendFormat($@"                                   
                        </div>
                        <div class='card-footer'>
                        </div>
                    </div>");

            output.PreContent.SetHtmlContent(preContent.ToString());
            output.PostContent.SetHtmlContent(postContent.ToString());
        }
    }
}

the output is a bootstrap 4 card

<card title="myTitle" icon="myIcon" url="redirectUrl">

    // Content here

</card>

my problem is that i would like to use asp-page instead of href on the conditional rendered string for the anchor but when i added it, it had no effect or any clickable.

EDIT

These are my viewimports, as suggested i tried include my custom helper before the Asp.Net Core

@using MyProject
@namespace MyProject.Pages
@addTagHelper *, MyProject
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

There shouldn't be any issue with outputting taghelpers. The code you output will itself be processed too. However, you're likely running into an order of ops issue. It's typical to reference the ASP.NET Core built-in taghelper library first, and then any other custom libraries afterward, in _ViewImports.cshtml. That means the built-in helpers have already ran before this code even existed. Referencing your library first should resolve that. That said, it's better to not rely on other taghelpers exactly for this reason: it's too easy to break things. — Chris Pratt
i tried as you said and it still doesn't let me click the nachor like it had no href, it shows exactly asp-page on the browser dev tools which means it's not recognizing it tho — Jackal

Rahul Rahul · Accepted Answer · 2020-01-01T08:56:42

However, I didn't find any article where it is explained how we can use Razor Tag helpers inside our custom tag helpers. but for my solution, i had to use actual 'href' tag instead of 'asp-for' razor tag helper like below.

    public string Url { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        var content = $@"<a class='nav-link text-dark' href='/{Url}'>{Title}</a>";
        output.TagName = "li";
        output.Content.SetHtmlContent(content);
        output.Attributes.Add("class", "nav-item");
    }

Razor tag helper did behave the same it is doing for you, @Jackal. HTML generated like below -

<li class="nav-item"><a class="nav-link text-dark" href="/Index">Home</a></li>
<li class="nav-item"><a class="nav-link text-dark" href="/Restaurants/List">Restaurants</a></li>

Hope, it helps. Thanks

Use Razor Tag helpers inside custom tag helper

1 Answers