.NET 9 Blazor Server切换布局后MudBlazor组件交互失效求助

环境 #

• .NET 9 Blazor Server 空项目
• 全局使用 Interactive Server 渲染模式
• 采用MudBlazor标准配置，未做额外修改

问题现象 #

切换不同布局（如从MainLayout.razor首页进入OtherLayout.razor页面）后，页面内的MudBlazor组件（如MudSelect）交互失效，但布局中的抽屉切换功能正常。具体场景：

• 首次运行/刷新后，第一次进入OtherLayout页面时，MudSelect可正常工作
• 返回MainLayout页面后再次进入OtherLayout页面，MudSelect不再响应点击等交互

MainLayout.razor 代码 #

@inherits LayoutComponentBase

<MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<MudLayout>
    <MudAppBar Elevation="1">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
        <MudText Typo="Typo.h5" Class="ml-3">Application</MudText>
        <MudSpacer />
        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
    </MudAppBar>
    <MudDrawer id="nav-drawer" @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
        <NavMenu />
    </MudDrawer>
    <MudMainContent Class="mt-16 pa-4">
        @Body
    </MudMainContent>
</MudLayout>

<div id="blazor-error-ui" data-nosnippet>
    An unhandled error has occurred.
    <a href="." class="reload">Reload</a>
    <span class="dismiss">🗙</span>
</div>

@code {
    private bool _drawerOpen = true;
    private bool _isDarkMode = true;
    private MudTheme? _theme = null;

    private void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}

OtherLayout.razor 代码 #

@inherits LayoutComponentBase

<MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<MudLayout>
    <MudAppBar Elevation="1">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
        <MudText Typo="Typo.h5" Class="ml-3">Other Layout</MudText>
        <MudSpacer />
        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
    </MudAppBar>
    <MudDrawer id="nav-drawer" @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
        <NavMenu />
    </MudDrawer>
    <MudMainContent Class="mt-16 pa-4">
        @Body
    </MudMainContent>
</MudLayout>

<div id="blazor-error-ui" data-nosnippet>
    An unhandled error has occurred.
    <a href="." class="reload">Reload</a>
    <span class="dismiss">🗙</span>
</div>

@code {
    private bool _drawerOpen = true;
    private bool _isDarkMode = true;
    private MudTheme? _theme = null;

    private void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}

失效的MudSelect组件（/other页面）代码 #

@page "/other"

<MudSelect @bind-Value="stringValue" Label="Select fast-food" HelperText="String" Placeholder="Please Select" AdornmentIcon="@Icons.Material.Filled.Fastfood" AdornmentColor="Color.Primary">
    <MudSelectItem Value="@("Pizza")" Disabled="true">Pizza (Disabled)</MudSelectItem>
    <MudSelectItem Value="@("Burger")">Burger</MudSelectItem>
    <MudSelectItem Value="@("Hotdog")">Hot Dog</MudSelectItem>
</MudSelect>

@code {
    private string stringValue { get; set; }
}

Program.cs 代码 #

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

App.razor 代码 #

<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
    <script src=@Assets["_content/MudBlazor/MudBlazor.min.js"]></script>
</body>

排查方向建议 #

1. 补全MudBlazor服务注册：当前Program.cs中缺少builder.Services.AddMudServices()，MudBlazor组件依赖该注册提供的服务，多次切换布局后可能因服务未正确初始化导致交互失效。
2. 移除重复的全局Provider：两个布局中都重复添加了<MudThemeProvider>、<MudPopoverProvider>等全局组件，这些应该只在根组件（如App.razor）中注册一次，重复注册会引发JS与.NET端的状态冲突。
3. 检查浏览器控制台错误：打开开发者工具Console面板，切换页面后查看是否有JS初始化失败、事件绑定丢失等错误日志，这是定位问题的直接方式。
4. 验证组件生命周期：在/other页面添加OnAfterRenderAsync方法打印日志，确认组件是否正常完成渲染，以及JSinterop是否正确绑定。
5. 单布局测试：暂时将所有页面统一使用MainLayout，验证问题是否确实由布局切换引发。

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