ASP.NET Web API 中文版

weixin_33936401發表於2016-03-02
ASP.NETWebAPI

前言
HTTP不僅僅服務於web頁面，同時也是構建暴露服務和資料的API的強大平臺。HTTP有著簡單、靈活和無處不在的特點。你能想到的幾乎所有平臺都包含有一個HTTP庫，所以HTTP服務可以遍及廣泛的客戶端，包括瀏覽器、移動裝置和傳統桌面應用程式。
ASP.NET Web API是一個在.NET框架上構建web API的框架。在本教程中，你將使用ASP.NET Web API來建立一個返回產品列表的web API。
建立Web API專案
在本教程中，你將使用ASP.NET Web API來建立一個返回產品列表的web API。前端頁面使用jQuery來顯示結果。

870342-158bccae8f8bfc54
這裡寫圖片描述

開啟Visual Studio並在開始頁面選擇New Project。或者在File目錄下選擇New，然後選擇Project。
在Template皮膚中，選擇Installed Templates，然後展開Visual C#節點。在Visual C#節點下，選擇Web。在專案模板列表中，選擇ASP.NET Web Application。命名專案為“ProductsApp”並點選OK。
870342-22fdc1ddcfb4f258
這裡寫圖片描述

在NEW ASP.NET Project對話方塊中，選擇Empty模板。在”Add folders and core references for”，選中Web API。點選OK。
註釋：你也可以用“Web API”模板來建立Web API。Web API模板使用了ASP.NET MVC來提供API的幫助頁面。我在本教程中使用Empty模板是因為我希望不用MVC來展示Web API。通常，你不必瞭解ASP.NET MVC就能使用Web API。
新增模型
模型是在你的應用程式中表示資料的物件。ASP.NET Web API能夠將你的模型自動序列化成JSON、XML或其他格式，然後將其序列化資料寫入到HTTP響應訊息的body中。只要客戶端能夠讀取序列化格式，它就能夠反序列化出物件。幾乎所有客戶端都能解析XML或JSON。而且，客戶端還能通過在HTTP請求的Accept header中設定來指明它想要的格式。
讓我們來建立一個表示產品的簡單模型吧。
如果Solution Explorer沒有顯示出來，點選View選單，然後選擇Solution Explorer。在Solution Explorer中，右擊Models資料夾。從上下文選單中選擇Add，然後選擇Class。
870342-4ef5c8202a87b811
這裡寫圖片描述

命名該類為“Product”。新增以下屬性到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; } }}

新增控制器
在Web API中，控制器（controller）是處理HTTP請求的物件。我們將新增一個能夠根據ID來返回多個或一個產品的控制器。
備註：如果你還沒有使用過ASP.NET MVC，你應該已經對控制器很熟悉了。Web API的控制器和MVC的控制器很相近，但是它繼承的是ApiController而不是Controller。
在Solution Explorer中，右擊Controllers資料夾。選擇Add，然後選擇Controller。

870342-7d4904346ba887cb
這裡寫圖片描述

在Add Scaffold對話方塊中，選擇Web API Controller – Empty。點選Add。
870342-dcac28668cc104fe
這裡寫圖片描述

在Add Controller對話方塊，給控制器命名為”ProductsController”。點選Add。
870342-c1c63c6475da1527
這裡寫圖片描述

接下來便會在Controllers資料夾下建立一個名為ProductsController.cs的檔案。
870342-fee09ee72703a075
這裡寫圖片描述

備註：其實你不必非得把控制器新增到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 = "Tomato Soup", Category = "Groceries", 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 } }; 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); } }}

為了讓示例簡單化，products被儲存在控制器類中的固定陣列中。當然，在實際應用程式中，你可能想要查詢資料庫或使用其他外部資料來源。
控制器定義了兩個返回產品的方法：
GetAllProducts方法將整個產品列表作為IEnumerable型別返回。

GetProduct方法通過它的ID來查詢單個產品。

沒錯，你已經有一個可以使用的web API了。控制器上的每個方法都對應一個或多個URI：

Controlle Method
URI

GetAllProducts
/api/products

GetProduct
/api/products/id

對於GetProduct方法，URI中的id是一個佔位符。例如，為了得到一個ID為5的產品，URI是api/products/5。
使用JavaScript和jQuery來呼叫Web API
在本節中，我們將新增一個使用AJAX來呼叫Web API的HTML頁面。我們將使用jQuery來產生AJAX呼叫並用返回結果來更新頁面。
在Solution Explorer中，右擊專案並選擇Add，然後選擇New Item。

870342-8ac6a726180b2487
這裡寫圖片描述

在Add New Item對話方塊中，選擇Visual C#下的Web節點，然後選擇HTML Page選項。命名頁面為“index.html”。
870342-20029c3242771149
這裡寫圖片描述

用以下程式碼替換檔案中的全部：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Product App</title></head><body> <div> <h2>All Products</h2> <ul id="products" /> </div> <div> <h2>Search by 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 () { // Send an AJAX request $.getJSON(uri) .done(function (data) { // On success, 'data' contains a list of products. $.each(data, function (key, item) { // Add a list item for the 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('Error: ' + err); }); } </script></body></html>

有好幾個方法去得到jQuery。在本例中，我使用Microsoft Ajax CDN。你也可以在http://jquery.com/下載它，讓ASP.NET “Web API”專案包含jQuery。
得到產品列表
為了得到Products列表，可以傳送一個HTTP的GET請求到“/api/products”。
jQuery的getJSON函式會傳送AJAX請求。其中包含了JSON物件陣列。done函式指定了一個當請求成功時觸發的回撥。在回撥中，我們用產品資訊更新DOM。

$(document).ready(function () { // Send an AJAX request $.getJSON(apiUrl) .done(function (data) { // On success, 'data' contains a list of products. $.each(data, function (key, item) { // Add a list item for the 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('Error: ' + err); });}

我們仍然使用getJSON來傳送AJAX請求，但是這次我們將ID放到URI請求中。它的響應會是一個代表了單個產品的JSON物件。
執行應用程式
按F5開始除錯應用程式，web頁面看起來會是下面這樣：

870342-574b20b30de7babc
這裡寫圖片描述

為了通過ID獲得產品，輸入ID並點選Search。
870342-dba84e573e9111e7
這裡寫圖片描述

如果你輸入了一個無效的ID，那麼伺服器就會返回HTTP錯誤訊息。
870342-3297e2eb97b7f12d
這裡寫圖片描述

使用F12檢視HTTP請求和響應
當你工作於HTTP服務時，如果能夠檢視HTTP請求和響應的詳細無疑是非常有幫助的。你可以在IE9中使用F12開發者工具來做這些操作。在IE9中，按F12來開啟工具。點選Network皮膚，並點選Start Capturing。現在返回到web頁面，並按F5來重新載入web頁面。IE將會捕捉到瀏覽器和web伺服器之間的HTTP傳輸。下圖顯示了一個頁面的所有HTTP傳輸。
870342-d9116ce8f31ba6df
這裡寫圖片描述

定位到相對URI”api/products/“。選中並點選Go to detailed view。在詳細檢視中，這裡多個皮膚用於檢視請求和響應的header和body。
例如，如果你點選Request headers，你就會看到客戶端在Accept header請求了”application/json“。
870342-7fe93abf4713a83b
這裡寫圖片描述

如果你點選了Response body，你就會看到產品列表如何被序列化成JSON。其他瀏覽器也有相似的功能。另一個有用的工具是Fiddler，它是一個web除錯代理工具。你可以使用Fiddler來檢視HTTP傳輸，也可以合成HTTP請求，後者能夠給予你在請求上對於HTTP頭部的完全控制。

相關文章