.NET 8 RC2中Blazor通过JSInterop控制Bootstrap模态框失效问题

我知道我的做法可能不符合.NET 8 Blazor的规范，但仍想分享以帮助有类似.NET 7迁移问题的开发者。此前（直到.NET 8 RC1），我在Blazor页面中通过JSInterop调用JS方法打开/关闭Bootstrap模态框：

JS代码 #

var selectPOModal = new bootstrap.Modal('#selectPOModal', {
});

var closePOModal = () => {
    selectPOModal.hide();
}

var openPOModal = () => {
    selectPOModal.show();
}

export { closePOModal, openPOModal };

Razor组件代码 #

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            jsModule = await JS.InvokeAsync<IJSObjectReference>(
                "import", "./Pages/MyComponent.razor.js");
        }
    }

    ...
    private async Task SomethingHappensNeedOpenModal()
    {
        await jsModule.InvokeVoidAsync("openPOModal");
    }
}

升级到.NET 8 RC2后，模态框能正常打开，但内部绑定属性的输入框、调用C#方法的按钮等Blazor受控元素均无响应。请问是否有简单的JS修复方法？还是应该改用Blazor实现Bootstrap模态框的开关逻辑？

问题原因 #

.NET 8 RC2调整了Blazor的DOM事件绑定机制，直接通过JS调用Bootstrap的show()方法时，Blazor无法感知模态框的DOM状态变化，导致内部元素的事件绑定未被正确初始化。

简单JS修复方案 #

在调用show()后手动触发Blazor的DOM更新逻辑，修改JS代码如下：

var openPOModal = () => {
    selectPOModal.show();
    // 触发Blazor重新绑定DOM事件
    if (window.Blazor) {
        window.Blazor.notifyLocationChanged(false);
    }
}

如果需要更精准地针对模态框元素更新，可使用：

var openPOModal = () => {
    selectPOModal.show();
    // 定位模态框内容容器，触发内部Blazor组件重新渲染
    const modalContent = document.querySelector('#selectPOModal .modal-content');
    if (modalContent && window.Blazor) {
        window.Blazor.rootComponents.forEach(component => {
            if (modalContent.contains(component.element)) {
                component.render();
            }
        });
    }
}

推荐的Blazor原生方案 #

从长期维护角度，更建议用Blazor原生逻辑控制模态框的显示隐藏，避免JS与Blazor的DOM状态不一致问题：

1. 用布尔变量绑定模态框的显示状态：

<div class="modal @(IsModalOpen ? "show d-block" : "")" tabindex="-1" id="selectPOModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框内的Blazor受控元素 -->
            <input @bind="InputValue" placeholder="输入内容" />
            <button class="btn btn-primary mt-2" @onclick="HandleButtonClick">触发C#方法</button>
        </div>
    </div>
</div>
@if (IsModalOpen)
{
    <div class="modal-backdrop show"></div>
}

@code {
    private bool IsModalOpen { get; set; }
    private string InputValue { get; set; }

    private void HandleButtonClick()
    {
        // 编写按钮对应的C#逻辑
        Console.WriteLine("按钮被点击，输入值：" + InputValue);
    }

    private void SomethingHappensNeedOpenModal()
    {
        IsModalOpen = true;
        StateHasChanged();
    }
}

这种方式完全由Blazor控制DOM状态，不会出现事件绑定失效问题，也更贴合Blazor组件化开发规范。

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