.NET8 Blazor集成Fluent UI时DialogProvider未找到错误求助

问题场景 #

使用.NET8 + Blazor + Fluent UI开发时，已在MainLayout末尾添加<FluentDialogProvider/>，但调用IDialogService.ShowDialogAsync时仍收到以下错误：

未处理的异常呈现组件: <FluentDialogProvider /> 需要添加到应用程序/站点的主布局中。(参数 'OnShowAsync')

System.ArgumentNullException: <FluentDialogProvider /> 需要添加到应用程序/站点的主布局中。(参数 'OnShowAsync')
   在 Microsoft.FluentUI.AspNetCore.Components.DialogService.ShowDialogAsync[TData](Type dialogComponent, TData data, DialogParameters parameters) 位置 /_/src/Core/Components/Dialog/Services/DialogService-Dialog.cs:行 17
   在 Microsoft.FluentUI.AspNetCore.Components.DialogService.ShowDialogAsync[TDialog](DialogParameters parameters) 位置 /_/src/Core/Components/Dialog/Services/DialogService-Dialog.cs:行 35
   在 Components.Layouts.MainLayout.Components.Header.ToggleThemeHandler() 位置 **\Components\Layouts\MainLayout\Components\Header.razor:行 36

相关核心代码如下：

Program.cs #

builder.Services.AddHttpClient();
builder.Services.AddFluentUIComponents();

MainLayout.razor #

<FluentLayout>
    <FluentHeader>
        <Header/>
    </FluentHeader>

    <FluentStack Orientation="Orientation.Horizontal" Width="100%" Class="page--container">
        <NavMenu/>

        <FluentBodyContent>
            @Body
        </FluentBodyContent>
    </FluentStack>
</FluentLayout>

<FluentDialogProvider/>
<FluentToastProvider/>
<FluentTooltipProvider/>

Header.razor #

[Inject] public IDialogService DialogService { get; set; }

private async Task ToggleThemeHandler()
{
    var dialog = DialogService.ShowDialogAsync<MenuPanel>(new DialogParameters
    {
        Alignment = HorizontalAlignment.Right
    });
    await dialog;
}

解决方案 #

1. 显式注册对话框服务 #

虽然AddFluentUIComponents()已包含对话框服务注册，但显式添加可确保服务注入顺序正确，避免潜在的初始化问题：
修改Program.cs：

builder.Services.AddHttpClient();
builder.Services.AddFluentUIComponents();
builder.Services.AddDialogService(); // 显式注册对话框服务

2. 确认MainLayout的全局有效性 #

确保MainLayout是应用的全局默认布局，所有路由页面都使用该布局。若存在其他自定义布局组件，需在对应布局中也添加<FluentDialogProvider/>，或调整路由配置统一使用MainLayout。

3. 确保FluentDialogProvider始终被渲染 #

检查<FluentDialogProvider/>是否被条件渲染（如@if语句）包裹，必须保证它在布局的渲染树中始终存在，不能被动态隐藏。当前代码将其放在FluentLayout外部的位置是正确的，无需调整，但需确认无隐藏逻辑。

4. 修正DialogService调用的等待方式 #

确保正确等待对话框返回结果，避免异步调用的潜在上下文问题：
修改Header.razor中的方法：

private async Task ToggleThemeHandler()
{
    var dialogResult = await DialogService.ShowDialogAsync<MenuPanel>(new DialogParameters
    {
        Alignment = HorizontalAlignment.Right
    });
    // 可根据dialogResult处理对话框返回值（如需）
}

5. 验证组件注入范围 #

Header作为MainLayout的子组件，IDialogService注入应正常，但可尝试在MainLayout中注入服务并通过参数传递给Header，排除子组件注入异常：
在MainLayout.razor中添加：

[Inject] public IDialogService DialogService { get; set; }

然后修改Header引用：

<Header DialogService="@DialogService"/>

在Header.razor中改为参数接收：

[Parameter] public IDialogService DialogService { get; set; }

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