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>
1 answers
solution1
0 2020-10-23 13:14:58
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.