Bootstrap3.3.7升4.0.0后Modal加载PartialView为空，旧版为何无需额外JS？

这是个典型的Bootstrap版本迭代带来的功能差异问题，我来给你理清楚核心原因：

核心区别：Modal远程内容加载的原生支持 #

在Bootstrap 3.3.7中，Modal组件原生内置了远程内容加载功能——它会自动识别带有data-toggle="modal"和href（或者data-remote属性）的触发元素，当你点击按钮/链接时，Bootstrap会帮你完成这些操作：

• 拦截点击事件，阻止默认跳转
• 发起AJAX请求获取href指向的PartialView内容
• 自动把获取到的内容插入到Modal的.modal-content区域
• 甚至还默认提供了内容缓存（可以通过data-cache="false"关闭）

这也是你旧版本代码能正常运行的原因：Bootstrap 3帮你把AJAX加载和内容插入的逻辑都封装好了，不需要自己写JS。

但到了Bootstrap 4.0.0，官方完全移除了Modal的原生远程加载功能。官方团队做这个改动的目的是让Modal组件更轻量化，同时把远程内容加载的控制权完全交给开发者——这样你可以更灵活地定制加载逻辑（比如添加加载动画、错误提示、自定义请求头等）。

你添加的JS脚本做了什么？ #

你后来添加的那段脚本，其实就是手动实现了Bootstrap 3中原生提供的逻辑：

$(function () {
    // 监听Modal即将显示的事件
    $('#modal-container').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget); // 获取触发Modal的按钮
        var url = button.attr("href"); // 获取PartialView的地址
        var modal = $(this);
        // 把PartialView内容加载到Modal的content区域
        modal.find('.modal-content').load(url);
    });
    // 监听Modal隐藏的事件，清空内容避免缓存影响下次打开
    $('#modal-container').on('hidden.bs.modal', function () {
        $(this).removeData('bs.modal');
        $('#modal-container .modal-content').empty();
    });
});

它通过监听Bootstrap Modal的show.bs.modal和hidden.bs.modal事件，手动完成了AJAX请求、内容插入和缓存清理的工作，补上了Bootstrap 4移除的原生功能。

总结 #

简单来说：

• Bootstrap 3.3.7内置了Modal加载远程PartialView的逻辑，所以你不需要额外写JS
• Bootstrap 4.0.0移除了这个内置逻辑，需要开发者自己通过JS实现远程内容的加载和插入

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