Серверная часть Blazor - Расположение ссылок на файлы js в _Host.cshtml

#javascript #blazor

Вопрос:

У меня есть анимации, которые я пытаюсь использовать, но моя проблема в том, что они не работают, если у меня есть ссылки так, как я думал, что они у меня должны быть. Я могу заставить их работать, но тогда страница счетчика, включенная в проект Blazor по умолчанию, не работает — счетчик не подсчитывается, что указывает на то, что что-то серьезно не так, и у меня будут и другие проблемы. Анимационный JavaScript находится в файле под названием bs-init.js .

Сценарий первый:

 <head>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link href="css/site.css" rel="stylesheet" />
    <script src="_framework/blazor.server.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bs-init.js"></script>
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>
</body>
</html>

Проблема: анимация работает, но счетчик не работает.

Сценарий второй:

 <head>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="_framework/blazor.server.js"></script>
    <script src="js/bs-init.js"></script>
</body>
</html>

Проблема: счетчик работает, но анимация — нет.

Содержимое моего bs-init.js файл — это:

 $(document).ready(function(){
    $('[data-bs-hover-animate]')
        .mouseenter( function(){ var elem = $(this); elem.addClass('animated '   elem.attr('data-bs-hover-animate')) })
        .mouseleave( function(){ var elem = $(this); elem.removeClass('animated '   elem.attr('data-bs-hover-animate')) });
});

Ответ №1:

Не все скрипты должны быть сгруппированы вместе. Я никогда не помещал <script src="_framework/blazor.server.js"></script> никуда, кроме тела. Попробуйте оставить это там. Даже если это будет работать внутри head, это остановит рендеринг вашего приложения до его загрузки.

Для других ваших библиотек; вы можете попробовать поместить их в head. Когда вы смотрите на инструменты разработчика (F12) — вкладка консоль, вы, вероятно, увидите сообщения об ошибках, что что-то не работает, потому что вызванная библиотека неизвестна.

1. Как только я перемещаю любую библиотеку, кроме bs-int.js в теле анимация перестает работать.

2. Какое сообщение об ошибке вы получаете в своей консоли?

3. Нет сообщения об ошибке в консоли. Похоже, что как только я перемещаю скрипты в тело, у меня больше нет прослушивателей событий для наведения курсора мыши

4. Я нашел решение, которое можно увидеть в моем ответе здесь.

Ответ №2:

Эта проблема имеет следующее решение:

Поместите ссылки на скрипты в тело. Что кажется действительно важным здесь, так это иметь «_framework/blazor.server.js «ссылка в теле.

Оберните содержимое кода jquery в функцию, подобную этой:

 function renderjQueryComponents() {
$(document).ready(function () {
    $('[data-bs-hover-animate]')
        .mouseenter(function () { var elem = $(this); elem.addClass('animated '   elem.attr('data-bs-hover-animate')) })
        .mouseleave(function () { var elem = $(this); elem.removeClass('animated '   elem.attr('data-bs-hover-animate')) });
});

$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})

}

В компонент Blazor, в котором используется скрипт, внедрите среду выполнения JS:

 @inject IJSRuntime jsRuntime

Переопределить OnAfterRender:

 protected override async void OnAfterRender(bool firstRender)
{
    await jsRuntime.InvokeVoidAsync("renderjQueryComponents");
    base.OnAfterRender(firstRender);
}

И все — проблема решена!