JavaScript 停止使用 AspNetCore Blazor
[英]JavaScript stops working with AspNetCore Blazor
问题描述
I have the following dilemma.
我有以下困境。 I am building an application made in AspNetCore with Blazor Server in version 3.1 for learning purposes.我正在使用 3.1 版的 Blazor Server 构建在 AspNetCore 中制作的应用程序，以用于学习目的。 When I add the AdminLTE template, the application works as a whole, as I can activate the side menus, making them appear or hide.当我添加 AdminLTE 模板时，应用程序作为一个整体运行，因为我可以激活侧边菜单，使它们显示或隐藏。 From the moment I add a login screen that calls my AdminLTE template, all menus stop working.从我添加一个调用我的 AdminLTE 模板的登录屏幕的那一刻起，所有菜单都停止工作。 All that interaction that the AdminLTE template provides to the user, appearing and hiding the menu, stop working. AdminLTE 模板为用户提供的所有交互（显示和隐藏菜单）都停止工作。 What should I do to make the menu work again?我应该怎么做才能使菜单再次工作？ Why does JS stop?为什么JS停止？
Arquivo: _Host.cshtml 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 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 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 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 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 个解决方案
解决方案1
0 2020-10-23 13:14:58
I managed to solve the JS problem.我设法解决了 JS 问题。 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.由于它是一个 SPA 应用程序，当我们想要访问它们时，Blazor 中创建的页面不会更新，并且出于某种原因，在我的情况下，AdminLTE 菜单被锁定，无法访问子菜单。 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.在 Blazor 本身中，有一个在页面之间导航的命令，第一个参数是传递要访问的页面，第二个参数是是否应用刷新的可能性。 By default, this argument is false, but if passed as true, the page is updated.默认情况下，此参数为 false，但如果传递为 true，则更新页面。
Conclusion: somewhere in your code, you need to pass the second argument as true, so that the screen is updated.结论：在代码中的某处，您需要将第二个参数传递为 true，以便更新屏幕。
NavigationManager.NavigateTo ("/index", true); NavigationManager.NavigateTo("/index", true);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.