ASP.NET Web API 2 入門教程

衣舞晨風發表於2016-05-17

譯者：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並返回一個產品列表。

本教程中開發工具及環境版本：

Visual Studio 2015 Update 2
Web API 2

建立一個Web API專案

在本教程中，將使用 ASP.NET Web API 建立一個web API專案返回一個產品列表。前端Web頁面使用jQuery來顯示結果。

這裡寫圖片描述

啟動Visual Studio，在開始介面選擇新建新專案或者從檔案選單選擇：新建-專案。

在模板頁選擇：已安裝-模板-Visual C#-Web。
在專案模板的列表中，選擇ASP.NETWeb應用程式。
專案名稱：“productsapp”並單擊“確定”。

這裡寫圖片描述

在新建New ASP.NET 專案對話方塊，選擇空模板。為以下相新增資料夾和核心引用，選擇：Web API。點選確定。

這裡寫圖片描述

您也可以使用“Web API”模板建立一個Web API專案。
Web API模板使用ASP.NET MVC提供API幫助頁面。在本教程中我用空模板,因為我不想使用MVC來演示Web API。一般來說,你使用MVC Web API不需要知道ASP.NET MVC。

新增Model

模型是一個表示應用程式中資料的物件。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; }
    }
}

新增Controller

在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);
        }
    }

}

為了使示例儘量簡單,產品儲存在控制器類的一個固定的陣列內。當然,在真實的應用程式中,您將查詢資料庫或使用其他一些外部資料來源。
控制器定義了兩個方法,該方法返回產品:

GetAllProducts方法返回 IEnumerable型別的整個產品。
GetProduct方法根據ID返回單個產品。

控制器上的每個方法對應於一個或多個uri:

Controller Method	URI
GetAllProducts	/api/products
GetProduct	/api/products/id

有關如何使用Web API的HTTP請求路由到控制器方法的更多資訊，參見ASP.NET Web API路由。

擴充：
HTTP 的四個主要方法（GET， PUT， POST， DELETE）按照下列方式對映為 CURD 操作：

GET 用於獲取 URI 資源的進行展示， GET 操作不應對服務端有任何影響；
PUT 用於更新 URI 上的一個資源，如果服務端允許， PUT 也可以用於新建一個資源；
POST 用於新建資源，服務端在指定的 URI 上建立一個新的物件，將新資源的地址作為響應訊息的一部分返回；
DELETE 用於刪除指定的 URI 資源。

通過JavaScript和jQuery呼叫Web API

在這一部分中，我們將新增一個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'));
            });
        });
});

通過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);
        });
}