MVC 5中jQuery重复加载引发日历选择报错问题排查

第一步：彻底移除重复的jQuery引用 #

直接删掉Index.cshtml里引入jQuery 3.5.1的代码，仅保留_Layout.cshtml中通过Bundle加载的jQuery 3.3.1。

第二步：排查并解决$未定义问题 #

出现该报错，核心原因是页面脚本执行时机早于jQuery加载完成，或者Bundle配置存在问题：

• 调整Bundle加载位置：确保_Layout.cshtml里的@Scripts.Render("~/bundles/jquery")放在</body>标签之前，而非<head>区域。
• 规范脚本区块使用：把Index.cshtml中所有与日历相关的脚本，全部包裹在@section Scripts区块内，MVC会自动将这些脚本渲染到jQuery加载完成之后的位置。示例代码：

@section Scripts {
    <script src="~/Scripts/js-year-calendar.min.js"></script>
    <script>
        // 日历初始化代码
        $('#calendar').calendar({
            enableRangeSelection: true,
            // 其他配置项
        });
    </script>
}

• 校验Bundle配置：打开App_Start/BundleConfig.cs，确认jQuery的Bundle配置路径正确，指向3.3.1版本文件：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-3.3.1.min.js"));

第三步：修复jquery-ui的Cannot read properties of undefined (reading 'empty')错误 #

该错误源于重复加载jQuery后，旧版本jquery-ui绑定的jQuery实例被覆盖。确保仅加载一次jQuery后，还要保证jquery-ui的引用顺序在jQuery之后：

• 若jquery-ui通过Bundle加载，在BundleConfig.cs中配置依赖关系，或直接将其放在jQuery之后加载：

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
            "~/Scripts/jquery-ui.min.js"));

在_Layout中按顺序加载：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")

• 若项目中jquery-ui非必需，可直接移除，避免不必要的冲突（js-year-calendar本身不依赖jquery-ui）。

第四步：最终验证 #

1. 清理浏览器缓存，避免旧缓存干扰
2. 运行项目，打开浏览器控制台（F12）检查是否存在加载报错
3. 测试日历的日期范围选择功能，确认异常消失

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