Question

我正在ASP.NET MVC应用程序的.cshtml视图中实现fullcalendar（请参阅fullcalendar.io）。我已将所有javascript代码插入index.cshtml文件中，但未在浏览器中显示日历。 fullcalendar所需的文件也会导入index.cshtml文件。

代码

@{
    ViewData["Title"] = "Home Page";
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="@Url.Content("~/calendar-js/jquery.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/calendar-js/jquery-ui.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/calendar-js/moment.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/calendar-js/fullcalendar.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/calendar-js/fullcalendar.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/calendar-css/fullcalendar.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/calendar-css/fullcalendar.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/calendar-css/fullcalendar.print.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/calendar-css/fullcalendar.print.min.css")" rel="stylesheet" type="text/css" />

我得到了

“TypeError：$（...）。fullCalendar不是函数”

浏览器控制台中出现

错误。

我发现这是jQuery的一个问题，我在浏览器的网络选项卡中看到jQuery似乎加载了两次。首先是我在 .cshtml 文件中引用的jQuery文件，以及_LayOut.cshtml文件中似乎需要的另一个jQuery文件：

<environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

我试过了：

在没有该文件的jQuery引用的情况下运行index.cshtml。它只是让它变得更糟，因为我在浏览器控制台中遇到了“jQuery not found”错误。
使用所有jQuery引用运行index.cshtml文件，但我删除了_LayOut.cshtml文件中的jQuery引用。 fullcalendar出现了，但是以一种奇怪的方式出现了。所以我的结论是这两个jQuery引用相互冲突。虽然全日历出现了，但我不认为这样做是正确的。
CDN引用而不是本地文件。它没有成功。

如何解决jQuery导入冲突的这个问题？

ASP.NET MVC如何防止jquery加载两次？

0 个答案: