如何在Blazor Server中实现递归嵌套LogModel的折叠展开显示

核心思路：使用递归 Razor 组件替代 MarkupString #

Blazor 原生支持组件递归调用，完全可以规避 MarkupString 无法绑定事件的问题，所有交互逻辑都走原生 Blazor 事件绑定即可实现需求。

步骤1：确认LogModel定义 #

public class LogModel
{
    public string Description { get; set; }
    public bool Collapsed { get; set; } = true; // 默认折叠
    public List<LogModel> Children { get; set; } = new();
}

步骤2：创建递归渲染组件LogNode.razor #

这是实现嵌套渲染的核心，单个组件对应单条LogModel节点，内部调用自身渲染子节点：

<div class="ms-3 my-1">
    <div class="d-flex align-items-center gap-2">
        @* +/-折叠切换按钮 *@
        <button class="btn btn-sm btn-outline-secondary" @onclick="ToggleCollapse" style="width:24px;height:24px;padding:0;">
            @(CurrentLog.Collapsed ? "+" : "-")
        </button>
        <span>@CurrentLog.Description</span>
    </div>

    @* 子节点区域，用Bootstrap collapse类控制显隐 *@
    @if (CurrentLog.Children.Any())
    {
        <div class="@(CurrentLog.Collapsed ? "collapse" : "show") ms-4">
            @foreach (var childNode in CurrentLog.Children)
            {
                <LogNode CurrentLog="childNode" />
            }
        </div>
    }
</div>

@code {
    [Parameter, Required]
    public LogModel CurrentLog { get; set; }

    private void ToggleCollapse()
    {
        CurrentLog.Collapsed = !CurrentLog.Collapsed;
    }
}

步骤3：父页面调用组件 #

只需要传入根层级的LogModel列表即可完成全量渲染：

@page "/loglist"

<h3>嵌套日志列表</h3>
<div class="container mt-3">
    @foreach (var rootLog in RootLogList)
    {
        <LogNode CurrentLog="rootLog" />
    }
</div>

@code {
    // 根日志列表，替换为你的实际业务数据
    private List<LogModel> RootLogList = new();

    protected override void OnInitialized()
    {
        // 模拟构造嵌套测试数据
        RootLogList.Add(new LogModel
        {
            Description = "一级日志1",
            Children = new List<LogModel>
            {
                new LogModel { Description = "二级日志1-1" },
                new LogModel { 
                    Description = "二级日志1-2",
                    Children = new List<LogModel>
                    {
                        new LogModel { Description = "三级日志1-2-1" }
                    }
                }
            }
        });
        RootLogList.Add(new LogModel { Description = "一级日志2" });
    }
}

注意事项 #

• 组件嵌套层级无特殊限制，只要数据结构支持即可正常渲染
• 所有节点的折叠状态直接绑定到LogModel实例本身，节点间状态不会互相干扰
• 全程不需要手动操作DOM，所有显隐逻辑由Blazor数据驱动自动更新

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