001.開始使用ASP.NET Web API 2(一)

原文鏈接：http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api

(ps:文章只是講解一些如何創建Web API的步驟和一個簡單示例，沒有涉及到路由選擇和方法選擇，后續的一篇是專門講解這方面的。兩篇是一起翻譯的，其實兩篇應該一起發，但一起又會很長，就周六發吧，這篇當是我的見習基礎翻譯文章吧。)

1.前言

HTTP不僅僅致力于網站的頁面，它還是一個強有力的平臺，用來提供服務和展現數據。HTTP是簡單、靈活且無處不在。絕大多數的能想到的平臺都有HTTP的類庫，所以HTTP服務能夠應用于瀏覽器端，移動端以及桌面程序等廣泛的客戶端。ASP.NET WEB API是能由.NET框架提供的一項技術，在本教程中，你將會使用ASP.NET Web API來建立用來返回產品列表的API。

2.建立API工程

在本教程中，你將會使用ASP.NET Web API創建返回產品列表的API。首先在前端頁面，使用jQuery來顯示結果。如下圖

打開vs，選擇新建Web API工程。根據不同的vs版本，新建的方法可能有些不同，但大同小異，大家可自行新建。

3.添加數據模型

一個模型對象在程序中代表了你的數據。ASP.NET Web API能夠了自動的序列化你的模型到JSON、XML或者其它的格式，然后將這些序列化后的數據寫到HTTP的報文消息中。直到客戶端能夠讀到序列化后的數據，能反序列化成對象。大多數客戶端都具有這樣的能力。此外，通過設置在報表消息中請求的頭能返回相應客戶端所需要的數據。(ps:簡單的示例文章中，一些個概念還是可以溫故知新的，比如序列化和反序列化)

讓我們開始建一個簡單的模型來表示一個產品。

文件命名為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; }
    }
}

4.添加API控制器

在Web API中，控制器是處理HTTP請求的對象，我們將添加一個通過產品ID返回該產品信息的一個控制器。

(ps:按步驟點吧，原文圖片截圖挺多，能少用就少用吧)

命名為ProductsController，代碼如下

namespace ProductsApp.Controllers
{
    public class ProductsController : Controller
    {

        Product[] products = new Product[] 
        { 
            new Product{Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1},
            new Product{Id = 2, Name = "Tomato Soup", Category = "Groceries", Price = 1},
            new Product{Id = 3, Name = "Tomato Soup", Category = "Groceries", Price = 1}
        };

        public IEnumerable<Product> GetAllProducts()
        {
            return products;
        }

        public IHttpActionResult GetProduct(int id)
        {
            var product = products.FirstOrDefault((p) => p.Id == id);
            if (product == null)
            {
                return HttpFound();
            }
            return Ok(product);
        }
    }
}

為了保持案例簡單，產品數據存儲在這個控制器中一個封閉的數組，當然在真實的程序中，你可以通過從數據庫中或者其它的途徑查詢到數據。

在控制器中定義了兩個方法用來返回產品

GetAllProducts方法返回一個IEnumerable<Product>類型的產品列表

GetProduct方法返回一個產品通過ID

那就對了。我們已經有了Web API了。每一個方法的訪問如下。

相要更多知道關于Web API如何選擇控制器的方法，可以看控制器路由選擇

(ps:下一篇就是這個，上面的代碼其實是有不通的地方，我用的是vs2012，可能沒Web API 2的類庫，所以打不到一些類，網上找了方法，使用NuGet安裝WebApi，但安裝失敗，有知道的話，可以發表下自己的解決辦法。)

5.顯示數據

(ps:靜態的頁面還是不附了，主要的是js，作者使用的是jQuery)

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

為了得到產品列表，發送一個請求到”/api/products”

jQuery中的getJSON方法發送一個AJAX請求，作為返回的數據為包含JSON對象的數組。done 方法標識了一個回調函數，當請求成功時執行。

(對應是頁面加載DOM完成的ready回調)

我們依然使用getJSON方法來發送請求，但這次在URL中放上一個id，那請求過來的數據將會是一個產品的信息。

(對應是find函數)

(ps：上面的一些知識對于我來說還是比較好理解的，更不用說大家了，周六晚會發一篇路由的選擇，路由方法選擇還是挺有規律的。由淺入深，以后會多看看更更深層次的文章。)