所谓概述，也就是总结一些WEB API常用的使用用法。MVC APIWEB是一个轻量级的服务接口，完全符合RestFul框架设计，每个URL代表一种资源，使用方便，没有WCF那么庞大，但是麻雀虽小五脏俱全，WEBAPI提供的内容很值得研究；API请求方式有GET、POST、PUT、DELETE。所以WEBAPI对应的APIControl提供的接口也分为以上4个类型。
1、WEBAPI创建：
使用的时候也很简单，利用VS2013新建项目，选择MVC4，让后选择WEBAPI,创建完成，这就是默认的MVC WEBAPI项目；
2、WEBAPI分析：
WEB API默认的路由是：
config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } );
这个是默认提供的路由，通过路由，我们不难发现通过Control下的id进行匹配查找，所以接下的代码也是根据ID进行处理；由于服务请求的方式GET、POST、DELETE、PUT，所以每个APIControl也就提供这4中类型，针对这个轻量级框架，这4中方式处理好，一个APIControl应对自己的逻辑也就足够了。
代码展示：
public class ProductController : ApiController
{
static List<Product> products =new List<Product> () {
new Product{Id=1,Name="Nokia Lumia 1520",Category="移动电话",Price=3500},
new Product{Id=2,Name="Lenovo Thinkpad T430S",Category="便携式计算机",Price=8000},
new Product{Id=3,Name="锤子手机",Category="移动电话",Price=3300},
new Product{Id=4,Name="Wii",Category="电视游戏机",Price=1000},
new Product{Id=5,Name="Xbox 360",Category="电视游戏机",Price=3200}
};
/// <summary>
/// Get
/// </summary>
/// <returns></returns>
public IEnumerable<Product> GetAllProducts()
{
return products.OrderBy(p => p.Id);
}
/// <summary>
/// Get
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public Product GetProductById(int id)
{
Product product = products.FirstOrDefault(p => p.Id == id);
if (product==null)
{
var resp = new HttpResponseMessage(HttpStatusCode.NotFound);
throw new HttpResponseException(resp);
}
return product;
}
/// <summary>
/// Get
/// </summary>
/// <param name="productName"></param>
/// <returns></returns>
public Product GetProductByName(string productName,string category)
{
Product product = products.FirstOrDefault(p => p.Name.Contains(productName) && p.Category == category);
if (product == null)
{
var resp = new HttpResponseMessage(HttpStatusCode.NotFound);
throw new HttpResponseException(resp);
}
return product;
}
public IEnumerable<Product> GetAllProductsByCategory(string category)
{
if (category.Equals("--请选择--"))
{
return products;
}
IEnumerable<Product> productList = products.Where(p => string.Equals(p.Category, category, StringComparison.OrdinalIgnoreCase));
return productList.OrderBy(p => p.Id);
}
public bool PostProduct(Product product)
{
int index = products.FindIndex(p => p.Name == product.Name);
if (index != -1)
{
return false;
}
product.Id = products.Max(p => p.Id) + 1;
products.Add(product);
return true;
}
//public IEnumerable<Product> PostProductByCategory(string Category)
//{
// //if (currpate.Category.Equals("--请选择--"))
// //{
// // return products;
// //}
// //IEnumerable<Product> productList = products.Where(p => string.Equals(p.Category, currpate.Category, StringComparison.OrdinalIgnoreCase));
// return products;// productList.OrderBy(p => p.Id);
//}
//public IEnumerable<Product> PostProductByCategory22([FromBody] JObject currpate)
//{
// dynamic json = currpate;
// JObject curtxt = json.prodcut;
// //if (currpate.Category.Equals("--请选择--"))
// //{
// // return products;
// //}
// //IEnumerable<Product> productList = products.Where(p => string.Equals(p.Category, currpate.Category, StringComparison.OrdinalIgnoreCase));
// return products;// productList.OrderBy(p => p.Id);
//}
public bool PutProduct(int id, [FromBody]Product product)
{
int index = products.FindIndex(p => p.Id == id);
if (index == -1)
{
return false;
}
products.RemoveAt(index);
products.Add(product);
return true;
}
/// <summary>
/// DELETE
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public bool DeleteProduct(int id)
{
Product product = products.FirstOrDefault(p => p.Id == id);
if (product == null)
{
return false;
}
else
{
products.Remove(product);
return true;
}
}
}
}
代码分析：
以上就是一个简单的ControlAPI，通过代码分析，一个APIControl也就包含4中请求方式，准对GET方式请求，我们就要仔细区分ID参数进行逻辑判断。
看看客户端JS请求的方式：
<script type="text/javascript"> $(function () { $InitData(); $bindClick(); }); $InitData = function () { $.getJSON("../api/Product", function (data) { if (data != null) { if ($("#resultList").length > 0) { $("#resultList").remove(); } var html = "<ol id='resultList' class='round'>"; $.each(data, function (key, value) { html += "<li class='one'><h5>" + value.Name + "</h5>类型：" + value.Category + " 价格：" + value.Price + " | <a href='#' onclick='editProduct(" + value.Id + ")'>编辑</a><a href='#' onclick='deleteProduct(" + value.Id + ")'>删除</a></li>"; }); html += "</ol>"; $("#result").append(html); } }); } $bindClick = function () { // 01.按产品类型搜索产品 $("#productTypes").bind("change", function () { //$.getJSON("../api/Product", { category: $(this).find("option:selected").text() }, function (data) { // if (data != null) { // $("#resultList").remove(); // var html = "<ol id='resultList' class='round'>"; // $.each(data, function (key, value) { // html += "<li class='one'><h5>" + value.Name + "</h5>类型：" + value.Category // + " 价格：" + value.Price + " | <a href='#' onclick='editProduct(" + value.Id + ")'>编辑</a><a href='#' onclick='deleteProduct(" + value.Id + ")'>删除</a></li>"; // }); // html += "</ol>"; // $("#result").append(html); // } //}); var prodcut = { Category: "移动电话", Price:253, Id:5 }; var prodcut2 = { Category: "移动电话2", Price: 253, Id: 5 }; //$.ajax({ // type: "POST", // url: "../api/Product/PostProductByCategory", // data: JSON.stringify({ prot: prodcut }), // contentType: "application/json", // dataType:"xml", // success: function (data) { // console.log(data); // if (data != null) { // $("#resultList").remove(); // var html = "<ol id='resultList' class='round'>"; // $.each(data, function (key, value) { // html += "<li class='one'><h5>" + value.Name + "</h5>类型：" + value.Category // + " 价格：" + value.Price + " | <a href='#' onclick='editProduct(" + value.Id + ")'>编辑</a><a href='#' onclick='deleteProduct(" + value.Id + ")'>删除</a></li>"; // }); // html += "</ol>"; // $("#result").append(html); // } // } //}); $.ajax({ type: "POST", url: "../api/Product", data: { Category: $("#editProductType").find("option:selected").text()}, success: function (data) { console.log(data); if (data != null) { $("#resultList").remove(); var html = "<ol id='resultList' class='round'>"; $.each(data, function (key, value) { html += "<li class='one'><h5>" + value.Name + "</h5>类型：" + value.Category + " 价格：" + value.Price + " | <a href='#' onclick='editProduct(" + value.Id + ")'>编辑</a><a href='#' onclick='deleteProduct(" + value.Id + ")'>删除</a></li>"; }); html += "</ol>"; $("#result").append(html); } } }); }); // 02.按产品名搜索产品 $("#btnSearchByName").bind("click", function () { var searchName = $("#productName").val(); if (searchName == "") { showMsg("提示", "您还没有输入要搜索的产品名称"); } $.getJSON("../api/Product", { productName: searchName, category: '电视游戏机' }, function (data) { if (data != null) { $("#resultList").remove(); var html = "<ol id='resultList' class='round'>"; html += "<li class='one'><h5>" + data.Name + "</h5>类型：" + data.Category + " 价格：" + data.Price + " | <a href='#' onclick='editProduct(" + data.Id + ")'>编辑</a><a href='#' onclick='deleteProduct(" + data.Id + ")'>删除</a></li>"; html += "</ol>"; $("#result").append(html); clearText(); } }); }); // 03.搜索全部产品信息 $("#btnSearchAll").bind("click", $InitData); // 04.新增一个产品信息 $("#btnPostProduct").bind("click", function () { var productName = $("#newProductName").val(); var productCategory = $("#newProductType").find("option:selected").text(); var productPrice = $("#newProductPrice").val(); if (productName == "") { showMsg("提示", "请输入产品名称"); } else if (productCategory == "" || productCategory == "--请选择--") { showMsg("提示", "请选择产品类型"); } else if (productPrice == "") { showMsg("提示", "请输入产品价格"); } else if (isNaN(productPrice)) { showMsg("提示", "产品价格请输入数字类型"); } else { $.post("../api/Product", { Name: productName, Category: productCategory, Price: productPrice }, function (data) { if (data != null && data == true) { $InitData(); clearText(); showMsg("提示", "添加新产品操作成功"); } else { showMsg("提示", "添加新产品操作失败"); } }); } }); // 07.修改一个产品信息 $("#btnPutProduct").bind("click", function () { var productId = $("#hiddProductId").val(); $.ajax({ type: "PUT", url: "../api/Product/" + productId, data: { Id: productId, Name: $("#editProductName").val(), Category: $("#editProductType").find("option:selected").text(), Price: $("#editProductPrice").val() }, success: function (data) { if (data == true) { $InitData(); $("#myEditModal").window("close"); showMsg("提示", "您已成功修改那玩意"); } else { showMsg("提示", "修改那玩意操作失败"); } } }); }); // 关闭模态对话框 $("#btnCloseModal").bind("click", function () { $("#myEditModal").window("close"); }); } // 05.编辑一个产品信息 function editProduct(productId) { $.getJSON("../api/Product", { id: productId }, function (data) { if (data != null) { $("#hiddProductId").val(data.Id); $("#editProductName").val(data.Name); switch (data.Category) { case "移动电话": $("#editProductType").val("0"); break; case "便携式计算机": $("#editProductType").val("1"); break; case "电视游戏机": $("#editProductType").val("2"); break; } $("#editProductPrice").val(data.Price); } }); $("#myEditModal").show(); $("#myEditModal").window({ title: "编辑产品信息", modal: true, collapsible: true, minimizable: false, maximizable: false, resizable: false, 500, height: 220 }); } // 06.删除一个产品信息 function deleteProduct(productId) { $.messager.confirm("提示", "您确定要删除这玩意？", function (r) { if (r) { $.ajax({ type: "DELETE", url: "../api/Product/" + productId, data: {}, success: function (data) { if (data == true) { $InitData(); showMsg("提示", "您已成功删除那玩意"); } else { showMsg("提示", "删除那玩意操作失败"); } } }); } }); } function showMsg(title, msg) { $.messager.alert(title, msg, "info"); } function clearText() { $("input[type=text]").val(""); } </script>
JS也就是采用数据请求的方式，Ajax请求完成数据操作。
3、WEB API路由扩展：
在MVC中，大家看到的更多的路由模式是含有Action,可是WEBAPI就没有了，当然如果想使用自定义路由模式展现Action也是可行的，注册自定义路由
public static void Register(HttpConfiguration config)
{
//自定义路由
config.Routes.MapHttpRoute(
name: "DefaultSprtApi",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
);
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
// 取消注释下面的代码行可对具有 IQueryable 或 IQueryable<T> 返回类型的操作启用查询支持。
// 若要避免处理意外查询或恶意查询，请使用 QueryableAttribute 上的验证设置来验证传入查询。
// 有关详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=279712。
//config.EnableQuerySupport();
// 若要在应用程序中禁用跟踪，请注释掉或删除以下代码行
// 有关详细信息，请参阅: http://www.asp.net/web-api
config.EnableSystemDiagnosticsTracing();
}
这这个里面，我们就把Action 加载里面了，有了这个Action，那么我们的APIControl又该怎么操作，才能获取我们想要的数据。不着急，这就展示APIControl代码
public IEnumerable<Product> PostProductByCategory22([FromBody] JObject currpate) { dynamic json = currpate; JObject curtxt = json.prodcut; //if (currpate.Category.Equals("--请选择--")) //{ // return products; //} //IEnumerable<Product> productList = products.Where(p => string.Equals(p.Category, currpate.Category, StringComparison.OrdinalIgnoreCase)); return products;// productList.OrderBy(p => p.Id); }
代码参数中多了一个FromBody，FromBody有什么功能那？查询CSDN发现，FromBody能够强制APIControl通过客户端或者Body读取参数，所以看看JS代码：
var prodcut = { Category: "移动电话", Price:253, Id:5 }; var prodcut2 = { Category: "移动电话2", Price: 253, Id: 5 }; $.ajax({ type: "POST", url: "../api/Product/PostProductByCategory", data: JSON.stringify({ prot: prodcut }), contentType: "application/json", dataType:"xml", success: function (data) { console.log(data); if (data != null) { $("#resultList").remove(); var html = "<ol id='resultList' class='round'>"; $.each(data, function (key, value) { html += "<li class='one'><h5>" + value.Name + "</h5>类型：" + value.Category + " 价格：" + value.Price + " | <a href='#' onclick='editProduct(" + value.Id + ")'>编辑</a><a href='#' onclick='deleteProduct(" + value.Id + ")'>删除</a></li>"; }); html += "</ol>"; $("#result").append(html); } } });
使用这个地方这种方式，客户端需要注意事项：
1、需要设置请求content-Type。这里设置为contentType: "application/json"；
2、发送的数据格式JSon.
服务端ControlAPI也需要注意，这个只能设置一个类型为FromBody参数，所以逻辑一定要封装好。
参考文章：
http://blog.jobbole.com/85008/
http://www.cnblogs.com/wk1234/archive/2012/04/28/2468491.html
MVC: