.NET7 Blazor托管项目集成MudBlazor后直接URL访问FetchData报错

问题分析 #

直接通过URL访问FetchData页面时，MudDrawer在OnAfterRenderAsync阶段调用UpdateHeight()方法，此时DOM元素引用mudElementRef尚未初始化完成，导致JS互操作调用失败。移除Bootstrap后的脚本加载顺序问题也可能加剧这个情况。

解决步骤 #

1. 修正MudBlazor脚本加载顺序 #

在wwwroot/index.html中，确保MudBlazor脚本优先于Blazor核心脚本加载：

<script src="_content/MudBlazor/MudBlazor.min.js"></script>
<script src="_framework/blazor.webassembly.js"></script>

2. 延迟MudDrawer的JS操作触发 #

如果使用自定义布局或组件包含MudDrawer，在OnAfterRenderAsync中增加元素引用检查，确保DOM就绪后再执行更新：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await base.OnAfterRenderAsync(firstRender);
    if (firstRender && MyDrawer.ElementReference != null)
    {
        await MyDrawer.UpdateHeight();
    }
}

注：MyDrawer是你页面/布局中MudDrawer实例的引用名称

3. 启用WebAssembly预渲染 #

在Program.cs中配置预渲染，让组件在服务器端完成初始渲染，减少客户端DOM就绪问题：

builder.Services.AddMudServices();
// 保留你的认证、HttpClient等配置
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

同时修改_Host.cshtml的组件渲染模式：

<component type="typeof(App)" render-mode="WebAssemblyPrerendered" />

4. 等待认证状态加载完成 #

直接URL访问时，认证流程可能延迟组件渲染，在布局组件中添加认证状态判断，确保用户认证完成后再渲染MudDrawer：

@inject AuthenticationStateProvider AuthStateProvider

@if (IsAuthenticated)
{
    <MudDrawer>
        <!-- Drawer内容 -->
    </MudDrawer>
    @Body
}
else
{
    <MudCircularProgress />
}

@code {
    private bool IsAuthenticated { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
        IsAuthenticated = authState.User.Identity.IsAuthenticated;
    }
}

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