隨着技術的前沿，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，今天就先了解這么些，后續繼續學習。文章那里要是有描述錯誤還是不對的地方，還請前輩們多多批評指教，大家共同學習，進步！