Asp .Net Core Bootstrap 4 Tabs 标签助手

Question

我正在尝试渲染这个

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

变成类似

的东西

<tabs>
    <tabs-nav>
        <tab></tab>
        <tab></tab>
    </tabs-av>
    <tabs-content>
        <tab-pane></tab-pane>
        <tab-pane></tab-pane>
    </tabs-content>
</tabs>

问题是我不知道如何实现嵌套标签。我为 bootstrap 制作了一张这样的卡片

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

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            if (string.IsNullOrWhiteSpace(Class))
                Class = "custom-card";

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

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

            if (Url != null)
            {
                preContent.AppendFormat($@"
                                <a href='{Url}'>
                                    <div class='float-left return'>
                                        <i class='fas fa-arrow-alt-circle-left d-block'></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='overlay' style='display:none;'>
                            <i class='fas fa-spinner fa-spin text-bold' style='opacity:0.8;'></i>
                        </div>
                        <div class='card-footer'>
                        </div>
                    </div>");

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

这基本上让我可以将我想要的任何内容包装在

<card title="" icon="" url=""> 

    //Content

</card>

我至少想知道如何创建嵌套标签，如首选输出中所示，因为我在 Microsoft 文档上找不到任何类似内容的示例

编辑

所以我根据这里的答案实现了它似乎实现了我想要的

 [HtmlTargetElement("tabs-nav")]
    public class TabNavTagHelper : TagHelper
    {

        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            await base.ProcessAsync(context, output);

            output.TagName = "ul";
            output.Attributes.Add("class", "nav nav-tabs");
            output.Attributes.Add("role", "tablist");

            output.Content.AppendHtml(await output.GetChildContentAsync(false));

        }
    }

[HtmlTargetElement("tabs")]
public class TabTagHelper : TagHelper
{

    public string Id { get; set; }
    public string Nome { get; set; }
    public string Class { get; set; }
    public bool Selected { get; set; }

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        await base.ProcessAsync(context, output);

        output.TagName = "li";
        output.TagMode = TagMode.StartTagAndEndTag;
        output.Attributes.Add("class", "nav-item");
        output.Content.AppendFormat($"<a class='nav-link {Class}' id='{Id}' data-toggle='tab' href='#home' role='tab' aria-controls='home' aria-selected='{Selected}'>{Nome}</a>");

    }

Answer 1

我不太明白这个问题，但我假设你有两个标签助手。一个用于 tabs-nav ，一个用于做自己事情的选项卡。实现这样的目标。在标签助手的 ProcessAsync 方法中，您需要获取子内容并将其附加到输出。你这样做。

//This is the parent that helper
[HtmlTargetElement("tabs-nav")]
public class TabsNavTagHelper : TagHelper
{
    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        await base.ProcessAsync(context, output);
        //Your parent tag helper over logic here
        output.Content.AppendHtml(await output.GetChildContentAsync(false));
    }
}
//This is the child that helper
[HtmlTargetElement("tabs")]
public class TabTagHelper : TagHelper
{
    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        await base.ProcessAsync(context, output);
        //Your child tag helper over logic here
    }
}

Asp .Net Core Bootstrap 4 Tabs 标签助手

Asp .Net Core Bootstrap 4 Tabs tag helper

c#

tag-helpers

asp.net-core