Using Javascript navigation controls with Blazor

Question

I am working on my first Blazor page. I am not a UI designer so I primarily know C#. I don't know Javascript at all. I have downloaded an HTML template to help me with the design part. This template uses Javascript to do some nice effects on the top navigation.

Is it possible to access this script and have it loaded when the page is initialized? I have put for the scripts in index.html and the appropriate references in the html code in index.cshtml.

I have read and tried some things with JSinterop, without progress.

Is there some relatively easy sollution to this, or does it involve a lot of intricate code JSruntime etc?

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

please show us your code and tell us what you are trying to achieve... — enet
– enet, Commented Mar 3, 2019 at 18:04
Added some snippets of code now. Sorry if the formatting is a bit soso, and maybe I added more than necessary — johajan
– johajan, Commented Mar 3, 2019 at 20:03

enet · Accepted Answer · 2019-03-03 21:19:27Z

2

A similar question was asked here about using a TreeView written purely in JavaScript. I suggested that the TreeView should be rewritten in C#, and indeed, the user convert the TreeView to Razor Components, without the use of a single line of JavaScript. This is what you should do... You should not embed or use the JavaScript template... Instead you should convert it into Components, that interact with each other by means of C#. Use JSInterop only when it is inevitable. Remember, Blazor's objective is to use C# instead of JavaScript. Right now C# (Web Assembly) can communicate with the DOM through JavaScript, but this won't last for ever. It is expected that in the coming years Web Assembly may directly communicate with the DOM, which would render the employment of JavaScript obsolete. Right now there are no strictly observed patterns how one should build a Blazor application, but one thing is self-evident: Use JavaScript Inter-op only when inevitable...Create Components with C#, Razor, etc. If you are serious about learning Razor Components, do what I've suggested, and when you stuck, don't hesitate to ask questions, showing your code.

Incidentally, you mustn't use jQuery in your Blazor Apps, event though it is used by Boot Strap.

Hope this helps...

answered Mar 3, 2019 at 21:19

enet

46.4k6 gold badges103 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ramzi Hammouda Over a year ago

Blazor doesn't have a plan to replace JS interop and manipulate the DOM directly. No documentation says such thing.

Collectives™ on Stack Overflow

Using Javascript navigation controls with Blazor

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related