標籤：
前言
Http不僅僅服務於Web Pages。它也是一個建立展示服務和資料的API的強大平台。Http是簡單的、靈活的、無處不在的。你能想象到幾乎任何的平台都會有HTTP服務庫。HTTP服務可以涉及到範圍廣泛的用戶端，包括瀏覽器、各種行動裝置和傳統的傳統型應用程式。
Asp.Net Web API是在.NET Framework架構上用於建立Web APIs的一個架構。在這個教程中，你將會使用Asp.Net Web API架構來建立一個能夠返回產品列表的Web API。前端的Web 頁面使用jQuery來展示這個結果。
在這個教程當中我將會使用VS2013來建立一個簡單的樣本。提供本文項目樣本下載連結http://pan.baidu.com/share/link?shareid=928144769&uk=4244870074
建立一個Web API項目
第一步：啟動Visual Studio，進行建立項目。下面是項目建立過程。
您還可以建立一個 Web API 項目，利用"Web API"模板。Web API 模板使用 ASP.NET MVC 提供 API 的協助頁。我使用的空模板在本教程中因為我想要顯示無 MVC Web API。一般情況下，你不需要知道 ASP.NET MVC 中使用 Web API。
添加Model
一個模型就是在你的應用程式中展示資料的一個對象。ASP.NET Web API 可以自動序列化你的模型到 JSON、 XML 或一些其他的格式，然後把已序列話的資料寫入到HTTP響應訊息的本文。只要用戶端可以讀取序列化的資料，那麼它同樣可以反序列這個對象。大多數的用戶端都可以解析JSON或者XML。此外，用戶端可以聲明它想要通過 HTTP 要求訊息中設定的接受標題的那種格式。
讓我們開始建立一個簡單的用於展示產品的Model。
直接在Model檔案夾右鍵，如所示。然後命名為“Product”,再為其添加如下屬性：
namespace WebApi.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中，控制器就是一個處理HTTP請求的對象。我們將添加一個控制器，它既可以返回一個產品的列表資料，也可以通過產品ID返回單個產品資訊。
請注意：如果你使用了 ASP.NET MVC 中，您已熟悉控制器。Web API 控制器類似於 MVC 控制器，但是繼承ApiController類，而不是控制器類。
在控制器（Controller）檔案夾右鍵，然後添加控制器，再選擇一個空的API控制器模版如所示，命名為ProductsController。
你不需要將你添加的Api控制器必須放入到命名為“Controller”的檔案夾。這隻是方便的來組織你的源檔案的檔案夾名稱。
然後開啟該控制器檔案 ProductsController，將代碼替換為以下內容
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; using WebApi.Models; namespace WebApi.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); } }}
為了保持範例的簡單，通過上面的代碼可以發現我們將資料儲存在一個固定的陣列變數裡。當然在真實的應用程式中，你會查詢一個資料庫，或者其他的資料來源。
在控制器中定義了返回產品的兩個方法：
GetAllProducts方法返回產品的整個列表，並以IEnumerable<Product>類型作為傳回型別。
GetProductById方法通過產品ID進行查詢一個單個產品。
就這麼簡單，現在你有一個工作的Web API了。控制器上的每個方法都對應了一個或多個URI。
對於GetProductById的方法，URI 中的id就是一個預留位置。例如，若要獲得id 為 5 的產品，URI 是api/products/5。
有關 Web API 如何將 HTTP 要求路由到控制器方法的詳細資料，請參見請參見本系列中的ASP.NET Web API 中的路由。
通過JavaScript和jQuery來調用Web API
在這個小節，我們將添加一個HTML頁面來使用AJAX來調用Web API。我們將使用jQuery的AJAX來調用並來更新頁面的結果。
在Web API項目上右鍵選擇Html頁進行添加，並命名為Index。
在本文我們通過使用Microsoft Ajax CDN，直接http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js。
用以下內容來替換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 () { $.getJSON(uri) .done(function (data) { $.each(data, function (key, item) { $(‘<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>
GetAllProducts
為了擷取一個產品的列表，需要發送一個“api/products”的HTTP Get請求。
jQuery的GetJSON函數發送一個AJAX請求。為了響應包含JSON對象的數組。指定的done函數如果請求成功，則會調用回呼函數。在這個回呼函數中，我們將更新產品資訊到DOM元素。
var uri = ‘api/products‘; $(document).ready(function () { $.getJSON(uri) .done(function (data) { $.each(data, function (key, item) { $(‘<li>‘, { text: formatItem(item) }).appendTo($(‘#products‘)); }); }); }); function formatItem(item) { return item.Name + ‘: $‘ + item.Price; }
GetProduct
通過一個ID擷取一個產品的資訊，我們需要發送一個“api/products/id”的HTTP請求，id就是產品ID。
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); }); }
我們仍然使用 getJSON來發送 AJAX 請求，但這次我們將 ID 放在請求 URI 中。來自此請求的響應是一個單一產品的 JSON 表示。
調試、運行
通過上面的示範可以看到列表是實現了，然後通過下面的搜尋方塊進行搜尋，也就是通過單個ID來擷取單個產品資訊的也實現了。
我現在使用的是IE10,那麼你可以直接通過F12來查看請求的資訊
總結
本文初步簡單的使用了Asp.Net Web API，作為一個簡單入門樣本。通過簡單的理解和翻譯微軟官網的文章，來進一步的學習英語，提高自己閱讀英文文章的能力，也來學習一下微軟的新技術，雖然Web API出來也很久了，可是對於我來說，這也是初次接觸。如果您正在查看本文，那麼希望本文能對您有所協助。如果文中有什麼不當之處，敬請瞭解，也希望您能協助我修正一下。
下一節將來學習建立一個支援CRUD操作的Web API。
本文的參考連結為http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-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
