ASP.NET Web API简单学习

Web API 简介

Web API可以返回 json、xml类型的数据，对于数据的增删改查，提供了对应的资源操作，按照要求的类型进行处理，主要包括：Get（查），Post（增），Put（改），Delete（删），这些都是Http协议支持的请求方式。

Web API的请求方式：根据路由规则请求。

WebService 和 Web API两种Web服务的比较：

WebService	基于SOAP风格的网络服务，使用方法进行请求
Web API	基于REST风格的网络服务，使用资源进行请求

Web API 中5个方法分别是查单个、查所有、增加、修改、删除。

微软有了WebService和WCF为什么还要Web API？

用过WCF的人应该都清楚，面对一大堆复杂的配置文件，万一出了问题，真的会叫人抓狂，而且不同的客户端调用的也不是很方便。不得不承认WCF的功能确实是很强大，可是有时候我们不需要那么复杂的功能，只需要简单的仅通过使用HTTP或者HTTPS来调用增删改查，这时候，Web API就应运而生了。那么什么时候考虑使用WebAPI呢？

需要WebService但是不需要SOAP

需要在已有的WCF服务基础上建立non-soap-based http服务

只想发布一些简单的HTTP服务，不想使用相对复杂的WCF配置

发布的服务可能会被带宽受限的设备访问

希望使用开源框架，关键时候可以自己调试或者定义一下框架

创建 WebAPI

首先新建一个WebAPI项目：

建完以后的目录结构是这样的：

在Models目录中新建类 Product，代码如下图所示：

    public class Product{public int id { get; set; }public string Name { get; set; }public string Category { get; set; }public decimal Price { get; set; }}

在Controller文件夹下添加控制器，注意要选择Web API 控制器，如下图所示：

Controller中默认示例化了一个Product类并添加了一些初始化的数据，实际情况要从数据库取数据，如下图所示：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Text;
using System.Web.Http;
using WebApplication1.Models;namespace WebApplication1.Controllers
{public class ProductsController : ApiController{List<Product> products = new List<Product>{new Product { id = 1,Name = "Tomato Soup",Category = "Grocerices",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}};[HttpGet]public IHttpActionResult GetAllProducts() => Json<List<Product>>(products);[HttpGet]public IHttpActionResult GetProduct(int id) => Json<Product>(products.FirstOrDefault(p => p.id == id));[HttpPost]public IHttpActionResult PostProduct(Product proudct){products.Add(proudct);return Json<List<Product>>(products);}[HttpPut]public IHttpActionResult PutProduct(Product product){var pro = products.FirstOrDefault(p => p.id == product.id);pro.Name = product.Name;pro.Category = product.Category;pro.Price = product.Price;return Json<Product>(pro);}[HttpDelete]public IHttpActionResult DeleteProduct(int id){products.RemoveAt(id);return Json<List<Product>>(products);}}
}

修改index.cshtml页面，去掉默认的代码，添加如下代码，用于测试Web API：


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Product App</title>
</head>
<body><div><h2>All Product</h2><ul id="products"></ul></div><div><h2>Search by ID</h2><input type="text" id="prodId" size="5"/><input  type="button" value="Search" onclick="find()"/><p id="product"></p></div><div><h3>Add Product</h3>id <input  id="id" type="text"/><br />Name:<input id="name" type="text" /><br />Category:<input id="category" type="text" /><br />Price:<input id="price" type="text" /><br /><input type="button" value="AddP" onclick="Add()"/></div><div><h3>update Product</h3>id <input id="up_id" type="text" /><br />Name:<input id="up_name" type="text" /><br />Category:<input id="up_category" type="text" /><br />Price:<input id="up_price" type="text" /><br /><input type="button" value="UpdataP" onclick="update()" /></div><div><h3>delete Product</h3>id <input id="delete_id" type="text"/><br /><input type="button" value="DeleteP" onclick="deletep()" /></div>
</body>
</html>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">var url = "api/products";//用于保存用户输入数据var Product = {create: function () {Id: "";Name: "";Category: "";Price: "";return Product;}}$(document).ready(function () {$.getJSON(url).done(function (data) {$.each(data, function (key, item) {$('<li>', { text: formatItem(item) }).appendTo($('#products'));})})});function formatItem(item){return item.Name + ': $' + item.Price;}function find(){var id = $('#prodId').val();$.getJSON(url + '/' + id).done(function (data) {$('#product').text(formatItem(data));}).fail(function (jqXHR, textStatus, err) {$('#product').text('Error:' + err);});}function Add(){var newProduct = Product.create();newProduct.Id = $("#id").val();newProduct.Price = $("#price").val();newProduct.Name = $("#name").val();newProduct.Category = $("#category").val();$.ajax({url: "/api/Products",type: "POST",contentType: "application/json; charset=utf-8",data: JSON.stringify(newProduct),success: function (data) {$('ul li').remove()$.each(data, function (key, item) {$('<li>', { text: formatItem(item) }).appendTo($('#products'));})},error: function (XMLHttpRequest, textStatus, errorThrown) {alert("请求失败，消息：" + textStatus + "  " + errorThrown);}});}function update(){var newProduct = Product.create();newProduct.Id = $("#up_id").val();newProduct.Price = $("#up_price").val();newProduct.Name = $("#up_name").val();newProduct.Category = $("#up_category").val();$.ajax({url: "/api/Products",type: "PUT",contentType: "application/json; charset=utf-8",data: JSON.stringify(newProduct),success: function (data) {$('#product').text(formatItem(data));},error: function (XMLHttpRequest, textStatus, errorThrown) {alert("请求失败，消息：" + textStatus + "  " + errorThrown);}});}function deletep(){$.ajax({url: "/api/Products",type: "DELETE",contentType: "application/json; charset=utf-8",data: { "id": $("#delete_id").val() },success: function (data) {$('ul li').remove()$.each(data, function (key, item) {$('<li>', { text: formatItem(item) }).appendTo($('#products'));})},error: function (XMLHttpRequest, textStatus, errorThrown) {alert("请求失败，消息：" + textStatus + "  " + errorThrown);}});}
</script>

运行以后即可测试，框架会自动根据不同类型的http请求去寻找control中对应的方法，测试页面如下图所示：