標籤：
譯者：jiankunking 出處：http://blog.csdn.net/jiankunking
源碼下載
HTTP不僅提供web頁面服務，在構建公開服務和資料api方面,它也是一個強大的平台。HTTP簡單、靈活、無處不在。幾乎你能想到的所有的平台,都有一個HTTP庫,因此HTTP服務可以影響到廣泛的用戶端,包括瀏覽器、行動裝置,和傳統的傳統型應用程式。
ASP.NET Web API是一個基於.NET架構用於構建Web API的架構。在本教程中，您將使用ASP.NET Web API建立一個Web API並返回一個產品列表。
本教程中開發工具及環境版本：
在本教程中，將使用 ASP.NET Web API 建立一個web API項目返回一個產品列表。前端Web頁面使用jQuery來顯示結果。
啟動Visual Studio，在開始介面選擇建立新項目或者從檔案菜單選擇：建立-項目。
在模板頁選擇：已安裝-模板-Visual C#-Web。
在項目模板的列表中，選擇ASP.NETWeb應用程式。
項目名稱：“productsapp”並單擊“確定”。
在建立New ASP.NET 項目對話方塊，選擇空模板。為以下相添加檔案夾和核心引用，選擇：Web API。點擊確定。
添加Model您也可以使用“Web API”模板建立一個Web API項目。
Web API模板使用ASP.NET MVC提供API協助頁面。在本教程中我用空模板,因為我不想使用MVC來示範Web API。一般來說,你使用MVC Web API不需要知道ASP.NET MVC。
模型是一個表示應用程式中資料的對象。ASP.NET Web API可以自動序列化你的模型為JSON，XML或其他格式，然後將序列化後的資料填充到HTTP響應訊息體。
只要用戶端可以讀取序列化格式,它可以對對象進行還原序列化。大多數用戶端都能夠解析XML或JSON。此外，用戶端可以聲明它希望通過在HTTP請求的Accept前序格式（即Web API支援格式協商，用戶端可以通過Accept header通知伺服器期望的格式）。
讓我們從建立一個代表產品的簡單模型。
如果“方案總管”已不可見，請單擊“視圖”菜單並選擇“方案總管”。
在“方案總管”中，按右鍵“Models ”檔案夾。從操作功能表中，選擇“添加”然後選擇“類”：
將類命名為：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類。
在方案總管中,按右鍵Controllers 檔案夾。選擇Add然後選擇控制器。
在添加基架對話方塊中,選擇 Web API Controller - Empty。單擊添加。
再添加控制器介面，輸入：ProductsController，點擊 添加：
你不需要把你的控制器添加到一個命名為控制器檔案夾。檔案夾的名字僅僅是為了方便組織你的源檔案。
如果這個檔案沒有開啟,雙擊該檔案以開啟它。用以下代碼替換該檔案中的代碼:
using productsapp.Models;using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Net.Http;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 } }; // GET api/products public IEnumerable<Product> GetAllProducts() { return products; } // GET api/products/id public IHttpActionResult GetProduct(int id) { var product = products.FirstOrDefault((p) => p.Id == id); if (product == null) { return NotFound(); } return Ok(product); } }}為了使樣本盡量簡單,產品儲存在控制器類的一個固定的數組內。當然,在真實的應用程式中,您將查詢資料庫或使用其他一些外部資料源。
控制器定義了兩個方法,該方法返回產品:
控制器上的每個方法對應於一個或多個uri:
| Controller Method | URI |
|---|---|
| GetAllProducts | /api/products |
| GetProduct | /api/products/id |
有關如何使用Web API的HTTP請求路由到控制器方法的更多資訊，參見ASP.NET Web API路由。
拓展：
HTTP 的四個主要方法 （GET， PUT， POST， DELETE） 按照下列方式映射為 CURD 操作：
在這一部分中，我們將添加一個HTML頁面，使用AJAX調用Web API。我們將使用jQuery的Ajax調用進行和更新結果頁面。
在“方案總管”中，按右鍵該項目並選擇“添加”，然後選擇“建立項”。
在添加新項對話方塊中,選擇Visual c#節點下的Web節點,然後選擇HTML頁面項。建立名字為“index . html”的頁面。
將index . html檔案中的內容用一下代碼替換：
<!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。在這個例子中,我使用了微軟的Ajax CDN。你也可以從http://jquery.com/下載它,ASP.NET “Web API”項目模板中也包含jQuery。
擷取產品列表發送一個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‘)); }); });});通過發送一個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啟動應用調試。網頁應該看起來如下：
通過產品ID擷取產品，輸入ID點擊Search：
如果你輸入無效的ID，服務端將返回一個HTTP error：
拓展：
對於每一個 Http 訊息， ASP.NET Web API 架構通過路由表決定由哪個控制器處理請求。 當你建立一個新的 Web API 項目時， 將會包含一個類似這樣的一個預設的路由：
/api/{controller}/{id}{controller} 和 {id} 是兩個預留位置， 當遇到一個符合這種樣式的 URI ， 將將會開始尋找合適的控制器方法進行調用， 規則如下：
原文是以IE為例講解的，此處以Mozilla Firefox瀏覽器講解。
現在回到網頁並按F5鍵重新整理網頁。Mozilla Firefox將捕獲瀏覽器和Web伺服器之間的HTTP流量。概要視圖顯示一個頁面的所有網路流量：
如果你點擊“JSON”選項卡，你可以看到產品列表是如何被序列化成JSON。
原文地址
初次接觸Web API，首次翻譯外文文章，如有不對的地方，麻煩斧正。
譯者：jiankunking 出處：http://blog.csdn.net/jiankunking
ASP.NET Web API官方文檔
ASP.NET Web API 2 入門教程
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
