【问题标题】:Cutomize Swagger UI ASP.NET Core Web API自定义 Swagger UI ASP.NET Core Web API
【发布时间】:2017-12-01 11:38:14
【问题描述】:

我正在尝试在我的 ASP.NET Core Web API 上自定义 swagger UI。

我想要这样的用户界面:

我正在学习这些教程:

这是 Startup.cs 配置:

// Add the detail information for the API.
services.ConfigureSwaggerGen(options =>
{
    // Determine base path for the application.
    var basePath = _env.WebRootPath;

    // Complete path
    var xmlPath = Path.Combine(basePath, "myapi.xml");

    // Set the comments path for the swagger json and ui.
    options.IncludeXmlComments(xmlPath);
});

app.UseStaticFiles();

// Enable middleware to serve generated Swagger as a JSON endpoint
app.UseSwagger();

// Enable middleware to serve swagger-ui assets (HTML, JS, CSS etc.)
app.UseSwaggerUI(c =>
{                
    c.SwaggerEndpoint("/swagger/v1/swagger.json", "MyAPI");
});  

我已经从 git 存储库中下载了 swagger ui 文件并像这样放在我的项目中:

我不知道这样做是否正确,但我看不到对 Swagger UI 的任何更改。

【问题讨论】:

  • 在您的index.html 文件中您是否引用了您的css?另外,您是否浏览到http://localhost:<random_port>/swagger/ui/index.html 并在呈现页面顶部的输入框中输入http://localhost:<random_port>/swagger/v1/swagger.json
  • 这就是问题所在。该 index.html 页面未被调用。
  • 你是什么意思,That index.html page is not called?您是否尝试过浏览它以确保它被正确提供?
  • 您可能不需要付出那么多努力。查看我的博文:cpratt.co/customizing-swagger-ui-in-asp-net-core
  • 我的意思是 dist 文件夹中的 index.html 与我运行 API 时加载的不同。我需要知道如何正确设置它以查看更改。 SwaggerEndpoint 需要有一个 .json 文件才能工作。

标签: c# asp.net-web-api asp.net-core swagger swagger-ui


【解决方案1】:

您正在使用的教程是:Swashbuckle.AspNetCore 不幸的是,在该项目中他们仍在使用 Swagger-UI 2.x 版,您的屏幕截图显示 3.x 版


有一些 Pull Requests 需要更新到最新的 Swagger-UI:

但不幸的是,在合并这些方面没有太大进展。

我知道您知道如何从 git 存储库下载文件...
我的建议:
不要下载 swagger-ui 文件,而是从使用您需要的版本的 fork 下载整个项目 Swashbuckle.AspNetCore(例如:alexvaluyskiy/Swashbuckle.AspNetCore),然后在您的项目中添加对该项目的引用而不是 nuget 包.


另一种选择可能是创建您自己的 Swashbuckle 分支。AspNetCore 合并您需要的修复程序,然后使用不同的名称发布您自己的 Nuget 包。

【讨论】:

  • 看起来那些问题已经解决了
【解决方案2】:

我遇到了类似的问题,我需要注入我的样式表:

c.InjectStylesheet("/Swagger/Ui/custom.css")

这已添加到 Startup.cs 文件中的app.UseSwaggerUI

以下文章有所帮助,但我必须合并两者的信息才能找到答案:

【讨论】:

    【解决方案3】:
    //I hope this will help you , you can get //https://localhost:44x22/docs/index.html
    
            app.UseSwagger(o =>
            {
                o.RouteTemplate = "docs/{documentName}/docs.json";
            });
            // Enable middleware to serve swagger-ui (HTML, JS, CSS, etc.), 
            // specifying the Swagger JSON endpoint.
            //This line enables Swagger UI, which provides us with a nice, simple UI with which we can view our API calls.
            app.UseSwaggerUI(c =>
            {
    
                c.IndexStream = () => GetType().Assembly
       .GetManifestResourceStream("CustomUIIndex.Swagger.index.html"); // requires file to be added as an embedded resource
                c.InjectStylesheet("/css/swagger-ui/custom.css");// css path
                c.InjectJavascript("../css/swagger-ui/custom.js"); javascript path
                c.RoutePrefix = "docs";
                c.SwaggerEndpoint("../docs/v1/docs.json", "API v1");
                c.SwaggerEndpoint("../docs/v2/docs.json", "API V2");
            });
            app.UseStaticFiles();
    

    【讨论】: