Blazor 根据请求路径设置 CSS 文件答案

【问题标题】：Blazor set CSS file based on request pathBlazor 根据请求路径设置 CSS 文件
【发布时间】：2021-12-26 18:34:51
【问题描述】：

我正在尝试即时切换 css 文件 - 基于用户所在的网络系统的哪个部分（即，如果用户在 mydomain/students/page 上，则页面加载 students.min .css，而不是 site.min.css）。

我已经尝试在 _Host.cshtml 中这样做：

@page "/"
@namespace FIS2withSyncfusion.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;

    //sniff the requst path and switch the stylesheet accordingly
    string path = Request.Path;

    string css = "site.min.css";

    if (path.ToLowerInvariant().StartsWith("/students"))
    {
        css = "students.min.css";
    }

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Martin's Blazor Testing Site</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/@(css)" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>

    <script type="text/javascript">
        function saveAsFile(filename, bytesBase64) {
            if (navigator.msSaveBlob) {
                //Download document in Edge browser
                var data = window.atob(bytesBase64);
                var bytes = new Uint8Array(data.length);
                for (var i = 0; i < data.length; i++) {
                    bytes[i] = data.charCodeAt(i);
                }
                var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
                navigator.msSaveBlob(blob, filename);
            }
            else {
                var link = document.createElement('a');
                link.download = filename;
                link.href = "data:application/octet-stream;base64," + bytesBase64;
                document.body.appendChild(link); // Needed for Firefox
                link.click();
                document.body.removeChild(link);
            }
        }
    </script>
</head>

<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
    <script src="_framework/blazor.server.js"></script>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">????</a>
    </div>
</body>

</html>

但是，在第一次加载网站后，它似乎没有命中这个代码块；这意味着他们首先登陆的任何页面都表示整个网站的样式表。

我必须把这个代码块放在每个页面上还是有其他方法？

【问题讨论】：

标签： css blazor blazor-server-side

【解决方案1】：

您可以解决此问题的另一种方法是创建响应您想要的不同样式的组件。从那里你有两个选择：

创建与组件关联的专用 css。 From the docs
在组件的代码块中创建一个类切换，类似于 NavMenu 的工作方式。

【讨论】：

是的，这行得通 - 我采用我的方式而不是那些方式的主要原因是因为我认为这样更容易使东西保持标准化。

【解决方案2】：

经过进一步的实验，我发现添加这个块：

@{
    //sniff the requst path and switch the stylesheet accordingly
    string path = navManager.Uri;

    Uri uri = new Uri(path);

    List<string> parts = uri.Segments.ToList();

    string module = parts[1].ToLowerInvariant().Trim('/');

    string css = "site.min.css";

    if (module == "students")
    {
        css = "students.min.css";
    }
}

<head>
    <link rel="stylesheet" href="css/@(css)" />
</head>

到 MainLayout.razor 的顶部可以完美运行 - 只要您从 _Host.cshtml 中删除等效块

【讨论】：