ASP.NET MVC中解决jQuery重复加载致fullCalendar失效问题

这种因为jQuery重复加载引发的插件找不到的问题真的很常见，我来给你几个针对性的解决办法：

方案一：利用MVC的@section管理脚本加载顺序（推荐） #

ASP.NET MVC的布局页（_Layout.cshtml）通常会预留@RenderSection("Scripts", required: false)的位置，用来让子视图注入需要在页面最后加载的脚本。你可以这么做：

1. 删掉index.cshtml里所有的jQuery引用，只保留fullCalendar的CSS和JS文件引用（注意JS要放到后面）
2. 在index.cshtml里把初始化fullCalendar的代码放到@section Scripts块中，确保它在布局页的jQuery之后加载：

@section Scripts {
    <!-- 引入fullCalendar的JS文件 -->
    <script src="~/Scripts/fullcalendar.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#calendar').fullCalendar({
                // 你的日历配置项
            });
        });
    </script>
}

这样做的原因是：布局页的jQuery会先加载，然后才会渲染这个section里的脚本，既避免了重复加载，又保证了插件在jQuery之后初始化，不会出现“jQuery未找到”或者“fullCalendar不是函数”的错误。

方案二：使用jQuery.noConflict()隔离冲突 #

如果因为某些原因你没法修改布局页的jQuery引用，也可以用noConflict()来处理重复加载的问题：

1. 保留index.cshtml里的jQuery引用，但在初始化fullCalendar之前添加以下代码：

// 释放$的控制权，恢复之前的jQuery对象
var $j = jQuery.noConflict(true);

// 用$j代替$来调用fullCalendar
$j(document).ready(function() {
    $j('#calendar').fullCalendar({
        // 你的配置项
    });
});

这个方法的原理是把第二次加载的jQuery对象重新命名，避免覆盖布局页里的jQuery，同时保证fullCalendar绑定到正确的jQuery实例上。

方案三：统一管理全局脚本加载 #

你还可以把jQuery和fullCalendar的脚本都统一放到布局页里，然后在index.cshtml里只写初始化代码：

1. 在_Layout.cshtml的@RenderSection("Scripts")之前引入jQuery和fullCalendar的JS文件
2. index.cshtml里只保留初始化脚本，放到@section Scripts中，不需要再引用任何JS文件

这样整个项目的脚本加载更统一，从根源上避免重复加载的问题。

提醒一下：之前你删除_Layout里的jQuery后日历显示异常，大概率是因为布局页里其他依赖jQuery的组件（比如导航、表单验证之类的）失效了，所以最好不要轻易删除布局页的全局jQuery引用。

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