[英]JavaScript stops working with AspNetCore Blazor
我有以下困境。 我正在使用 3.1 版的 Blazor Server 构建在 AspNetCore 中制作的应用程序，以用于学习目的。 当我添加 AdminLTE 模板时，应用程序作为一个整体运行，因为我可以激活侧边菜单，使它们显示或隐藏。 从我添加一个调用我的 AdminLTE 模板的登录屏幕的那一刻起，所有菜单都停止工作。 AdminLTE 模板为用户提供的所有交互（显示和隐藏菜单）都停止工作。 我应该怎么做才能使菜单再次工作？ 为什么JS停止？
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>
我设法解决了 JS 问题。 由于它是一个 SPA 应用程序，当我们想要访问它们时，Blazor 中创建的页面不会更新，并且出于某种原因，在我的情况下，AdminLTE 菜单被锁定，无法访问子菜单。 在 Blazor 本身中，有一个在页面之间导航的命令，第一个参数是传递要访问的页面，第二个参数是是否应用刷新的可能性。 默认情况下，此参数为 false，但如果传递为 true，则更新页面。
结论：在代码中的某处，您需要将第二个参数传递为 true，以便更新屏幕。
NavigationManager.NavigateTo("/index", true);
Blazor<navlink> 作为组件包含时样式停止工作</navlink>
[英]Blazor <NavLink> style stops working when included as component
Blazor 和 Microsoft.AspNetCore.Identity 需要电子邮件
[英]Blazor and Microsoft.AspNetCore.Identity Requiring Email
Javascript 单击事件在 Blazor 客户端应用程序中不起作用
[英]Javascript click event not working in Blazor client side app
Blazor 服务器应用程序 JavaScript 库不工作（Metronic 模板）
[英]Blazor Server App JavaScript Libraries Not working (Metronic Template)
Microsoft.AspNetCore.Blazor.Cli 0.5.1 与 netcoreapp2.0 不兼容
[英]Microsoft.AspNetCore.Blazor.Cli 0.5.1 is not compatible with netcoreapp2.0
项目中的 Microsoft.AspNetCore.Mvc 引用导致 Blazor WASM 问题
[英]Microsoft.AspNetCore.Mvc Reference In Project Causes Blazor WASM Issues
as.netcore blazor 从razor组件导航到razor页面
[英]aspnetcore blazor navigation from razor component to razor page
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.