时间戳

首页 > 解决方案 > 为什么没有应用 JQuery 脚本是 Asp.net MVC blazor？

javascript - 为什么没有应用 JQuery 脚本是 Asp.net MVC blazor？

问题描述

我正在尝试使用 Blazor 构建一个新应用程序，但我遇到了一个奇怪的问题。即使触发了断点，也不会应用“onload”jquery 脚本。举个例子，这是我的设置：

_Host.cshtml：

@page "/"
@namespace DentalOffice.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Dento - Dentist &amp; Medical HTML Template">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>DentalOffice</title>
    <!-- Favicon -->
    <link rel="icon" href="./img/core-img/favicon.ico">

    <!-- Core Stylesheet -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
    <!-- jQuery js -->
    <script src="/js/jquery.min.js"></script>
    <!-- Popper js -->
    <script src="/js/popper.min.js"></script>
    <!-- Bootstrap js -->
    <script src="/js/bootstrap.min.js"></script>
    <!-- All js -->
    <script src="/js/dento.bundle.js"></script>
    <!-- Active js -->
    <script src="/js/default-assets/active.js"></script>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

索引剃刀：

  @page "/"
  <!-- Preloader -->
  <div id="preloader">
    <div class="preload-content">
      <div id="dento-load"></div>
    </div>
  </div>

主动.js：

(function($) {
  var dento_window = $(window);

  // *******************************
  // :: 1.0 Preloader Active Code
  // *******************************

      dento_window.on('load', function() {
        $('#preloader').fadeOut('1000', function() {
          $(this).remove();
          });
        });
      })(jQuery);

如果我将此页面作为纯 HTML 运行，它会按预期工作并且加载器会消失。Blazor 组件内部的行为非常奇怪。如果我在 active.js 中在线设置断点：$(this).remove(); ，断点被击中，但更改未在 UI 上更新（未删除预加载器）。 在此处输入图像描述

但是，如果我像这样从控制台手动触发删除 ($('#preloader').remove())，它会起作用。

这里有什么问题？

标签： javascriptjqueryblazorblazor-server-side

解决方案

推荐阅读