Не удается загрузить jquery перед другим скриптом - PullRequest
Новая
       4

Не удается загрузить jquery перед другим скриптом

0 голосов
/ 06 сентября 2018

Мне нужно загрузить JQuery раньше всего, поэтому я создал этот код внутри _Layout: 

<!DOCTYPE html>
<html>

<body class="sidebar-enable" data-keep-enlarged="true">
    <div class="wrapper">
        @RenderBody()
    </div>

    <script src="~/js/jquery.min.js"></script>
    @RenderSection("DataTableScript", required: false)
</body>
</html>

У меня есть ViewComponent с именем ProductsViewComponent, я загружаю его в View с именем Home таким образом: 

 @await Component.InvokeAsync("Products", new { date = "2018-09-05" })

Внутри ViewComponent Мне нужно загрузить DataTableScript (для правильной работы требуется JQuery), поэтому я создал эту логику внутри Default.cshtml (которая является html ProductsViewComponent): 

@{
    Layout = "/Views/Shared/_LayoutViewComponent.cshtml";
}

@section DataTableScript{
    <script src="~/js/vendor/jquery.dataTables.js"></script>
    <script src="~/js/vendor/dataTables.bootstrap4.js"></script>
    <script src="~/js/vendor/dataTables.responsive.min.js"></script>
    <script src="~/js/vendor/responsive.bootstrap4.min.js"></script>
    <script src="~/js/vendor/dataTables.buttons.min.js"></script>
    <script src="~/js/vendor/buttons.bootstrap4.min.js"></script>
    <script src="~/js/vendor/buttons.html5.min.js"></script>
    <script src="~/js/vendor/buttons.print.min.js"></script>
    <script src="~/js/vendor/dataTables.keyTable.min.js"></script>
    <script src="~/js/vendor/dataTables.select.min.js"></script>
    <script src="~/js/dataTable.js"></script>
}

Я указал еще один Layout, поскольку ViewComponent не может отобразить раздел (см. этот вопрос для получения дополнительной информации)

внутри _LayoutViewComponent Я поместил этот код: 

@RenderBody()
@RenderSection("DataTableScript")

По существу RenderBody звонки _Layout и затем DataTableScript загружаются. Но когда я запускаю приложение, я загружаю DataTableScript до JQuery, и это действительно странно, потому что в _Layout я указал загрузку DataTableScript после JQuery.

Ответы [ 2 ]

0 голосов
/ 07 сентября 2018

Вы можете использовать частичное для визуализации тегов скрипта.

Views / Shared / _DataTableScriptsPartial.cshtml 

<script src="~/js/vendor/jquery.dataTables.js"></script>
<script src="~/js/vendor/dataTables.bootstrap4.js"></script>
<script src="~/js/vendor/dataTables.responsive.min.js"></script>
<script src="~/js/vendor/responsive.bootstrap4.min.js"></script>
<script src="~/js/vendor/dataTables.buttons.min.js"></script>
<script src="~/js/vendor/buttons.bootstrap4.min.js"></script>
<script src="~/js/vendor/buttons.html5.min.js"></script>
<script src="~/js/vendor/buttons.print.min.js"></script>
<script src="~/js/vendor/dataTables.keyTable.min.js"></script>
<script src="~/js/vendor/dataTables.select.min.js"></script>
<script src="~/js/dataTable.js"></script>

В вашем _Layout.cshtml объявите раздел scripts. 

<!DOCTYPE html>
<html>
<head>
    @RenderSection("head", required: false)
</head>
<body class="sidebar-enable" data-keep-enlarged="true">
    <div class="wrapper">
        @RenderBody()
    </div>
    <script src="~/js/jquery.min.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

На странице, которая использует ваш ViewComponent, визуализируйте частичное в разделе сценариев.

Products.cshtml 

@{ 
    Layout = "_Layout"; 
}

@await Component.InvokeAsync("Products", new { date = "2018-09-05" })

@section scripts {
    @await Html.PartialAsync("_DataTableScriptsPartial")
}
0 голосов
/ 06 сентября 2018

Нельзя указать макет для представления компонента вида. По сути, это частичная точка зрения. Ко времени обработки компонента вида основной макет уже установлен в камне. Вам следует использовать библиотеку загрузки сценариев, чтобы условно включить ваши дополнительные сценарии, а затем вывести JavaScript, обслуживающий ваш компонент представления, и запустить его после завершения загрузки связанных сценариев.

Для этого вы можете использовать различные библиотеки / методы: CommonJS, AMD, RequireJS и т. Д. Вам нужно будет провести некоторое исследование и выяснить, какая из них лучше всего подходит для вас. Однако это преобразующая вещь. Это изменит весь способ обработки сценариев в приложении и, как следствие, может потребовать некоторой существенной реструктуризации всего существующего.

Более простой подход - просто включить скрипт в основной макет. Если ваш макет включает в себя этот компонент вида, то в любом случае он всегда будет нуждаться в сценариях, поэтому просто сделайте его статичным. У него нет теплых размышлений о полностью автономной единице функциональности, которой вы хотите, чтобы ваш компонент представления был, но для его достижения, вероятно, потребуется гораздо больше усилий, которые оправданы или разумны для этого конкретного сценарий.

Для чего бы то ни было, вы можете немного оптимизировать ситуацию, предварительно загрузив сценарии с помощью тега <link rel="preload" href="..." as="script" />. Это может привести к тому, что браузеры поддержки продолжат загрузку скрипта, фактически не запуская его (который блокирует рендеринг). Затем, к тому времени, когда вы на самом деле включите скрипт перед закрывающим тегом body, он, вероятно, уже хорош, и тег script просто предложит браузеру запустить его.

UPDATE

Еще одним вариантом является использование клиентской библиотеки, которая поддерживает «компоненты». Это будет замена для вашего компонента представления, а не то, что вы добавите в дополнение. Тем не менее, преимущество клиентского компонента состоит в том, что вы можете содержать все функции JavaScript в нем, а затем библиотека просто перебирает ваш документ в конце и подключает все. Мне лично нравится Vue, но есть и другие варианты, такие как React, Ember, Angular и т. Д. Проконсультируйтесь с документацией по каждому из них, чтобы оценить, предпочитаете ли вы этот подход вместо этого и какую конкретную библиотеку предпочитаете. Все они, по сути, делают одно и то же, но у каждого из них есть свои уникальные способы добраться туда.

Мне лично нравится Vue, потому что она легкая и в основном ненавязчивая. Это не обязательно заставляет вас делать что-то определенным образом, так что вы можете иметь немного больше свободы в этом отношении. Такие библиотеки, как React и Angular, имеют тенденцию быть более самоуверенными, и, поскольку они больше ориентированы на создание одностраничных приложений, иногда может быть сложно разделить обязанности при рендеринге на стороне сервера, таком как представления Razor. Только мое мнение, хотя.

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

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

...