ASP.NET Core MVC添加布局页后Modal弹窗失效问题求助

基于ASP.NET Core MVC开发的带Modal弹窗CRUD项目，原运行正常，引入_LayoutDashboard.cshtml布局页后所有弹窗停止工作，移除布局页后恢复正常，需排查解决。

核心问题分析及修复方案 #

1. 缺少jQuery依赖 #

自定义弹窗逻辑的site.js使用了jQuery语法，但_LayoutDashboard.cshtml未引入jQuery库（Bootstrap 5不再依赖jQuery，但你的Ajax逻辑需要它）。

• 修复：在布局页</body>前添加jQuery引用：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

2. Bootstrap版本语法不兼容 #

原弹窗逻辑使用Bootstrap旧版的.modal('show')jQuery调用语法，但布局页引入的Bootstrap 5已改用原生JS API，不再支持jQuery方式调用模态框。

• 修复：修改site.js中的弹窗控制代码：
  显示弹窗：

  // 替换原 PlaceHolderElement.find('.modal').modal('show');
  const modalElement = PlaceHolderElement.find('.modal')[0];
  const modal = new bootstrap.Modal(modalElement);
  modal.show();
  

  关闭弹窗：

  // 替换原 PlaceHolderElement.find('.modal').modal('hide');
  const modalElement = PlaceHolderElement.find('.modal')[0];
  const modal = bootstrap.Modal.getInstance(modalElement);
  if (modal) modal.hide();
  

3. JS文件中转义符多余 #

site.js中data-toggle=\"ajax-modal\"的转义符属于错误写法，JS文件内不需要转义双引号，会导致选择器无法匹配按钮元素。

• 修复：将site.js中所有转义的双引号去掉：
  把$('button[data-toggle=\"ajax-modal\"]')改为$('button[data-toggle="ajax-modal"]')，[data-save=\"modal\"]改为[data-save="modal"]。

4. 未引入site.js脚本 #

布局页中未引用弹窗逻辑的site.js，导致自定义Ajax事件未绑定。

• 修复：在布局页脚本区域添加site.js引用（路径根据实际位置调整）：

<script src="~/js/site.js"></script>

5. 模态框关闭按钮样式兼容（可选优化） #

部分视图中的关闭按钮使用旧版close类，Bootstrap 5推荐使用btn-close类以保证样式正常：

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

修复后关键代码示例 #

修改后的site.js #

$(function () {
    var PlaceHolderElement = $('#PlaceHolderHere');
    $('button[data-toggle="ajax-modal"]').click(function (event) {
        var url = $(this).data('url');
        var decodedUrl = decodeURIComponent(url);
        $.get(decodedUrl).done(function (data) {
            PlaceHolderElement.html(data);
            const modalElement = PlaceHolderElement.find('.modal')[0];
            const modal = new bootstrap.Modal(modalElement);
            modal.show();
        })
    })
    PlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
        var form = $(this).parents('.modal').find('form');
        var actionUrl = form.attr('action');
        var sendData = form.serialize();
        $.post(actionUrl, sendData).done(function (data) {
            const modalElement = PlaceHolderElement.find('.modal')[0];
            const modal = bootstrap.Modal.getInstance(modalElement);
            if (modal) modal.hide();
            // 可选：刷新页面数据
            window.location.reload();
        })
    })
})

修改后的_LayoutDashboard.cshtml脚本区域 #

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
        crossorigin="anonymous"></script>
<script src="~/dashboard/script.js"></script>
<script src="~/js/site.js"></script>
@await RenderSectionAsync("Scripts", required: false)

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