C#•7mo ago

✅ Blazor and Javascript loading

So, I have a main page and a separate adminpage. On navigating to the admin site it changes the layout to AdminLayout.razor which inherits from @inherits LayoutComponentBase. So far, so good, the adminpage inlcudes @layout AdminLayout and everything is displayed correctly. The AdminLayout also has several JS includes at the end of body. It seems that after first navigation those scripts aren't loaded, the behaviour is as followed: - Navigate to admin page - Click on a <a href="#"> that should expand a collapsed div, but it doesn't - Reload/Refresh the page after it's initial load and it works as expected Switching the rendermode to Server and Server without prerender haven't helped here. Navigating to the adminpage via NavigationManager, could this be an issue?

8 Replies

Philip•7mo ago

My best guess is that you’ve fallen into the trap of choosing Per/component when creating the project, right? - Do you have a GitHub repo for me to take a look, I’ll happily try and see if I can find out some more.

SpReeDOP•7mo ago

I do, but unfortunately it's a private one

exixt•7mo ago

one thing to keep in mind is javascript interop is accessible OnAfterRender, not during init

SpReeDOP•7mo ago

The thing is, that I'm not trying to interop with it, it's just a simple .js file with usual funcs, but I cannot figure out why it isn't loaded on first render

exixt•7mo ago

could perhaps try loading it from file, the javascript you have at the end of body today something like:

@inject IJSRuntime JS;

@code {
  private IJSObjectReference? module;
  
  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
      module = await JS.InvokeAsync<IJSObjectReference>("import", "./js/test.js");
  }

@inject IJSRuntime JS;

@code {
  private IJSObjectReference? module;
  
  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
      module = await JS.InvokeAsync<IJSObjectReference>("import", "./js/test.js");
  }

i dont usually work with javascript in blazor myself, but this could be something worthwhile

SpReeDOP•7mo ago

Thx, gonna give it a try. The JS is mostly from a template, you may know it AdminLTE. There's an unfinished version, made by someone on github, of it for blazor, but it doesn't work correctly and I don't need everything from it. Dang it, it took me a really long time, just to realize it's the, oh so wonderful, NavigationManager of blazor ... I just redirect with jQuery like $(location).attr('href','Administration/Dashboard'); and it worked (as I assumed earlier), so back to the NavigationManager I added forcereload to bypass client-side routing and reload the page from the server as it would normally do with any other redirection. I suspected something like it, because of the previous behaviour that the page acts normal when refreshed manually. I somewhere read (on my research for this topic) that, in the matter of performance, the NavigationManager may work similar to a cache and doesn't load everything from a newly inserted layout. - I'm taking a wild guess here, coz I don't know the NavigationManager under the hood, but using forcereload if changing a layout should be advised.

exixt•7mo ago

ah nice!

SpReeDOP•7mo ago

Thanks for you help!

Gaming

Programming

✅ Blazor and Javascript loading