Blazor Server动态设置CSS文件路径的实现方案咨询

嘿，针对你这个基于.NET Core 3.0 Server Side Blazor的动态CSS路径需求，我有几个实用的方案分享给你：

这是最直接的方式，因为_Host.cshtml作为Blazor应用的入口Razor页面，可以直接访问当前请求的上下文信息。

首先，在你的_Host.cshtml中注入IHttpContextAccessor，然后根据当前域名判断要加载的CSS路径：

@inject IHttpContextAccessor HttpContextAccessor
@{
    var currentDomain = HttpContextAccessor.HttpContext.Request.Host.Host;
    // 根据域名匹配对应的CSS文件
    string cssFilePath = currentDomain switch
    {
        "your-first-domain.com" => "/css/site-domain1.css",
        "your-second-domain.com" => "/css/site-domain2.css",
        _ => "/css/site-default.css" // 兜底的默认样式
    };
}

<!-- 动态输出CSS链接 -->
<link rel="stylesheet" href="@cssFilePath" />

注意：要记得在Startup.cs中注册IHttpContextAccessor服务，否则会注入失败：

public void ConfigureServices(IServiceCollection services)
{
    services.AddHttpContextAccessor();
    // 其他服务注册代码...
}

如果你的场景需要在应用运行过程中（比如域名切换后）动态更新CSS，这个方案更合适。

第一步，在wwwroot/js目录下创建一个自定义JS文件（比如dynamic-css.js），写一个加载CSS的函数：

window.loadDynamicCss = function(cssUrl) {
    // 先移除已存在的动态CSS标签，避免重复加载
    const existingLink = document.getElementById('dynamic-stylesheet');
    if (existingLink) {
        existingLink.remove();
    }
    // 创建新的link标签并添加到页面头部
    const newLink = document.createElement('link');
    newLink.id = 'dynamic-stylesheet';
    newLink.rel = 'stylesheet';
    newLink.href = cssUrl;
    document.head.appendChild(newLink);
};

然后在_Host.cshtml中引入这个JS文件：

<script src="/js/dynamic-css.js"></script>

接下来，在Blazor组件（比如App.razor）中注入IHttpContextAccessor和IJSRuntime，在初始化时调用JS函数加载对应CSS：

@inject IHttpContextAccessor HttpContextAccessor
@inject IJSRuntime JSRuntime

@code {
    protected override async Task OnInitializedAsync()
    {
        var currentDomain = HttpContextAccessor.HttpContext.Request.Host.Host;
        string cssPath = currentDomain switch
        {
            "your-first-domain.com" => "/css/site-domain1.css",
            "your-second-domain.com" => "/css/site-domain2.css",
            _ => "/css/site-default.css"
        };
        // 调用JS函数加载动态CSS
        await JSRuntime.InvokeVoidAsync("window.loadDynamicCss", cssPath);
    }
}

因为Server Side Blazor使用SignalR维持连接，在后续的交互阶段HttpContext可能无法直接访问。如果你的应用是交互式Server Side模式，建议在_Host.cshtml中把域名信息存入全局JS变量，再在Blazor组件中读取：

在_Host.cshtml添加：

<script>
    window.appDomain = "@HttpContextAccessor.HttpContext.Request.Host.Host";
</script>

然后在Blazor组件中通过JS获取这个变量：

var currentDomain = await JSRuntime.InvokeAsync<string>("eval", "window.appDomain");

这样就能避免后续交互时HttpContext不可用的问题啦。

内容的提问来源于stack exchange，提问作者baer999