ASP.Net Core JS работает в _Layout, но не в основной странице - PullRequest
Новая
       7

ASP.Net Core JS работает в _Layout, но не в основной странице

0 голосов
/ 19 февраля 2019

Я довольно новичок в ASP MVC, поэтому, возможно, я делаю здесь ошибку новичка.

Для моего сайта я хотел иметь стандартизированный заголовок и боковую панель для всех страниц, поэтому я поместил это в _Layout.cshtml и это прекрасно работает.Главная страница указателя для моего приложения (я буду адаптировать ее позже, но, поскольку я только начал, это примерно так же, если это уместно: https://www.wrappixel.com/demos/free-admin-templates/matrix-admin/) содержит ряд графиков и диаграмм, которые я 'Возможно, мне захочется в конечном итоге использовать, поэтому я пытаюсь убедиться, что он остается работоспособным, когда я его настраиваю.

Теперь, если бы мне пришлось вызывать набор файлов JS, а затем вызывать файл инициализации JSиз _Layout.cshtml все диаграммы загружаются без проблем. Однако я считаю, что это плохая практика, поскольку у меня не будет всех этих диаграмм на каждой странице. Поэтому я скопировал и вставил импорт этих файлов JS в свой контентстраницы, но это странным образом приводит к невозможности загрузки диаграмм. Хотя я могу убедиться в том, что в консоли все эти JS-файлы загружались через вкладки отладчика и сети, мой сценарий инициализации завершится ошибкой, так как не может найтиФункция в одном из вышеупомянутых файлов.

Мои две идеи только о том, что есть проблема с тем, как я загружаю рвозраст, или что-то не так с ресурсами, прежде чем их найдут.Я полагаю, что это весь код, используемый для вызова страницы контента: 

<div>
    <partial name="_CookieConsentPartial" />
    <main role="main" class="pb-3">
        @RenderBody()
    </main>
</div>

Другая упомянутая мной возможность - странные 404-е.Всякий раз, когда я обновляю страницу, консоль всегда дает мне несколько из них: 

Source map error: request failed with status 404
Resource URL: https://localhost:5001/vendors/bootstrap/dist/js/bootstrap.min.js
Source Map URL: bootstrap.min.js.map[Learn More]

Они всегда разрешаются, так как я определенно могу найти загрузчик как загруженный ресурс, но мне интересно, находятся ли сценарии вфайл _Layout просто дает им больше времени для разрешения, и, помещая их в фактический файл содержимого, они просто тайм-аут, прежде чем может быть принято какое-либо решение?

Кажется, я не могу найти источники, которые упоминают различиягде вы помещаете JS, кроме идеи не помещать специализированные ресурсы в файл _Layout, очевидно.

Edit

Я начал замечать, что некоторые другие элементы также не работают, поэтому я получилРазочаровал и удалил весь импорт JS из файла _Layout.cshmtl, и это, похоже, решило все проблемы.Я полагаю, невозможно разделить импорт файлов JS, как это?

1 Ответ

0 голосов
/ 20 февраля 2019

Предполагая, что я понял, вы обрабатываете "специфичные для страницы" ресурсы (JS, CSS), используя sections - @RenderSection(....

В то время как этот документ предназначен для Core,вместо MVC это не имеет значения, потому что концепция идентична.

  • Они являются "заполнителями", которые вы можете установить в своем Layout
  • Вы можете "ввести"что-то в них из «страницы содержимого» * ​​1015 *
  • Вы размещаете эти «заполнители» соответствующим образом (в <head>, <body>, или там, где обычно идут скрипты - прямо перед закрывающим тегом <body>.

Взято из приведенного выше связанного документа, например Layout: 

<html>
   <head>
     <link rel="stylesheet" type="text/css" href="link_to_bootstrap">
     @RenderSection("PageStyles", required: false)
     ....
   </head>
   <body class="theme">
        <div id="main-body">
            @RenderBody()
        </div>

        <script src="path_to_jquery_or_cdn"></script>

        @RenderSection("Scripts", required: false)

    </body>

В этом примере вы можете «внедрить» специфичные для страницы PageStyles и / или Scripts при необходимости.

Обратите внимание на расположение «заполнителя» - в этом примере Scripts заполнитель располагается после вызова библиотеки jQuery. Это гарантирует, что некоторые другие библиотеки js зависят отjQuery загрузит его. То же самое для PageStyles "placeholder" - расположен после библиотеки css (например, Bootstrap).

Я подозреваю, что это вероятно, почему ваши "диаграммы не загружаются в" - re: порядок загрузки взаимозависимых сценариев.

Пример в некоторыхстраница "content": 

// because this page has a <form> that needs client side validation
// jquery validation is dependent on jquery library which we've already loaded
@section Scripts {
    <script src="path_to_jquery_validation"></script>
}

// because I want this page to be dark theme
@section PageStyles{
    <style>
       .theme {background-color: #000;}
    </style>

}

Выше указана отправная точка.Вы можете сделать более продвинутые реализации - например, BundleConfig (группировка / связывание / минификация / управление версиями css / js) и вложение sections.

Hth.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...