Question

我正在开发Blazor的第一个页面。我不是UI设计师，所以我主要了解C＃。我一点都不懂Javascript。我已经下载了HTML模板，以帮助我进行设计。该模板使用Javascript在顶部导航上产生了一些不错的效果。

是否可以访问此脚本并在页面初始化时加载它？我在index.html中放置了脚本，并在index.cshtml中的html代码中放置了适当的引用。

我已经阅读并尝试了JSinterop的某些功能，但是没有任何进展。

有没有相对容易的解决方案，或者它涉及很多复杂的代码JSruntime等？

Index.html：

<!-- Custom scripts for this template -->
<script src="js/grayscale.min.js"></script>

Index.cshtml：

<!-- Navigation -->
<!-- Header -->
<div id="page-top">
    <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
        <div class="container">
            <a class="navbar-brand js-scroll-trigger" href="#pagetop">MyPage</a>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                Menu
                <i class="fas fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link js-scroll-trigger" href="#about">Om Travblaze</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link js-scroll-trigger" href="#projects">Verktøy</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link js-scroll-trigger" href="#signup">Kontakt</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

grayscale.js：

(function ($) {
  "use strict"; // Start of use strict

  // Smooth scrolling using jQuery easing
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: (target.offset().top - 70)
        }, 1000, "easeInOutExpo");
        return false;
      }
    }
  });

  // Closes responsive menu when a scroll trigger link is clicked
  $('.js-scroll-trigger').click(function() {
    $('.navbar-collapse').collapse('hide');
  });

  // Activate scrollspy to add active class to navbar items on scroll
  $('body').scrollspy({
    target: '#mainNav',
    offset: 100
  });

  // Collapse Navbar
  var navbarCollapse = function() {
    if ($("#mainNav").offset().top > 100) {
      $("#mainNav").addClass("navbar-shrink");
    } else {
      $("#mainNav").removeClass("navbar-shrink");
    }
  };
  // Collapse now if page is not at top
  navbarCollapse();
  // Collapse the navbar when page is scrolled
  $(window).scroll(navbarCollapse);

})(jQuery); // End of use strict

Answer 1

这里提出了一个类似的问题，关于使用纯JavaScript编写的TreeView。我建议应使用C＃重写TreeView，实际上，用户无需使用JavaScript即可将TreeView转换为Razor Components。这就是您应该做的...您不应嵌入或使用JavaScript模板...而应将其转换为可通过C＃相互交互的组件。仅在不可避免的情况下才使用JSInterop。请记住，Blazor的目标是使用C＃代替JavaScript。目前，C＃（Web程序集）可以通过JavaScript与DOM进行通信，但这不会永远持续下去。预计在未来的几年中，Web Assembly可以直接与DOM进行通信，这将使JavaScript的使用成为过时。目前，尚无严格遵循的模式来构建Blazor应用程序，但不言而喻：仅在不可避免的情况下使用JavaScript Inter-op ...使用C＃，Razor等创建组件。如果您认真学习Razor组件，按照我的建议去做，当您遇到困难时，请随时提出问题，显示您的代码。

顺便说一句，即使Boot Strap使用了jQuery，也不能在Blazor Apps中使用jQuery。

希望这对您有帮助...

在Blazor中使用Javascript导航控件

1 个答案: