如何在ASP.NET Core Razor Pages中实现自定义标签的嵌套组合？

你要的这种嵌套自定义标签功能可以通过ASP.NET Core内置的Tag Helper实现，完整实现步骤如下：

实现步骤 #

1. 定义Tab存储模型和子标签Tag Helper #

首先创建TabTagHelper对应<tab>子标签，负责捕获tab的标题和内部内容，传递给父级<tabs>标签：

using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Razor.TagHelpers;
using System.Collections.Generic;

// 限定tab标签只能作为tabs的子元素使用
[HtmlTargetElement("tab", ParentTag = "tabs")]
public class TabTagHelper : TagHelper
{
    // 对应<tab>标签的title属性
    public string Title { get; set; }

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

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        // 从父级上下文获取tab存储集合
        var tabsContext = context.Items[typeof(TabsTagHelper)] as List<TabItem>;
        if (tabsContext == null) return;

        // 捕获当前tab内部的所有渲染内容
        var innerContent = await output.GetChildContentAsync();
        tabsContext.Add(new TabItem
        {
            Title = Title,
            Content = innerContent
        });

        // 禁止原始<tab>标签直接输出到页面
        output.SuppressOutput();
    }
}

// 临时存储单个tab信息的模型
public class TabItem
{
    public string Title { get; set; }
    public IHtmlContent Content { get; set; }
}

2. 创建父标签TabsTagHelper #

创建TabsTagHelper对应<tabs>父标签，负责收集所有子tab的信息，最终渲染完整的tabs结构：

using Microsoft.AspNetCore.Razor.TagHelpers;
using System.Text;

[HtmlTargetElement("tabs")]
public class TabsTagHelper : TagHelper
{
    public override void Init(TagHelperContext context)
    {
        // 初始化存储子tab的集合，存入上下文供子标签访问
        context.Items[typeof(TabsTagHelper)] = new List<TabItem>();
        base.Init(context);
    }

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        // 先执行所有子tab的处理逻辑，收集全量tab信息
        await output.GetChildContentAsync();
        var allTabs = context.Items[typeof(TabsTagHelper)] as List<TabItem>;
        if (allTabs == null || !allTabs.Any()) return;

        // 定义外层标签
        output.TagName = "div";
        output.Attributes.Add("class", "custom-tabs");

        // 渲染tab导航栏
        var navHtml = new StringBuilder();
        navHtml.Append("<ul class='tab-header'>");
        for (int i = 0; i < allTabs.Count; i++)
        {
            var activeClass = i == 0 ? "active" : "";
            navHtml.Append($"<li class='tab-item {activeClass}' data-target='tab-pane-{i}'>{allTabs[i].Title}</li>");
        }
        navHtml.Append("</ul>");

        // 渲染tab内容区域
        var contentHtml = new StringBuilder();
        contentHtml.Append("<div class='tab-body'>");
        for (int i = 0; i < allTabs.Count; i++)
        {
            var activeClass = i == 0 ? "active" : "";
            contentHtml.Append($"<div class='tab-pane {activeClass}' id='tab-pane-{i}'>");
            contentHtml.Append(allTabs[i].Content.GetContent());
            contentHtml.Append("</div>");
        }
        contentHtml.Append("</div>");

        // 合并内容输出
        output.Content.AppendHtml(navHtml.ToString());
        output.Content.AppendHtml(contentHtml.ToString());
    }
}

3. 注册Tag Helper #

打开项目的_ViewImports.cshtml文件，添加以下代码注册自定义Tag Helper，注意替换成你自己的项目程序集名称：

@addTagHelper *, 你的项目程序集名称

4. 添加基础样式和交互（可选） #

你可以根据自己的UI需求自定义样式，以下是基础示例：

.tab-header {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    border-bottom: 1px solid #e5e7eb;
}
.tab-item {
    padding: 8px 16px;
    cursor: pointer;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.tab-item.active {
    border-bottom-color: #165dff;
    color: #165dff;
}
.tab-pane {
    display: none;
}
.tab-pane.active {
    display: block;
}

简单的tab切换脚本：

document.querySelectorAll('.tab-item').forEach(tab => {
    tab.addEventListener('click', () => {
        const targetId = tab.dataset.target;
        // 切换导航激活状态
        document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
        tab.classList.add('active');
        // 切换内容显示状态
        document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
        document.getElementById(targetId).classList.add('active');
    });
});

5. 最终使用方式 #

你就可以直接按照需求里的写法调用组件了：

<tabs>
    <tab title="Base info">
        <partial name="BaseInfo" />
    </tab>
    <tab title="Password">
        <partial name="Password" />
    </tab>
    <tab title="Profile picture">
        <partial name="Picture" />
    </tab>
</tabs>

如果需要调整UI结构，只需要修改TabsTagHelper里的渲染逻辑即可，不需要修改调用代码。

内容的提问来源于stack exchange，提问作者Ali EXE