CSS 在 Blazor 服务器中的 _Host.chstml 中不起作用答案

【问题标题】：CSS Not Working In _Host.chstml In Blazor ServerCSS 在 Blazor 服务器中的 _Host.chstml 中不起作用
【发布时间】：2021-05-02 07:20:27
【问题描述】：

这里我有 blazor 服务器应用程序，在应用程序中我有两个 _Host.cshtml，一个用于网站，默认为 _Host.cshtml，另一个用于管理面板，为 _HostAdmin.cshtml。它们都有单独的 css 和 js 文件。我也有单独的布局，对于网站我有Mainlayout.razor，应该使用_Host.cshtml，对于管理面板我有AdminLayout.razor，应该使用_HostAdmin.cshtml。

现在，问题是当我添加新的剃须刀组件并使用AdminLayout.razor 布局时，视图不使用_HostAdmin.cshtml 的css 和js。

下面是我的_HostAdmin.cshtml

@page "/Admin"
@namespace MCQ.Pages._Pages_Admin__HostAdmin
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Admin Dashboard</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">

     <base href="~/Admin" />

     <link rel="stylesheet" href="/Adminlte/plugins/fontawesome-free/css/all.min.css" />
     <link rel="stylesheet" href="/Adminlte/plugins/fontawesome-free/css/all.min.css">
     <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
     <link rel="stylesheet" href="/Adminlte/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
     <link rel="stylesheet" href="/Adminlte/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
     <link rel="stylesheet" href="/Adminlte/plugins/jqvmap/jqvmap.min.css">
     <link rel="stylesheet" href="/Adminlte/dist/css/adminlte.min.css">
     <link rel="stylesheet" href="/Adminlte/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
     <link rel="stylesheet" href="/Adminlte/plugins/daterangepicker/daterangepicker.css">
     <link rel="stylesheet" href="/Adminlte/plugins/summernote/summernote-bs4.css">
     <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

</head>
  <body class="hold-transition sidebar-mini layout-fixed">

    <div class="wrapper">
       <component type="typeof(App)" render-mode="ServerPrerendered" />
    </div>

    <script src="~/Adminlte/plugins/jquery/jquery.min.js"></script>
    <script src="~/Adminlte/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script>$.widget.bridge('uibutton', $.ui.button)</script>
    <script src="~/Adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="~/Adminlte/plugins/chart.js/Chart.min.js"></script>
    <script src="~/Adminlte/plugins/sparklines/sparkline.js"></script>
    <script src="~/Adminlte/plugins/jqvmap/jquery.vmap.min.js"></script>
    <script src="~/Adminlte/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
    <script src="~/Adminlte/plugins/jquery-knob/jquery.knob.min.js"></script>
    <script src="~/Adminlte/plugins/moment/moment.min.js"></script>
    <script src="~/Adminlte/plugins/daterangepicker/daterangepicker.js"></script>
    <script src="~/Adminlte/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
    <script src="~/Adminlte/plugins/summernote/summernote-bs4.min.js"></script>
    <script src="~/Adminlte/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
    <script src="~/Adminlte/dist/js/adminlte.js"></script>
    <script src="~/Adminlte/dist/js/pages/dashboard.js"></script>
    <script src="~/Adminlte/dist/js/demo.js"></script>
 </body>
</html>

下面是 Startup.cs

  app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
            endpoints.MapBlazorHub();
            endpoints.MapFallbackToPage("/_Host");
            endpoints.MapFallbackToPage("~/Admin/{*clientroutes:nonfile}", "/_HostAdmin");
        });

【问题讨论】：

相关：stackoverflow.com/q/65494101/60761
@HenkHolterman ：我将端点更改为endpoints.MapFallbackToPage("/Admin/{**segment}", "/Admin/_HostAdmin"); ，但它不起作用
VS 不会自动以管理员身份运行。如果在 VS 中运行，请右键单击 VS 快捷方式并选择 Run As Adim。该应用程序也将通过从 VS 外部运行可执行文件来运行。

标签： c# css asp.net-core blazor

【解决方案1】：

你说

现在，问题是当我添加新的 razor 组件并使用 AdminLayout.razor 布局时，视图不使用 _HostAdmin.cshtml 的 css 和 js。

我假设你的问题是“为什么”。

您正在向现有应用程序添加一个新的 razor 组件页面 - 可能使用类似“/admin/myadminpage”的路由。您误解了实际发生的情况。

_Host.cshtml 加载 SPA，但这是唯一发生的获取/发布。之后的导航正在改变 DOM 中的组件。加载布局为AdminLayout 的组件只会更改布局组件。与服务器无关。

您尝试执行的操作需要重新加载 SPA。你可以使用：

NavigationManager.NavigateTo("/admin/myadminpage", true);

此外，即使您确实强制重新加载，Fallbacks 的顺序也是错误的 - 默认值在特定值之前。

    endpoints.MapFallbackToPage("/_Host");
    endpoints.MapFallbackToPage("~/Admin/{*clientroutes:nonfile}", "/_HostAdmin");

【讨论】：

谢谢，正确的后备顺序是什么