ps:文章只是講解一些如何創建Web API的步驟和一個簡單示例,沒有涉及到路由選擇和方法選擇,后續的一篇是專門講解這方面的。兩篇是一起翻譯的,其實兩篇應該一起發,但一起又會很長,就周六發吧,這篇當是我的見習基礎翻譯文章吧。)
1.前言
HTTP不僅僅致力于網站的頁面,它還是一個強有力的平臺,用來提供服務和展現數據。HTTP是簡單、靈活且無處不在。絕大多數的能想到的平臺都有HTTP的類庫,所以HTTP服務能夠應用于瀏覽器端,移動端以及桌面程序等廣泛的客戶端。ASP.NET WEB API是能由.NET框架提供的一項技術,在本教程中,你將會使用ASP.NET Web API來建立用來返回產品列表的API。
2.建立API工程
在本教程中,你將會使用ASP.NET Web API創建返回產品列表的API。首先在前端頁面,使用jQuery來顯示結果。如下圖
打開vs,選擇新建Web API工程。根據不同的vs版本,新建的方法可能有些不同,但大同小異,大家可自行新建。
3.添加數據模型
一個模型對象在程序中代表了你的數據。ASP.NET Web API能夠了自動的序列化你的模型到JSON、XML或者其它的格式,然后將這些序列化后的數據寫到HTTP的報文消息中。直到客戶端能夠讀到序列化后的數據,能反序列化成對象。大多數客戶端都具有這樣的能力。此外,通過設置在報表消息中請求的頭能返回相應客戶端所需要的數據。(ps:簡單的示例文章中,一些個概念還是可以溫故知新的,比如序列化和反序列化)
讓我們開始建一個簡單的模型來表示一個產品。
文件命名為Product,添加下列的屬性到Product類
1 namespace ProductsApp.Models 2 { 3 public class Product 4 { 5 public int Id { get; set; } 6 public string Name { get; set; } 7 public string Category { get; set; } 8 public decimal Price { get; set; } 9 } 10 }
4.添加API控制器
在Web API中,控制器是處理HTTP請求的對象,我們將添加一個通過產品ID返回該產品信息的一個控制器。
(ps:按步驟點吧,原文圖片截圖挺多,能少用就少用吧)
命名為ProductsController,代碼如下
namespace ProductsApp.Controllers { public class ProductsController : Controller { Product[] products = new Product[] { new Product{Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1}, new Product{Id = 2, Name = "Tomato Soup", Category = "Groceries", Price = 1}, new Product{Id = 3, Name = "Tomato Soup", Category = "Groceries", Price = 1} }; public IEnumerable<Product> GetAllProducts() { return products; } public IHttpActionResult GetProduct(int id) { var product = products.FirstOrDefault((p) => p.Id == id); if (product == null) { return HttpFound(); } return Ok(product); } } }
為了保持案例簡單,產品數據存儲在這個控制器中一個封閉的數組,當然在真實的程序中,你可以通過從數據庫中或者其它的途徑查詢到數據。
在控制器中定義了兩個方法用來返回產品
GetAllProducts方法返回一個IEnumerable<Product>類型的產品列表
GetProduct方法返回一個產品通過ID
那就對了。我們已經有了Web API了。每一個方法的訪問如下。
相要更多知道關于Web API如何選擇控制器的方法,可以看控制器路由選擇
(ps:下一篇就是這個,上面的代碼其實是有不通的地方,我用的是vs2012,可能沒Web API 2的類庫,所以打不到一些類,網上找了方法,使用NuGet安裝WebApi,但安裝失敗,有知道的話,可以發表下自己的解決辦法。)
5.顯示數據
(ps:靜態的頁面還是不附了,主要的是js,作者使用的是jQuery)
1 var uri = 'api/products'; 2 3 $(document).ready(function () { 4 // Send an AJAX request 5 $.getJSON(uri) 6 .done(function (data) { 7 // On success, 'data' contains a list of products. 8 $.each(data, function (key, item) { 9 // Add a list item for the product. 10 $('<li>', { text: formatItem(item) }).appendTo($('#products')); 11 }); 12 }); 13 }); 14 15 function formatItem(item) { 16 return item.Name + ': $' + item.Price; 17 } 18 19 function find() { 20 var id = $('#prodId').val(); 21 $.getJSON(uri + '/' + id) 22 .done(function (data) { 23 $('#product').text(formatItem(data)); 24 }) 25 .fail(function (jqXHR, textStatus, err) { 26 $('#product').text('Error: ' + err); 27 }); 28 }
為了得到產品列表,發送一個請求到”/api/products”
jQuery中的getJSON方法發送一個AJAX請求,作為返回的數據為包含JSON對象的數組。done 方法標識了一個回調函數,當請求成功時執行。
(對應是頁面加載DOM完成的ready回調)
我們依然使用getJSON方法來發送請求,但這次在URL中放上一個id,那請求過來的數據將會是一個產品的信息。
(對應是find函數)
(ps:上面的一些知識對于我來說還是比較好理解的,更不用說大家了,周六晚會發一篇路由的選擇,路由方法選擇還是挺有規律的。由淺入深,以后會多看看更更深層次的文章。)