Blazor问题：按F5刷新时NavMenu消失（关联Datatables.net）

问题现象 #

• 使用 DataTables.net 可搜索表格的 Blazor Server 页面，在 OnAfterRenderAsync 渲染表格时，控制台显示与服务器断开连接，2秒后重新连接
• 断开期间 NavMenu 中的控件消失，但 OnInitializedAsync 未重新触发
• 仅F5刷新时出现该问题，正常导航时菜单显示正常；禁用 OnAfterRenderAsync 后菜单不再消失；浏览器回退再F5刷新，菜单会重新显示

权限实现代码 #

注入本地存储服务：

@inject Blazored.LocalStorage.ILocalStorageService oLocalStore

获取权限标识：

IsManager = await oLocalStore.GetItemAsync<string>("Key tag here");

菜单渲染逻辑：

@if (!string.IsNullOrEmpty(IsManager))
{
    @if (IsManager.ToUpper() == "TRUE")
    {
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Self Service</button>
            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                                        <span class="sr-only">Toggle Dropdown</span></button>
            <div class="dropdown-menu">
                <a @onclick="collapsedNavBar" class="dropdown-item" href="/PasswordReset"><span class="oi oi-reload" aria-hidden="true"></span> Password Reset</a>
                <a @onclick="collapsedNavBar" class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a @onclick="collapsedNavBar" class="dropdown-item" href="#">Manager Notes</a>
                <a @onclick="collapsedNavBar" class="dropdown-item" href="#">Company Policies</a>
            </div>
        </div>
    }
}

DataTables.net 初始化代码 #

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        var jQuery = await JSRuntime.InvokeAsync<IJSObjectReference>("$", "table");
        await jQuery.InvokeVoidAsync("DataTable");
    }
}

让 DataTables.net 在 Blazor Server 正常运行的解决方案 #

1. 使用JS隔离避免DOM操作干扰Blazor状态
   Blazor Server依赖SignalR维护组件状态，直接用jQuery操作DOM可能破坏Blazor的DOM diffing机制。改用JS模块隔离调用：

   private IJSObjectReference? _dataTablesModule;
   
   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
       if (firstRender)
       {
           _dataTablesModule = await JS.InvokeAsync<IJSObjectReference>("import", "./datatables-initializer.js");
           await _dataTablesModule.InvokeVoidAsync("initializeDataTable", "table");
       }
   }
   
   public async ValueTask DisposeAsync()
   {
       if (_dataTablesModule is not null)
       {
           await _dataTablesModule.DisposeAsync();
       }
   }
   

   对应的datatables-initializer.js文件：

   export function initializeDataTable(tableSelector) {
       $(document).ready(function() {
           $(tableSelector).DataTable();
       });
   }
   

2. 确保权限数据提前加载并触发渲染
   将权限判断移至OnInitializedAsync，并主动触发状态更新：

   private string? IsManager { get; set; }
   
   protected override async Task OnInitializedAsync()
   {
       IsManager = await oLocalStore.GetItemAsync<string>("Key tag here");
       StateHasChanged(); // 强制组件更新渲染
   }
   

3. 优化SignalR连接配置
   在Program.cs中调整SignalR参数，提升连接稳定性：

   builder.Services.AddServerSideBlazor()
       .AddHubOptions(options =>
       {
           options.ClientTimeoutInterval = TimeSpan.FromSeconds(30);
           options.HandshakeTimeout = TimeSpan.FromSeconds(15);
       });
   

可靠的Blazor原生替代组件 #

• Blazorise DataGrid：完全原生Blazor实现，支持分页、排序、搜索，无需依赖jQuery，与Blazor Server状态管理兼容良好
• Radzen Blazor DataGrid：开箱即用的表格组件，内置分页、排序、筛选功能，提供丰富的自定义选项
• MatBlazor DataTable：基于Material Design的Blazor表格组件，支持所有核心数据操作功能，适配Blazor Server环境

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