Asp.Net MVC 4.0【Web API】
随着技术的前沿，Asp.Net也很快就步入4.0的时代了，虽然现在还没正式应用，据说MVC4.0出来的新特性很是犀利，各种犀利。结果一下给没把持住，就涉足了一下。所以分享一下，大家愿意涉足的就了解一哈。
首先，我们需要给我们的VS装环境，目前MVC4.0还是(Beta)RC版，如果日后微软发布正式版，我们需要卸载掉今天装的RC版去装正式版用。(安装MVC4.0连接是:http://www.asp.net/vnext/overview/downloads).
MVC 4.0新出的特性可谓关注最强烈的就是Web API,那Web API 到底是什么东西呢？
ASP.NET的API也是一个框架，可以很容易地建立HTTP服务。既然了解到他也是一个框架，那么我们来搞一个简单的Asp.Net的Web API.
创建一个Web API项目
启动Visual Studio 2010，并选择新建项目从 开始页。或从文件菜单中，选择“ 新建“，然后项目。在模板 “窗格中，选择已安装的模板 和扩展的Visual C＃节点。在Visual C＃中，选择网络。在项目模板列表中，选择“ ASP.NET MVC Web应用程序。命名项目“HelloWebAPI”，然后单击“ 确定“。如下图1.
图1.在新的ASP.NET MVC 4项目 “对话框中，选择的Web API ，然后单击“ 确定“。如下图2.
图2.
添加模型
一个模型是一个对象，表示应用程序中的数据。ASP.NET的Web API可以自动序列化你的模型，JSON，XML或其他格式，然后写入到HTTP响应消息体序列化的数据。只要客户端可以读取序列化格式，它可以反序列化的对象。大多数客户可以解析XML或JSON。此外，客户端可以显示的格式，希望通过设置HTTP请求消息中的Accept头。
开始创建一个简单的模型，代表了产品。
如果解决方案资源管理器中不可见，单击“ 查看 “菜单，并选择“解决方案资源管理器”。在Solution Explorer中，右键单击Models文件夹。从上下文菜单中，选择添加 ，然后选择类。类命名为“Product”。接下来，添加以下属性的Product类别。具体代码如下：
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace HelloWebAPI.Models { public class Product : Object { public int Id { get; set; } public string Name { get; set; } public string Category { get; set; } public decimal Price { get; set; } } }
添加控制器
一个控制器是一个对象，处理HTTP请求。来看看VS自动创建的Controller(控制器)，具体如下：
- HomeController中是一个传统的ASP.NET MVC控制器。这是负责服务网站的HTML页面，而不是直接相关的Web API。
- ValuesController是一个例子WebAPI控制器。
删除ValuesController 解决方案资源管理器中右键单击文件， 并选择“ 删除“。兵器添加一个新的控制器，如下图3.：(在解决方案资源管理器中，右键单击Controllers文件夹。选择“ 添加“ ，然后选择“ 控制器“。)
图3.在“ 添加控制器 “向导，将其命名控制器”的ProductsController“。在 模板下拉列表，选择空API控制器。然后单击添加。如下图4.
图4.(这里一定要看清楚模版)，创建好ProductsController，具体修改代码如下：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Net.Http; using System.Net; using System.Web.Http; namespace HelloWebAPI.Controllers { using HelloWebAPI.Models; public class ProductsController : ApiController { Product[] products = new Product[] { new Product{Id = 1 ,Name="Huitai", Category="People",Price=1.25M}, new Product{Id = 2,Name="Hello",Category="Hello",Price=4.5M}, new Product{Id = 3,Name="ViewSonic",Category="Computer",Price=1500M} }; /// <summary> /// 返回所有商品 /// </summary> /// <returns>返回一个枚举类型为Product</returns> public IEnumerable<Product> GetAllProducts() { return this.products; } /// <summary> /// 返回单一商品信息 /// </summary> /// <param name="id">商品的ID</param> /// <returns>商品</returns> public Product GetProductById(int id) { var product = this.products.FirstOrDefault(p => p.Id == id); if (product == null) { var resp = new HttpResponseMessage(HttpStatusCode.NotFound); throw new HttpResponseException(resp); } return product; } /// <summary> /// 返回指定类别所有的商品 /// </summary> public IEnumerable<Product> GetProductsByCategory(string category) { return this.products.Where(p => string.Equals(p.Category, category, StringComparison.OrdinalIgnoreCase)); } } }
现在我们就有一个工作网络的API。每个控制器上的映射到一个URI的方法，具体如下：
| 控制器方法 | URL |
| GetAllProducts | /API/products |
| GetProductById | /API/prdoucts/ID |
| GetProductsByCategory |
客户端可以通过发送一个HTTP GET请求的URI调用的方法。我们来看看如何完成这种映射。结果如下图5.
图5.OK，我们需要看到的是我们想要的东西，而不是VS自动创建的Index.cshtml页面。
我们试着用JavaScript和jQuery调用的Web API，首先我们先修改一下Index.cshtml页面具体修改如下：
<!DOCTYPE html> <html lang="en"> <head> <title>ASP.NET Web API</title> <script src="http://www.cnblogs.com/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script> </head> <body> <div> <h1>All Products</h1> <ul id='products' /> </div> <div> <label for="prodId">ID:</label> <input type="text" id="prodId" size="5"/> <input type="button" value="Search" onclick="find();" /> <p id="product" /> </div> </body> </html>
为了获得一个产品列表，发送一个HTTP GET请求“/ API /Products”。你可以用jQuery做如下:
$(document).ready(function () { //发送一个AJAX请求 $.getJSON("api/products/", function (data) { //OK,则展示所有商品列表 $.each(data, function (key, val) { //格式显示文本 var str = val.Name + ': $' + val.Price; //添加一个商品到列表 $('<li/>', { html: str }).appendTo($('#products')); }); }); });
getJSON函数发送Ajax请求。响应将是一个JSON对象的数组。getJSON的第二个参数是请求成功完成时调用的回调函数。
我们可以发送一个HTTP GET请求“/ API /Products/ ID “，其中ID是Product ID。具体如下：
function find() { var id = $('#prodId').val(); $.getJSON("api/products/" + id, function (data) { var str = data.Name + ': $' + data.Price; $('#product').html(str); }) .fail( function (jqXHR, textStatus, err) { $('#product').html('Error: ' + err); }); }
下面的代码显示完整Index.cshtml文件。具体代码如下：
<!DOCTYPE html> <html lang="en"> <head> <title>ASP.NET Web API</title> <script src="http://www.cnblogs.com/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { //发送一个AJAX请求 $.getJSON("api/products/", function (data) { //OK,则展示所有商品列表 $.each(data, function (key, val) { //格式显示文本 var str = val.Name + ': $' + val.Price; //添加一个商品到列表 $('<li/>', { html: str }).appendTo($('#products')); }); }); }); function find() { var id = $('#prodId').val(); $.getJSON("api/products/" + id, function (data) { var str = data.Name + ': $' + data.Price; $('#product').html(str); }) .fail( function (jqXHR, textStatus, err) { $('#product').html('Error: ' + err); }); } </script> </head> <body> <div> <h1>All Products</h1> <ul id='products' /> </div> <div> <label for="prodId">ID:</label> <input type="text" id="prodId" size="5"/> <input type="button" value="Search" onclick="find();" /> <p id="product" /> </div> </body> </html>
运行我们的程序，结果如下图6-9.
图6.
图7.
图8.
图9.
虽然十分丑陋，但是终究还是出来了。OK，今天就先了解这么些，后续继续学习。文章那里要是有描述错误还是不对的地方，还请前辈们多多批评指教，大家共同学习，进步！
