参考地址：
http://blog.csdn.net/yuchen_0515/article/details/51762958
http://www.dakehe.info/blog/post/how-to-use-swagger-at-aspnet-mvc
Install-Package Swashbuckle
github网址：https://github.com/domaindrivendev/Swashbuckle
更改点：
image.png
swagger的xml路径根据项目来
App_Start目录下的SwaggerConfig.cs
using System.Linq;
public static void Register()
{
var thisAssembly = typeof(SwaggerConfig).Assembly;
GlobalConfiguration.Configuration
.EnableSwagger(c =>
{
c.SingleApiVersion("v1", "API Test");
c.IncludeXmlComments(GetXmlCommentsPath());
c.ResolveConflictingActions(apiDescriptions => apiDescriptions.First());
})
.EnableSwaggerUi(c =>
{
});
}
private static string GetXmlCommentsPath()
{
return System.AppDomain.CurrentDomain.BaseDirectory + @"\bin\WebApiSwagger.XML";
}
项目结构：
image.png
namespace WebApiSwagger.Controllers.Api
{
/// <summary>
/// 产品API接口
/// </summary>
public class ProductsController : ApiController
{
Product[] products = new Product[]
{
new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
};
/// <summary>
/// 获取所有的产品
/// </summary>
/// <returns>所有产品</returns>
public IEnumerable<Product> GetAllProducts()
{
return products;
}
/// <summary>
/// 根据Id获取产品
/// </summary>
/// <param name="id">产品Id</param>
/// <returns>产品信息</returns>
public IHttpActionResult GetProduct(int id)
{
var product = products.FirstOrDefault((p) => p.Id == id);
if (product == null)
{
return NotFound();
}
return Ok(product);
}
}
}
Homt/Index.cshtml
@{
Layout = null;
ViewBag.Title = "Home Page";
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Product App</title>
</head>
<body>
<div>
@Html.ActionLink("Swagger Help", "", "Swagger", new { area = "" }, null)
</div>
<div>
<h2>All Products</h2>
<ul id="products" />
</div>
<div>
<h2>Search by ID</h2>
<input type="text" id="prodId" size="5" />
<input type="button" value="Search" onclick="find();" />
<p id="product" />
</div>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script>
var uri = 'api/products';
$(document).ready(function () {
// Send an AJAX request
$.getJSON(uri)
.done(function (data) {
// On success, 'data' contains a list of products.
$.each(data, function (key, item) {
// Add a list item for the product.
$('<li>', { text: formatItem(item) }).appendTo($('#products'));
});
});
});
function formatItem(item) {
return item.Name + ': $' + item.Price;
}
function find() {
var id = $('#prodId').val();
$.getJSON(uri + '/' + id)
.done(function (data) {
$('#product').text(formatItem(data));
})
.fail(function (jqXHR, textStatus, err) {
$('#product').text('Error: ' + err);
});
}
</script>
</body>
</html>
上面的 导航到接口页
<div>
@Html.ActionLink("Swagger Help", "", "Swagger", new { area = "" }, null)
</div>
image.png
Web.config中允许跨域设置 在system.webServer节点下增加如下配置
<httpProtocol>
<!-- 允许跨域配置 -->
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*"/>
<add name="Access-Control-Allow-Headers" value="X-Requested-With,Content-Type,Authorization"/>
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE,OPTIONS"/>
<add name="Access-Control-Allow-Credentials" value="true"/>
</customHeaders>
</httpProtocol>
