ASP.NET MVC Как я могу предотвратить двойную загрузку jquery?
Я реализую полный календарь (см. fullcalendar.io) в представлении .cshtml в приложении ASP.NET MVC. Я вставил весь код javascript в файл index.cshtml, но он не отображал календарь в браузере.
Файлы, необходимые для полного календаря, также импортируются в файл 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 is not a function"
ошибка в консоли браузера.
Я обнаружил, что это проблема с jQuery, и я видел на вкладке «Сеть» своего браузера, что jQuery, кажется, загружается дважды. Сначала файл jQuery, на который я ссылался в моем файле .cshtml, и другой файл jQuery, который, по-видимому, необходим в файле _LayOut.cshtml:
<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>
Я пытался:
- для запуска
index.cshtmlбез ссылки jQuery на этот файл. Это только усугубило ситуацию, потому что я получал в консоли браузера ошибки типа «jQuery not found». - Чтобы запустить файл
index.cshtmlсо всеми ссылками jQuery, но я удалил ссылку jQuery в файле_LayOut.cshtml. Полноценный календарь появился, но странным образом. Итак, я пришел к выводу, что эти две ссылки jQuery противоречат друг другу. Хотя появился fullcalendar, я не думаю, что это правильно. - Ссылки на CDN вместо локальных файлов. Это не сработало.
Как решить эту проблему конфликтующего импорта jQuery?
@Nikolaus Thansk за ответ. Я уже пробовал это, но не смог найти файл. Я нашел временный обходной путь (за исключением файлов jQuery в файле _LayOut), но я тоже не думаю, что это реальное решение.
Если вы не используете его в своем _Layout.cshtml, это не должно быть проблемой.
вы включили JS, CSS и print-CSS fullCalendar по два раза в каждом случае. Вы понимаете разницу между файлами .js и .min.js? Один - это просто сжатая версия другого. .js (и .css) следует использовать в сценариях отладки, .min.js (и .min.css) предназначены для «живого» использования - когда небольшой размер файла важнее, чем способность понимать код.
И да, не включайте jQuery дважды. Способ «предотвратить двойную загрузку jQuery» - это ... не включать его дважды на свою страницу. Непонятно, почему он был недействителен, когда вы запускали его с jQuery, включенным только через страницу макета, но, возможно, у вас была неправильная версия jQuery или что-то в этом роде, или, возможно, он загружен слишком поздно, после запуска кода fullCalendar это не так ясно из вашего кода, так ли это. В любом случае вы должны убедиться, что он, а также любой другой скрипт или файл CSS никогда не включается дважды, иначе вы получите непредсказуемые результаты.
P.S. вы также не установили правильный медиа-запрос в CSS fullcalendar "print", вероятно, поэтому он проявляется "странным образом" - то есть стили режима печати переопределяют стили режима экрана. Вам нужен атрибут media='print' в вашей записи CSS для печати
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Попробуйте использовать тот же файл. Измените ссылку на тот же путь к файлу.