楊孟易翻譯於2015年1月15日星期四
HTTP不只是服務了網頁。這也是一個強大的平台，構建公開服務和數據的API。 HTTP是簡單，靈活，並且無處不在的。幾乎你能想到的任何平台上都有一個HTTP庫，所以HTTP服務可以達到廣泛的客戶，包括瀏覽器，移動設備和傳統的桌面應用程序。
ASP.NET Web API是在.NET Framework上構建的Web API的框架。在本教程中，你將使用ASP.NET Web API來創建一個產品清單的Web API。
教程使用的軟件版本
- Visual Studio 2013 update 4
- Web API 2
創建Web API項目
在本教程中，你將使用ASP.NET Web API來創建一個產品清單的Web API。前端網頁使用jQuery來顯示結果。
啟動Visual Studio，並從起始頁中選擇新建項目，或者從文件菜單，選擇新建，然后選擇項目。
在模板窗口中，選擇已安裝的模板，並展開Visual C＃節點。在Visual C＃中，選擇Web。在項目模板列表中，選擇ASP.NET Web應用程序。將項目命名為“ProductsApp”，然后單擊確定。
在新建ASP.NET項目對話框中，選擇Empty。在“為以下對象添加文件夾和核心引用”，勾選Web API。點擊確定。
你也可以使用“Web API”模板創建Web API項目。在Web API模板中使用ASP.NET MVC提供API幫助頁面。因為我想證明沒有MVC的Web API，所以本教程使用的是空模板。一般情況下，你不需要知道ASP.NET MVC后才使用Web API。
添加Model（模型）
model（模型）是一個對象，它代表了應用程序中的數據。 ASP.NET Web API可以自動將model（模型）序列化為JSON、XML或者其他格式，然后將序列化的數據寫入到HTTP響應消息的正文。只要客戶端可以讀取序列化格式，它就可以反序列化對象。大多數客戶端可以解析XML或者JSON。此外，客戶端可以通過設置HTTP請求消息的Accept報頭來獲取想要的消息格式。
讓我們先創建一個代表產品的簡單model（模型）。
如果解決方案資源管理器看不見，單擊視圖菜單，然后選擇解決方案資源管理器。在解決方案資源管理器中，右鍵單擊Models文件夾。從上下文菜單中，選擇添加，然后選擇類。
命名類為“Product”。將以下屬性添加到產品類。
namespace ProductsApp.Models { 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（控制器） 是一個處理HTTP請求的對象。 我們將添加一個controller控制器，可以返回的產品列表或通過ID指定一個產品。
注意：如果你已經使用ASP.NET MVC，已經熟悉了控制器。Web API控制器類似於MVC控制器，但繼承ApiController類，而不是Controller類。
在解決方案資源管理器中，右鍵單擊Controllers（控制器）文件夾。選擇添加，然后選擇控制器。
在添加基架對話框中，選擇Web API控制器 - 空。單擊添加。
在添加控制器對話框，命名controller（控制器）為“ProductsController”，點擊添加。
在Controllers文件夾下面，基架創建了一個名為ProductsController.cs的文件。
你不需要把contollers（所有控制器）都放到一個文件夾命名為Controllers。該文件夾的名字僅僅是方便你組織源文件的一種方式。
如果此文件尚未打開，雙擊打開該文件。替換在此文件中使用以下的代碼：
using ProductsApp.Models; using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Web.Http; namespace ProductsApp.Controllers { public class ProductsController : ApiController { Product[] products = new Product[] { new Product { Id = 1, Name = "番茄蛋湯", Category = "湯類", Price = 10 }, new Product { Id = 2, Name = "土豆絲", Category = "中餐", Price = 3.75M }, new Product { Id = 3, Name = "漢堡包", Category = "快餐", Price = 16.99M } }; public IEnumerable<Product> GetAllProducts() { return products; } public IHttpActionResult GetProduct(int id) { var product = products.FirstOrDefault((p) => p.Id == id); if (product == null) { return NotFound(); } return Ok(product); } } }
為了令例子簡單，產品存儲在控制器類中的固定數組。當然，在實際應用中，你會查詢數據庫，或使用一些其他的外部數據源。
該控制器定義了返回產品兩種方法：
- GetAllProducts 方法返回產品IEnumerable<Product>類型的整個列表。
- GetProduct 方法通過其ID查找單個產品。
就是這樣！你有一個運行中的Web API。控制器上的每個方法對應於一個或多個URI：
| 控制器方法 | URI |
| GetAllProducts | /api/products |
| GetProduct | /api/products/id |
針對GetProduct方法，在URI中的id是一個占位符。例如，為了得到編號為5的產品，該URI就為api/products/5。
有關如何使Web API將HTTP請求路由到控制器方法的詳細信息，請參閱Routing in ASP.NET Web API（未翻譯，導航到官網）.
通過JavaScript和jQuery調用Web API
在本節中，我們將添加使用AJAX調用Web API的HTML頁面。我們將使用jQuery做AJAX調用，也會根據返回結果更新頁面。
在解決方案資源管理器中，右鍵單擊該項目並選擇添加，然后選擇新建項。
在添加新項對話框中，在Visual C＃下面選擇Web節點，然后選擇HTML頁的項目。命名頁“index.html”。
以下內容替換這個文件中的所有內容：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Product App</title> </head> <body> <div> <h2>所有產品</h2> <ul id="products" /> </div> <div> <h2>通過ID搜索</h2> <input type="text" id="prodId" size="5" /> <input type="button" value="Search" onclick="find();" /> <p id="product" /> </div> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script> <script> var uri = 'api/products'; $(document).ready(function () { // 發送AJAX請求 $.getJSON(uri) .done(function (data) { // 如果成功，‘data’包含產品列表。 $.each(data, function (key, item) { // 將列表添加到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('錯誤: ' + err); }); } </script> </body> </html>
有幾種方法得到的jQuery。在這個例子中，我使用了百度的Ajax CDN。您也可以從http://jquery.com/下載，並且ASP.NET的“Web API”項目模板已經包括了jQuery。
獲得產品列表
為了獲得產品列表，發送HTTP GET請求到“/api/products”。
jQuery的getJSON方法發送了AJAX請求。響應包含JSON對象的數組。如果請求成功，將回調done方法，更新產品信息的DOM節點。
$(document).ready(function () { // 發送AJAX請求 $.getJSON(apiUrl) .done(function (data) { // 如果成功，‘data’包含產品列表。 $.each(data, function (key, item) { // 將列表添加到product節點。 $('<li>', { text: formatItem(item) }).appendTo($('#products')); }); }); });
通過ID獲得一個產品
為了通過ID獲得產品，發送一個HTTP的GET請求到“/api/products/id”，其中id就是產品ID。
function find() { var id = $('#prodId').val(); $.getJSON(apiUrl + '/' + id) .done(function (data) { $('#product').text(formatItem(data)); }) .fail(function (jqXHR, textStatus, err) { $('#product').text('錯誤: ' + err); }); }
我們仍然調用的getJSON發送Ajax請求，但這次我們把ID加在請求的URI上。從這個請求的響應是一個單一產品的JSON格式。
運行應用程序
按F5開始調試應用程序。該網頁應該像下面這樣：
要通過ID獲得產品，輸入ID，然后點擊搜索：
如果輸入一個無效的ID，服務器返回一個HTTP錯誤：
下一章，將介紹Web API 2 的Action Results，或者參考原文Action Results in Web API 2