MudMenu点击后MudMenuItem子菜单无法显示的问题求助

问题根源 #

循环渲染MudMenu时，Blazor无法正确跟踪每个菜单的独立状态，加上未显式绑定展开控制参数，导致点击后无法触发子菜单展开。此外，MudMenuItem的文本输出存在冗余引号问题。

修复步骤 #

1. 添加独立状态存储 #

在组件的@code块中，创建字典存储每个菜单的展开状态：

private Dictionary<string, bool> _menuOpenStates = new();

protected override void OnInitialized()
{
    if (categories?.AllCategories != null)
    {
        foreach (var category in categories.AllCategories.Values)
        {
            // 假设CategoryId是分类的唯一标识，用它作为字典键
            _menuOpenStates[category.CategoryId] = false;
        }
    }
}

2. 修改MudMenu渲染代码 #

给每个MudMenu添加唯一Key，绑定展开状态Open，并通过事件切换状态，同时修正MudMenuItem的文本：

@if(categories != null) 
{
    @foreach (var category in categories.AllCategories.Values)
    {
        <MudMenu 
            Key="@category.CategoryId"
            StartIcon="@Icons.Material.Rounded.Grain" 
            EndIcon="@Icons.Material.Filled.KeyboardArrowDown" 
            Label="@category.CategoryName" 
            Color="Color.Primary" 
            Variant="Variant.Filled"
            Open="@_menuOpenStates[category.CategoryId]"
            OnOpen="@(() => _menuOpenStates[category.CategoryId] = true)"
            OnClose="@(() => _menuOpenStates[category.CategoryId] = false)"
        >
            <ChildContent>
                @foreach(var subCategory in category.SubCategories) {
                    <MudMenuItem>@subCategory.Value.CategoryName</MudMenuItem>
                }
            </ChildContent>
        </MudMenu>
    }
}

说明 #

• Key参数：让Blazor能够区分每个MudMenu实例，避免状态复用错误，确保每个菜单拥有独立的渲染上下文。
• 显式状态绑定：通过字典存储每个菜单的展开状态，替代组件内部默认的共享状态，解决循环中状态混乱的问题。
• 移除冗余引号：原代码中MudMenuItem的双引号会被渲染为文本，移除后才能正确显示分类名称。

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