.NET 8/MudBlazor 7升级后Blazor WASM弹窗无法显示求助

我从.NET 6开发的纯Blazor WebAssembly（WASM）应用，升级到.NET 8+MudBlazor 7后弹窗无法正常显示。仅适配了MudBlazor 7的破坏性变更，未修改其他代码，此前功能完全正常。

相关代码片段 #

MainLayout.razor #

<MudThemeProvider IsDarkMode="@_isDarkMode" Theme="_theme"/>
<MudPopoverProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>

ViewModel代码 #

public sealed class EditProductViewModel
{
    public EditProductViewModel(IDialogService dialogService)
    {
        _dialogService = dialogService.ThrowIfNull();

        // 配置Rx交互层的公开API
        _getThingInteraction.RegisterHandler(GetThingFromDialog);
    }

    public async Task AddThing(ProductFormat productFormat)
    {
        using var _ = _logger.AutoLogInOut();
        var result = await _getThingInteraction.Handle(Unit.Default);
        if (result != null)
        {
            productFormat.ThingDetails.AddThing(result);
            StateChanged();
        }
    }

    private async Task GetThingFromDialog(IInteractionContext<Unit, Thing> context)
    {
        using var _ = _logger.LogTraceInOut();
        var parameters = new DialogParameters
            {
                [nameof(SelectThingDialog.Things)] = ThingDropDown
            };
        var dialog = await _dialogService.ShowAsync<SelectThingDialog>("Select a thing", parameters);
        var result = await dialog.Result;
        context.SetOutput(!result?.Canceled ?? false
            ? result.Data as Thing
            : null);
    }

    private readonly IDialogService _dialogService;
    private readonly Interaction<Unit, Thing> _getThingInteraction = new();
}

页面按钮代码 #

<MudButton Class="pull-right"
           Color="Color.Info"
           Variant="Variant.Filled"
           StartIcon="@Icons.Material.Filled.Add"
           OnClick="() => BindingContext.AddThing(productFormat)">
    Add Thing
</MudButton>

问题现象 #

点击按钮后，日志显示GetThingFromDialog已被调用，但弹窗始终不显示：

[ VRB ][ wrkr : 1 ] myApp.Portal.Pages.Features.Products.EditProductViewModel : >> GetThingFromDialog

已尝试的无效操作 #

• 修改RenderMode：因WASM不支持Interactive Service失败；
• 给所有MudBlazor Provider指定InteractiveWebAssembly渲染模式，问题依旧：

<MudThemeProvider IsDarkMode="@_isDarkMode" Theme="_theme"  @rendermode="RenderMode.InteractiveWebAssembly"/>
<MudPopoverProvider @rendermode="RenderMode.InteractiveWebAssembly"/>
<MudDialogProvider  @rendermode="RenderMode.InteractiveWebAssembly"/>
<MudSnackbarProvider  @rendermode="RenderMode.InteractiveWebAssembly"/>

解决方案 #

1. 统一渲染上下文配置 #

在.NET 8的渲染模式体系下，MudBlazor的Provider必须和触发弹窗的组件处于同一交互渲染上下文：

• 如果是全WASM交互应用，直接在App.razor的Router上设置全局渲染模式，无需单独给Provider加@rendermode：

<Router AppAssembly="@typeof(App).Assembly" 
        @rendermode="RenderMode.InteractiveWebAssembly">
    <!-- 其他路由内容 -->
</Router>

• 如果是混合渲染场景，确保包含MudDialogProvider的布局组件和触发弹窗的页面组件使用相同的渲染模式。

2. 验证DialogService注入范围 #

检查Program.cs中IDialogService的注册方式，确保是作用域注入（Scoped）：

builder.Services.AddScoped<IDialogService, DialogService>();

MudBlazor默认会正确注册，但升级过程中可能出现配置覆盖，需确认无冲突。

3. 移除弹窗组件的独立渲染模式 #

如果SelectThingDialog组件单独设置了@rendermode属性，会导致弹窗无法正常挂载。移除该属性，让组件继承父级（DialogProvider）的渲染模式。

4. 检查状态更新逻辑 #

如果ViewModel中的StateChanged()方法未正确调用InvokeAsync(StateHasChanged)，可能导致UI更新延迟。可临时在弹窗调用后手动触发状态更新排查：

private async Task GetThingFromDialog(IInteractionContext<Unit, Thing> context)
{
    using var _ = _logger.LogTraceInOut();
    var parameters = new DialogParameters
        {
            [nameof(SelectThingDialog.Things)] = ThingDropDown
        };
    var dialog = await _dialogService.ShowAsync<SelectThingDialog>("Select a thing", parameters);
    // 手动触发状态更新（仅用于排查）
    await InvokeAsync(StateHasChanged); 
    var result = await dialog.Result;
    context.SetOutput(!result?.Canceled ?? false
        ? result.Data as Thing
        : null);
}

若此操作能显示弹窗，需修复StateChanged()方法的实现。

5. 排查MudBlazor样式与容器问题 #

• 确认MudDialogProvider未被嵌套在display: none或overflow: hidden的容器中；
• 检查自定义主题_theme是否覆盖了Dialog的z-index或定位样式，导致弹窗被其他元素遮挡。

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