[英]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.