11+ Year IT Industry Experience, Working as Technical Lead with Capgemini | Consultant | Leadership and Corporate Trainer | Motivational and Technical Speaker | Career Coach | Author | MVP | Founder Of RVS Group | Trained more than 4000+ IT professionals | Azure | DevOps | ASP.NET | C# | MVC | WEB API | ANGULAR | TYPESCRIPT | MEAN | SQL | SSRS | WEB SERVICE | WCF... https://bikeshsrivastava.blogspot.in/ http://bikeshsrivastava.com/

Swagger integration with web api in MVC.

Introduction

In this article you can see integration of swagger in WebApi2.Swashbuckle/Swagger is simple and powerful representation of any RESTful web api.Swagger is simple works as client to call restfull web api with Application,no need to use other third party testing tool(postman,fiddler,etc..).what topic i am covering in this article you can see given list below.

  • What is Swashbuckle/Swagger ?
  • How to integrate swagger  with WebApi in MVC? 
  • How to use swagger in web application?
  • How to customize swagger ?
  • End point representation in swagger UI.
  • Advantage of Swagger.
What is washbuckle/Swagger?
 Swagger is advance technique to represent RESTfull web api.Swagger is working with application,you can configure swagger inside your application,its very easy to use and integrate inside your MVC WebApi project. 
Technically we can say- Swagger is a formal specification which is  surrounded by a large ecosystem of tools, which includes each and everything from front-end user interfaces, this is low-level code libraries and commercial API management solutions.
How to integrate with WebApi in MVC?
If you are going to integrate swagger to test webapi in mvc application follow just some step which is following given below.
Step1:- Create a MVC application using visual studio(2012-latest version).I am giving to you a example which is created on on visual studio 2012 4.5.see image...
 In this i am creating a mvc 4 application, select and type your project name and click on "OK".
Step 2:- After click on "OK" you can see the screen which is given below.
 In this image you can see two "controller" and "App_start" by default created.In this image there are two controller "Home" its normal MVC controller and second is "value" which is Apicontroller.Because swagger doesn't listing normal controller.
Step 3:-Go your application "SwaggerTesting"=>Right click=>Click on "Manage nuget packeges",thereafter you can see a screen.see image..
 After this screen type "swagger" in search textbox=>click on install,you should wait for 1 minute ,because it will take approximate 30 sec-1 minute.
Or 
Go "TOOLS" menu on the top of screen=>Library package manager=>Package manager console =>after that will be open new window on bottom of editor.
PM>Install-Package Swashbuckle -Version 5.4.0 
 After that  swagger.config file will add automatically in your App_Start folder.see image....
 You can see swagger.config file added in App_start folder.so  now you are ready to use swagger in your application,No need to any custom configuration by default you can use.
How to use swagger ?
Swagger works same as web application,you can run same as well as mvc controller,action and view.below i am going to explain how to use swagger.
Step 3:- Run your application without any customization  in application.see image.
 After running the application by default page will be open via this end point "http://localhost:10832/" ,to use swagger type "/swagger" and press enter.then your end point("http://localhost:10832/swagger") will open a new UI page .as per image you can see example.
This is swagger UI page.you can see here "swaggerTesting" is header text,you can customize as per you requirement.
In this you can see swagger listed only api controller not simple controller.Click on "Value" row you can see each action with header,parameter,action name,get,post,etc..

Step 4:-Click on "Value"=>Expand all api list with request method .
you can see all api list ,according HTTP method colour is different. Now click on any and test to show output.see image....
 Step 5:-Now click on any web api,you can see all details of web api.after that set parameter and click on "Try it out".
output will be shown on bottom of screen.
 Customization of swagger.config
Customization of swagger means ,Show api details from xml content,change layout.now i am going to explain how to show details of each api on swagger UI page. i am going to change swagger.config file to display api details on right corner of screen.
Step 6:-Go application=>right click=>property=>Select Build=>check "xml document file" to enable get xml content.
see image..
 In this image you can see i have checked on checkbox to enable xml document.Also i have added one more fresh ApiController.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Net;  
  5. using System.Net.Http;  
  6. using System.Web.Http;  
  7. using SwaggerTesting.Models;  
  8.   
  9. namespace SwaggerTesting.Controllers  
  10. {  
  11.     public class SwaggerTestController : ApiController  
  12.     {  
  13.         /// <summary>  
  14.         /// get simple string   
  15.         /// </summary>  
  16.           
  17.         [HttpGet]  
  18.         public string ResultGet()  
  19.         {  
  20.             return "swagger testing for get";  
  21.         }  
  22.         /// <summary>  
  23.         /// Post simple string   
  24.         /// </summary>  
  25.           
  26.         [HttpPost]  
  27.         public string ResultPost()  
  28.         {  
  29.             return "swagger testing for post";  
  30.         }  
  31.         /// <summary>  
  32.         /// To Update databse using EmpId  
  33.         /// </summary>  
  34.         /// <param name="EmpId"></param>  
  35.         [HttpPut]  
  36.         public string UpdateEmployee(Employee Emp)  
  37.         {     
  38.             /////////type code according your application  
  39.   
  40.             return "data Updated";  
  41.         }  
  42.     }  
  43. }  
In this you can see i have used <summary> tag which represent the details of api on swagger page. 
Step 7:- After complete that step go on swagger.config file create new method to get xml documnet like this.
  1. protected static string GetXmlCommentsPath()  
  2.         {  
  3.             return Path.Combine(System.Web.HttpRuntime.AppDomainAppPath, "bin", "SwaggerTesting.XML");  
  4.         }  
and uncomment "c.IncludeXmlComments(GetXmlCommentsPath());" this line of code.
End point representation in swagger UI.
It means you see whole details of endpoint using swagger.see image which is given below.
like this "/api/swaggertest" with get method. 
Step 8:-Run again and follow previous step to open swagger UI,just type "/swagger"  in url,see image...
 In this image you can see new controller which i have created,with details on right corner.
Step 9:- click on any on set the parameter and click on "try it out",it will return output.see image....
 you can understand more see image.
 Advantage of swagger..
1.End point user standing about web api,
2.No need to add any extra configuration.
3.This can integrate easily with application.
4.No need to use other resources like postman ,etc... 
5.Easy to understand parameter,model,datatypes,header to anyone .
Conclusion 
In this article i explained about swagger,i hope you can understand good,Actually i am creating a dummy application so here no need to use routing,but if you are going to craete web api set the route for each web api. 
You have just read an article that categorized by title MVC / WEB API by title Swagger integration with web api in MVC.. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2016/09/part-34-swagger-integration-with-web.html. Thank You!
Author: Bikesh Srivastava - Saturday, September 10, 2016

1 comments for "Swagger integration with web api in MVC."

Life Is Complicated, But Now programmer Can Keep It Simple.