Swashbuckle.AspNetCore + Blazor - 在运行时动态添加/删除自定义 .css 文件答案

【问题标题】：Swashbuckle.AspNetCore + Blazor - Dynamically Add/Remove custom .css file at runtimeSwashbuckle.AspNetCore + Blazor - 在运行时动态添加/删除自定义 .css 文件
【发布时间】：2021-08-24 17:09:25
【问题描述】：

我托管了 Blazor Webassembly ASP.NET Core，并安装了 Swashbuckle.AspNetCore 以显示我的 Blazor 应用程序具有的端点（/swagger 端点）。
我的Startup.Configure 看起来像这样（只是大摇大摆的部分）：

            app.UseSwagger();
            app.UseSwaggerUI(c =>
            {
                foreach (var description in provider.ApiVersionDescriptions)
                {
                    c.SwaggerEndpoint($"{description.GroupName}/swagger.json", $"v{description.GroupName.ToUpperInvariant()}");
                }

                c.InjectStylesheet("/css/swaggerDark.css");
            });

如您所见，我注入了有效的自定义 .css 文件。

在我的 Blazor 应用程序中，我注入了 swagger，因此我的页面看起来像这样（.razor 页面）：

<iframe src="swagger"/>

再次，它可以正常工作，显示大张旗鼓的文档并且它具有深色主题。

我注意到（毫不意外）这个iframe 有一个指向这个.css 文件的链接：

<link href="/css/swaggerDark.css" rel="stylesheet" media="screen" type="text/css">

删除此链接会带来默认的招摇外观（浅色主题）。

我的应用程序的用户可以选择他想要的整个应用程序的主题（浅色/深色）。我的问题是，我如何动态注入/删除（或者启用/禁用）这个 .css 文件，所以根据用户选择的应用程序主题，swagger 将显示默认（浅色）或深色主题（使用那个 .css 文件)?

我找不到有关此问题的任何相关信息，因此我决定创建此问题。我很感激任何帮助。谢谢。

【问题讨论】：

标签： swagger blazor swashbuckle.aspnetcore

【解决方案1】：

好的，我想通了。答案是：使用 JsInterop。

我的 .razor 页面现在看起来像这样：

@page "/something"
@inject IJSRuntime JS //needed to call InvokeVoidAsync

    //I made my own ThemeManager to control the Blazor app theme
    @if (ThemeManager.IsDefaultTheme)
    {
        <iframe id="myiframe" src="swagger" @onload="() => ToggleSwaggerTheme(true)" />
    }
    else
    {
        <iframe id="myiframe" src="swagger" @onload="() => ToggleSwaggerTheme(false)" />
    }

@code {
    private async Task ToggleSwaggerTheme(bool isLight) => await JS.InvokeVoidAsync("toggleSwaggerTheme", isLight);
}

我做到了，所以iframe 根据应用主题切换。 ToggleSwaggerTheme 函数是不言自明的——我正在调用我的 JS 函数来切换 swagger 的主题。

在index.html 中，我添加了一个脚本来加载我的helperFunctions.js（在正文中），其中可以找到toggleSwaggerTheme 函数：

<script src="/js/helperFunctions.js"></script>

我在我的wwwroot 中添加了helperFunctions.js：
wwwroot -> js -> helperFunctions.js

我的helperFunctions.js 看起来像这样：

function toggleSwaggerTheme(isLight) {
    let myiframe = document.getElementById('myiframe');
    let styleSheets = myiframe.contentWindow.document.styleSheets;
    for (let i = 0; i < styleSheets.length; i++) {
        if (styleSheets[i].href == null) {
            continue;
        }

        if (styleSheets[i].href.includes("/css/swaggerDark.css")) {
            styleSheets[i].disabled = isLight;
            break;
        }
    }
}

上述功能让我可以切换 swagger 主题。请注意，我不知道这是否是可以创建的最佳解决方案。另外，我不确定它在生产环境中的表现如何。如果生产中有任何问题，我会更新这个答案。我希望它可以帮助别人。

上线后更新：

我在上线后显示深色主题时遇到了一些问题。但以下似乎解决了这个问题：在 Program.cs（服务器端）中，在我添加的 CreateHostBuilder 方法中（不确定是否需要）：

    webBuilder.UseStaticWebAssets();

所以在我的例子中，它看起来像这样：

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStaticWebAssets();
                webBuilder.UseStartup<Startup>();
            });

我还将swaggerDark.css 文件属性：Copy to Output Directory 更改为Copy always。您可以通过右键单击解决方案资源管理器中的文件来执行此操作 -> 属性（最后）。
完成这些新步骤后，它似乎工作正常。我希望它可以帮助别人。

【讨论】：