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

Programer Cat發表於2017-05-17
WebAPIASP.NET

示例程式碼下載地址：http://download.csdn.net/detail/gangzhucoll/9844909

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

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

本教程中使用的軟體版本

建立一個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。

有關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" οnclick="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開始除錯應用程式。網頁應如下所示：

2

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

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

使用F12檢視HTTP請求和響應

當您使用HTTP服務時，檢視HTTP請求和請求訊息非常有用。您可以使用Internet Explorer 9中的F12開發人員工具來執行此操作。從Internet Explorer 9中，按F12開啟工具。單擊網路選項卡，然後按開始捕獲。現在回到網頁，按F5重新載入網頁。Internet Explorer將捕獲瀏覽器和Web伺服器之間的HTTP流量。摘要檢視顯示頁面的所有網路流量：

找到相對URI“api / products /”的條目。選擇此條目，然後單擊轉到詳細檢視。在詳細檢視中，有選項卡來檢視請求和響應標題和主體。例如，如果您單擊請求標題選項卡，您可以看到客戶端在Accept標頭中請求“application / json”。

如果您單擊響應體選項卡，您可以看到產品列表如何序列化為JSON。其他瀏覽器具有相似的功能。另一個有用的工具是Fiddler，一個Web除錯代理。您可以使用Fiddler檢視您的HTTP流量，還可以編寫HTTP請求，從而可以完全控制請求中的HTTP頭。


相關文章