如何在ASP.NET中使用Bootstrap 5模态框？升级后模态框失效如何解决

核心修复步骤 #

你遇到的问题是Bootstrap 5的API调用规则变更、前后端触发逻辑冲突、组件类名更新三个常见升级问题叠加导致的，可按以下步骤逐一修复：

• 1、调整模态框调用语法，适配Bootstrap 5的原生API
  Bootstrap 5 不再强制依赖jQuery，原有基于jQuery的$('#myModal').modal()语法需要前置加载jQuery才能生效，推荐直接改用原生JS调用，修改你的服务端注册脚本：

protected void showmodal(object sender, EventArgs e)
{
    // 替换原有jQuery写法为Bootstrap 5原生API
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", 
    @"const myModal = new bootstrap.Modal(document.getElementById('myModal'), {
        backdrop: 'static', 
        keyboard: false
    });
    myModal.show();", true);
    // 注意：确认此处调用Update的控件ID和模态框包裹的UpdatePanel ID对应，你代码中UpdatePanel ID为UpdatePanel2，需保持ID统一
    UpdatePanel2.Update();
}

• 2、移除按钮的重复触发属性
  你的按钮同时绑定了服务端OnClick事件和前端data-bs-toggle模态框触发属性，两者会产生冲突，删除按钮上的data-bs-toggle="modal" data-bs-target="#myModal"属性即可：

<asp:Button runat="server" ID="ShowModal" OnClick="showmodal" UseSubmitBehavior="false" Text="TEST MODAL" CssClass="btn" />

• 3、更新关闭按钮的类名适配Bootstrap 5
  Bootstrap 5 中原有close类已废弃，替换为btn-close类，无需手动写×符号，默认自带关闭样式：

<div class="modal-header">
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    <h4 class="modal-title">
        <asp:Label ID="Label5" runat="server" Text=""></asp:Label>
    </h4>
</div>

• 4、确认基础依赖引入正确
  确保页面已按正确顺序引入Bootstrap 5的核心CSS、JS文件，如果需要兼容原有的jQuery写法，需在Bootstrap JS加载前先引入jQuery库即可兼容旧语法。

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