Using the Swagger-ui open Source component in the Web API (a deep pit solution)

Source: Internet
Author: User

Introduction:

Swagger-ui is a great Web API description help page, specific details can be Google and Baidu.

Official website: Http://swagger.io/GitHub Address: Https://github.com/swagger-api/swagger-ui

Use:

Swagger-ui is a pure front-end language development of the project, all the powerful functions by JS implementation. In order to be able to use in the. NET Web API project, we borrowed the swashbuckle developed by Domaindrivendev to configure it. The configuration method is as follows:

1. Install Swashbuckle in NuGet and it will rely on the installation of Swashbuckle.core. After the installation is complete, the SwaggerConfig.cs file will be added to your App_start directory.

2. Right-click your Web API project, select Properties, then tap Generate. Tick the XML document file. Select the above output path yourself. This is how I configure it.

3, in the SwaggerConfig.cs file, Cancel C.includexmlcomments (Getxmlcommentspath ()), and write code for the method, in fact, is to find the second generated XML file

4, in the appropriate location of your project (such as: views\shared\_layout.cshtm) to increase the access path

5. Run your Web API project and click Swagger.  You'll be able to see the swagger page. is still very simple to use.

So here's the question:

Since Swagger-ui is a purely front-end language development tool, I would like to customize it, it should be easy. The truth is, it's easy (deep pit).

There are two ways we do this:

The first kind: Go to swagger-ui official website, download the latest source code, your own configuration. Anyway, just read the XML file you generated, and there's not much to say.

The second type: we are using the swashbuckle developed by Domaindrivendev . and this is open source ( deep pit ), we lower the source code, compile it yourself, modify the changes can be, the result of this pit I jumped.

Needless to say, at that time the situation is under the source code down, various can not understand, regardless of him, directly replace the NuGet Swashbuckle.core reference, and then run up, found missing a heap of JS, CSS files. But in the source code but did not find those missing files, Chi Chi looked for a long time. Guess is to get through the network, but in the Chorme debugging, found all local files. Finally all kinds of no fruit.

Had to go back and compile the package that NuGet came down under and pulled out. NET Programmer's artifact Ilspy. Found in the next DLL file, the missing files are all in the resources,

Suddenly enlightened, the original is an additional resource file, then we add it.

But the results found that I simply can not follow the anti-compilation, according to a certain path and format to add those files!!! Do not believe yourself can try to see what kind of resource files are added in the way and path.

After trying n methods, there is still no effect. Had to go to help, finally in the guidance of ifish, found this ....

Well, the problem is solved here.

In the project's csproj file, the author configures the import of the resource file.  But in the release of the code, forget to add the Swagger-ui code, but also with such an unpopular way to import resource files.   It's really powerless to spit out the groove. But it's also learning something new (the pit).

Finally slightly modified, the Swagger-ui integration into the Swashbuckle.core, small changes as follows

1 <!--automatically embed swagger-ui files. Construct name So resource can is retrieved by Swagger-ui relative path -2   <ItemGroup>3     <EmbeddedResourceInclude= "Swagger-ui\dist\**\*.*">4       <LogicalName>% (recursivedir)% (FileName)% (Extension)</LogicalName>5       <Inproject>False</Inproject>6     </EmbeddedResource>7   </ItemGroup>

Problem Solving! The rest is the front-end work, self-defined. such as Chinese, the official language pack, quoting two JS files can:

   <!--Chinese Translation--    <script src= ' lang/translator-js ' type= ' Text/javascript ' ></script>    

Information found during the learning process: Swagger Project home: Https://github.com/swagger-api/swagger-ui

Swashbuckle Project Home: Https://github.com/domaindrivendev/Swashbuckle


These three are some of the domestic research and sharing of the article: Https://github.com/helei112g/swagger-ui

Http://www.cnblogs.com/Flyear/p/4870373.html

Http://www.cnblogs.com/yxlblogs/p/4075932.html




Using the Swagger-ui open Source component in the Web API (a deep pit solution)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.