ASP .NET Core Bootstrap 4 Tabs标签帮助器 [英] Asp .Net Core Bootstrap 4 Tabs tag helper

问题描述

我正在尝试渲染

<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>

问题是我不知道如何实现嵌套标签.我为这样的引导卡制作了一个

Problem is that i have no idea how can i achieve nested tags. I have made one for bootstrap card like this

 [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());
        }
    }

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

Which basically lets me wrap any content i want in

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

    //Content

</card>

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

I would like to know at least how can i create the nested tags as showed in the prefered output as I cannot find any example with something similar on microsoft docs

编辑

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

So I implemented based on the answwer in here and it seems to achieve what i wanted

 [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>");

    }

推荐答案

我不太了解这个问题，但是我假设您有两个标签助手.一种用于制表符导航，另一种用于制表符，可以完成自己的工作.为了实现这样的目标.在标记助手的ProcessAsync方法中，您需要获取子内容并将其附加到输出中.你是这样子的.

I couldn't really understand the question much, But I'm assuming that you have two tag helpers. One for tabs-nav and one for tab that do their own thing. To achieve something like this. In the ProcessAsync method of your tag helper, you need to get the child content and append that to the output. You do that like this.

//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标签帮助器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！