Blazor页面使用MudBlazor构建基于用户权限的递归动态菜单问题

你可以通过Blazor的递归RenderFragment实现无限层级菜单渲染，不需要拆分独立组件，修改后的完整代码如下：

页面渲染部分 #

@if (menuItems == null)
{
    <div class="spinner"></div>
}
else
{
    @* 从根菜单（ParentID=0）开始渲染 *@
    @RenderMenuItems(0)
}

代码逻辑部分 #

@code {
    // 你的菜单数据源
    private List<MenuItem> menuItems = new();

    // 你原有获取子菜单的方法
    private List<MenuItem> GetChildItems(int ParentID)
    {
        var foundItems = from m in menuItems
                         where m.ParentID == ParentID
                         select m;
        return foundItems.ToList();
    }

    // 核心：递归渲染片段，入参为当前父菜单ID
    private RenderFragment<int> RenderMenuItems = parentId => __builder =>
    {
        var currentLevelItems = GetChildItems(parentId);
        foreach (var item in currentLevelItems)
        {
            var childItems = GetChildItems(item.MenuItemID);
            if (childItems.Any())
            {
                // 有子菜单，渲染MudNavGroup，嵌套调用递归方法渲染子项
                <MudNavGroup Title="@item.ItemName" Icon="@item.Icon" HideExpandIcon="true">
                    @RenderMenuItems(item.MenuItemID)
                </MudNavGroup>
            }
            else
            {
                // 无子菜单，渲染导航链接，记得替换为你MenuItem实体对应的字段
                <MudNavLink Href="@item.Url" Match="NavLinkMatch.All" Icon="@item.Icon">
                    @item.ItemName
                </MudNavLink>
            }
        }
    };

    // 你的MenuItem实体示例，可根据实际表结构扩展
    public class MenuItem
    {
        public int MenuItemID { get; set; }
        public string ItemName { get; set; }
        public int ParentID { get; set; }
        public string Url { get; set; }
        public string Icon { get; set; }
    }
}

注意事项 #

• 请根据你的实际数据表结构扩展MenuItem实体的字段，不要使用示例中写死的跳转地址、图标值
• 如果需要加权限控制，直接在GetChildItems方法中增加权限过滤逻辑，仅返回当前用户有权限访问的菜单即可
• MudBlazor原生支持嵌套的MudNavGroup，层级缩进样式会自动适配，无需额外自定义样式

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