JavaScript stops working with AspNetCore Blazor

Question

I have the following dilemma. I am building an application made in AspNetCore with Blazor Server in version 3.1 for learning purposes. When I add the AdminLTE template, the application works as a whole, as I can activate the side menus, making them appear or hide. From the moment I add a login screen that calls my AdminLTE template, all menus stop working. All that interaction that the AdminLTE template provides to the user, appearing and hiding the menu, stop working. What should I do to make the menu work again? Why does JS stop?

Arquivo: _Host.cshtml

<html lang="pt-br">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>BlazorAdminLTE</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="~/AdminLTE/plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- icheck bootstrap -->
  <link rel="stylesheet" href="~/AdminLTE/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="~/AdminLTE/dist/css/adminlte.min.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>

<body class="hold-transition sidebar-mini">
  <div class="content">
    <app>
      <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>
  </div>
  <script src="_framework/blazor.server.js"></script>
  <script src="~/AdminLTE/plugins/"></script>
  <!-- jQuery -->
  <script src="~/AdminLTE/plugins/jquery/jquery.min.js"></script>
  <!-- Bootstrap 4 -->
  <script src="~/AdminLTE/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- bs-custom-file-input -->
  <script src="~/AdminLTE/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>
  <!-- AdminLTE App -->
  <script src="~/AdminLTE/dist/js/adminlte.min.js"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="~/AdminLTE/dist/js/demo.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      bsCustomFileInput.init();
    });
  </script>
</body>

</html>

Arquivo: MenuVertical.razor

<nav class="mt-2">
  <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
    <!-- Add icons to the links using the .nav-icon class
                 with font-awesome or any other icon font library -->
    <li class="nav-item has-treeview">
      <a href="#" class="nav-link">
        <i class="nav-icon fas fa-tachometer-alt"></i>
        <p>
          Dashboard
          <i class="right fas fa-angle-left"></i>
        </p>
      </a>
      <ul class="nav nav-treeview">
        <li class="nav-item">
          <a href="../../index.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
            <p>Dashboard v1</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../../index2.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
            <p>Dashboard v2</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../../index3.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
            <p>Dashboard v3</p>
          </a>
        </li>
      </ul>
    </li>
  </ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->

Arquivo: LoginLayout.razor

@inherits LayoutComponentBase

<div class="hold-transition login-page">
  <div class="login-box">
    <div class="login-logo">
      <img src="images/logo_sise_transp-1.png" alt="Logo da empresa Sises" style="width: 263px;" />
    </div>
    <!-- /.login-logo -->
    <div class="card">
      <div class="card-body login-card-body" style="padding-top: 30px;padding-bottom: 30px;">
        @Body
      </div>
      <!-- /.login-card-body -->
    </div>
  </div>
</div>

Arquivo: MainLayout.razor

@inherits LayoutComponentBase

<nav class="main-header navbar navbar-expand navbar-white navbar-light">
  <MenuHorizontal />
</nav>
<!-- Menu Vertical -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
  <MenuVertical />
</aside>
<div class="main">
  <div class="top-row px-4">
    <AuthorizeView>
      <Authorized>
        <a href="/" @*@onclick="(() => Logout())">Logout*@</a>
      </Authorized>

      <NotAuthorized>
        <a href="/">Login</a>
      </NotAuthorized>
    </AuthorizeView>
  </div>
  <div class="content-wrapper">
    @Body
  </div>
</div>

Arquivo: App.razor

<Router AppAssembly="@typeof(Program).Assembly">
  <Found Context="routeData">
    <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
  </Found>
  <NotFound>
    <CascadingAuthenticationState>
      <LayoutView Layout="@typeof(MainLayout)">
        <h1>404 Error</h1>
        <p>Sorry, there's nothing at this address.</p>
      </LayoutView>
    </CascadingAuthenticationState>
  </NotFound>
</Router>

Bruno Quintella · Accepted Answer · 2020-10-23 13:14:58Z

1

I managed to solve the JS problem. As it is a SPA application, the pages made in Blazor are not updated when we want to access them and for some reason, in my case, the AdminLTE menus were locked, without being able to access the submenus. In Blazor itself, there is a command to navigate between pages, the first argument is to pass the page you want to access and the second argument is the possibility to apply the refresh or not. By default, this argument is false, but if passed as true, the page is updated.

Conclusion: somewhere in your code, you need to pass the second argument as true, so that the screen is updated.

NavigationManager.NavigateTo ("/index", true);

answered Oct 23, 2020 at 13:14

Bruno Quintella

314 bronze badges

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

1 Comment

Zhi Lv Over a year ago

Glad to hear you have resolved the problem. I suggest you to try to mark your own answer as an accepted answer when it is available to mark. It can help other community members in the future in similar kind of issues. Thanks for your understanding.

Collectives™ on Stack Overflow

JavaScript stops working with AspNetCore 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