.NET 8 Blazor中InteractiveWebAssembly模式下Flowbite JS失效问题

核心问题原因 #

• 未添加@rendermode InteractiveWebAssembly时：页面采用静态服务器渲染（SSR），Blazor的交互式运行环境未激活，因此@onclick这类Blazor交互事件无法触发；但Flowbite在页面首次加载时完成了DOM事件绑定，抽屉组件正常工作。
• 添加@rendermode InteractiveWebAssembly后：Blazor WebAssembly运行时接管组件渲染，组件会动态更新DOM结构，Flowbite初始绑定的事件因DOM重渲染丢失，导致抽屉失效；此时Blazor的交互环境已激活，@onclick事件正常工作。

解决方案一：手动重新初始化Flowbite组件 #

利用Blazor组件的生命周期钩子，在DOM更新完成后重新初始化Flowbite组件，恢复事件绑定。

1. 修改Razor组件代码
   在使用Flowbite抽屉的组件中，重写OnAfterRenderAsync方法：

@inject IJSRuntime JSRuntime

<button data-drawer-target="drawer-example" data-drawer-show="drawer-example" aria-controls="drawer-example" type="button">
    New Appointment
</button>
<div id="drawer-example" aria-labelledby="drawer-label">
    <!-- 抽屉内容 -->
</div>
<button id="blazor" @onclick="SomeFun">触发Blazor事件</button>

@code {
    private void SomeFun()
    {
        // 你的Blazor事件逻辑
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // 首次渲染后初始化，若组件动态更新可去掉firstRender判断
        await JSRuntime.InvokeVoidAsync("initFlowbiteDrawers");
        await base.OnAfterRenderAsync(firstRender);
    }
}

2. 在site.js中添加初始化函数

// 初始化所有Flowbite抽屉组件，根据Flowbite版本调整构造函数（部分版本为flowbite.Drawer）
window.initFlowbiteDrawers = function() {
    const drawerTriggers = document.querySelectorAll('[data-drawer-target]');
    drawerTriggers.forEach(trigger => {
        new Drawer(trigger);
    });
};

解决方案二：封装Flowbite为Blazor组件（更优雅） #

将Flowbite抽屉封装成Blazor组件，用Blazor事件替代原生DOM事件绑定，从根源避免DOM重渲染导致的问题。

1. 创建Blazor抽屉组件FlowbiteDrawer.razor

<button @onclick="ToggleDrawer" type="button" class="px-4 py-2 bg-blue-600 text-white rounded">
    @TriggerText
</button>

<div id="@DrawerId" class="fixed inset-0 z-50 @(IsOpen ? "" : "hidden") bg-black/50 flex">
    <div class="w-80 bg-white dark:bg-gray-800 p-4">
        <h3 id="drawer-label" class="text-lg font-semibold">@Title</h3>
        <button @onclick="ToggleDrawer" class="absolute top-4 right-4 text-gray-500">×</button>
        @ChildContent
    </div>
</div>

@code {
    [Parameter] public string TriggerText { get; set; } = "New Appointment";
    [Parameter] public string Title { get; set; } = "抽屉标题";
    [Parameter] public string DrawerId { get; set; } = "drawer-example";
    [Parameter] public RenderFragment? ChildContent { get; set; }

    private bool IsOpen { get; set; }

    private void ToggleDrawer()
    {
        IsOpen = !IsOpen;
    }
}

2. 使用封装后的组件

<FlowbiteDrawer TriggerText="New Appointment" Title="新建预约">
    <!-- 抽屉内支持Blazor交互元素 -->
    <button @onclick="HandleSubmit" class="mt-4 px-3 py-1 bg-green-600 text-white rounded">提交</button>
</FlowbiteDrawer>

@code {
    private void HandleSubmit()
    {
        // 处理提交逻辑
    }
}

补充说明 #

• 若需兼容更多Flowbite组件（如模态框、下拉菜单），可在site.js编写全局初始化函数initFlowbiteAll()，在组件的OnAfterRenderAsync中调用。
• 避免全局禁用交互式渲染：仅给需要交互的组件添加@rendermode InteractiveWebAssembly，平衡Flowbite和Blazor的功能需求。

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