文章出處

ASP.NET Web API 2（C＃）入門

在這篇文章中

作者：Mike Wasson

下載完成的項目

HTTP不僅僅是為了提供網頁。它也是構建公開服務和數據的API的強大平臺。HTTP簡單，靈活，無所不在。幾乎任何可以想到的平臺都有一個HTTP庫，所以HTTP服務可以覆蓋廣泛的客戶端，包括瀏覽器，移動設備和傳統的桌面應用程序。

ASP.NET Web API是在.NET Framework之上構建Web API的框架。在本教程中，您將使用ASP.NET Web API創建返回產品列表的Web API。

本教程中使用的軟件版本

Visual Studio 2017
Web API 2

創建一個Web API項目

在本教程中，您將使用ASP.NET Web API創建返回產品列表的Web API。前端網頁使用jQuery顯示結果。

啟動Visual Studio并從“ 開始”頁面選擇“ 新建項目 ” 。或者，從文件菜單中選擇新建，然后選擇項目。

在“ 模板”窗格中，選擇“ 已安裝的模板”并展開Visual C＃節點。在Visual C＃下，選擇Web。在項目模板列表中，選擇ASP.NET Web應用程序。將項目命名為“ProductsApp”，然后單擊“ 確定”。

在“ 新建ASP.NET項目”對話框中，選擇“ 空”模板。在“添加文件夾和核心參考”下，查看Web API。單擊確定。

注意

您還可以使用“Web API”模板創建一個Web API項目。Web API模板使用ASP.NET MVC提供API幫助頁面。我正在使用本教程的空模板，因為我想顯示沒有MVC的Web API。一般來說，你不需要知道ASP.NET MVC來使用Web API。

添加模型

一個模型是代表你的應用程序中的數據的對象。ASP.NET Web API可以自動將您的模型序列化為JSON，XML或其他格式，然后將序列化數據寫入HTTP響應消息的正文。只要客戶端可以讀取序列化格式，它可以反序列化對象。大多數客戶端可以解析XML或JSON。此外，客戶端可以通過在HTTP請求消息中設置Accept頭來指示所需的格式。

我們先來創建一個代表產品的簡單模型。

如果解決方案資源管理已不可見，單擊視圖菜單，然后選擇解決方案資源管理器。在解決方案資源管理器中，右鍵單擊Models文件夾。從上下文菜單中，選擇添加，然后選擇類。

將類命名為“產品”。將以下屬性添加到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中，控制器是處理HTTP請求的對象。我們將添加一個控制器，可以返回產品列表或由ID指定的單個產品。

注意

如果您使用ASP.NET MVC，您已經熟悉了控制器。Web API控制器類似于MVC控制器，但繼承ApiController類而不是Controller類。

在解決方案資源管理器中，右鍵單擊Controllers文件夾。選擇添加，然后選擇控制器。

在“ 添加腳手架”對話框中，選擇“ Web API控制器” - “空”。單擊添加。

在“ 添加控制器”對話框中，命名控制器“ProductsController”。單擊添加。

腳手架在Controllers文件夾中創建一個名為ProductsController.cs的文件。

注意

您不需要將控制器放入名為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);
        }
    }
}

為了保持這個例子的簡單，產品存儲在控制器類的固定數組中。當然，在實際應用中，您可以查詢數據庫或使用其他外部數據源。

控制器定義了返回產品的兩種方法：

該GetAllProducts方法將整個產品列表作為IEnumerable <Product>類型返回。
該GetProduct方法通過其ID來查找單個產品。

而已！你有一個工作的Web API。控制器上的每個方法對應于一個或多個URI：

控制器方法	URI
GetAllProducts	/ API /產品
GetProduct	/ api / products / id

對于該GetProduct方法，URI中的id是占位符。例如，要獲得ID為5的產品，URI為api/products/5。4

有關Web API如何將HTTP請求路由到控制器方法的更多信息，請參閱ASP.NET Web API中的路由。

使用Javascript和jQuery調用Web API

在本節中，我們將添加一個使用AJAX調用Web API的HTML頁面。我們將使用jQuery進行AJAX調用，并且還可以使用結果更新頁面。

在解決方案資源管理器中，右鍵單擊項目，然后選擇添加，然后選擇新建項。

在添加新項目對話框中，選擇Visual C＃下的Web節點，然后選擇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。在這個例子中，我使用了Microsoft 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獲取產品

要通過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開始調試應用程序。網頁應如下所示：

要通過ID獲取產品，請輸入ID并單擊搜索：

如果輸入無效的ID，則服務器返回HTTP錯誤：

使用F12查看HTTP請求和響應

當您使用HTTP服務時，查看HTTP請求和請求消息非常有用。您可以使用Internet Explorer 9中的F12開發人員工具完成此操作。從Internet Explorer 9中，按F12打開工具。單擊網絡選項卡，然后按開始捕獲。現在回到網頁，按F5重新加載網頁。Internet Explorer將捕獲瀏覽器和Web服務器之間的HTTP流量。摘要視圖顯示頁面的所有網絡流量：1