Swagger – To Explore The Schema Specification Of The REST API Service

Swagger is a simple and powerful  option for defining the interface of a REST web service. Swashbuckle combined with the API Explorer and Swagger UI provides a rich discovery, documentation and playground for the API consumers. This article provides details on how to use Swagger with REST API

1. Create a new project in Web API Project Template in Visual Studio

2. Search Swagger in Nuget package manager and install the swashbuckler

After the package is installed, it will create a new file (SwaggerConfig.cs) under the APP_Start folder. This file is the swagger configuration.

3. Create the Web API service with necessary services.

4. Run the project

5. http://localhost:62862/swagger

It will lists all the Rest API Service available

We can test the service in the swagger directly.

 /// <summary>
 /// To get a specific customer value
 /// </summary>
 /// <param name="id">Input the Customer ID </param>
 /// <returns>It will return the customer id,name and address</returns>
 public Customer Get(int id)
 {
 	return new Customer { Id = 1001, Address = "dfs", Name = "Test" };
 }

Include the API Comments in the swagger help documentation

· Include the xml documentation in the file system of the project build folder.

Include the code in swaggerconfig.cs

 private static string GetXmlCommentsPath()
         {
             return string.Format(@"{0}binswagger.xml", System.AppDomain.CurrentDomain.BaseDirectory);
         }
         public static void Register()
         {
             var thisAssembly = typeof(SwaggerConfig).Assembly;
 
             GlobalConfiguration.Configuration 
                 .EnableSwagger(c =>
                     {
                         c.IncludeXmlComments(GetXmlCommentsPath());
 ....

Customize swagger ui using the stylesheet and Javascript

· Include the custom CSS and javascript file in the project and embedded the file to project.

· Select the css and javascript goto the properties

Swagger-cus.css

 .swagger-section #header {
     background-color: #c3d9ec;
   }
 

Swagger-cus.js

 $(document).ready(function () {
     var logo = $('#logo .logo__img');
     logo[0].src = '/content/logo.png';
     $('#logo .logo__title').text('API Explorer');
 });