天天看點

Asp.Net Web API 2第一課——入門

前言

  Http不僅僅服務于Web Pages。它也是一個建立展示服務和資料的API的強大平台。Http是簡單的、靈活的、無處不在的。你能想象到幾乎任何的平台都會有HTTP服務庫。HTTP服務可以涉及到範圍廣泛的用戶端,包括浏覽器、各種移動裝置和傳統的桌面應用程式。

  Asp.Net Web API是在.NET Framework架構上用于建立Web APIs的一個架構。在這個教程中,你将會使用Asp.Net Web API架構來建立一個能夠傳回産品清單的Web API。前端的Web 頁面使用jQuery來展示這個結果。

建立一個Web API項目

 第一步:啟動Visual Studio,進行建立項目。下面是項目建立過程。

Asp.Net Web API 2第一課——入門
您還可以建立一個 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。

  

Asp.Net Web API 2第一課——入門

直接在Model檔案夾右鍵,如上圖所示。然後命名為“Product”,再為其添加如下屬性:

添加Controller

   在Web API中,控制器就是一個處理HTTP請求的對象。我們将添加一個控制器,它既可以傳回一個産品的清單資料,也可以通過産品ID傳回單個産品資訊。

請注意:如果你使用了 ASP.NET MVC 中,您已熟悉控制器。Web API 控制器類似于 MVC 控制器,但是繼承ApiController類,而不是控制器類。
Asp.Net Web API 2第一課——入門

在控制器(Controller)檔案夾右鍵,然後添加控制器,再選擇一個空的API控制器模版如下圖所示,命名為ProductsController。

Asp.Net Web API 2第一課——入門
你不需要将你添加的Api控制器必須放入到命名為“Controller”的檔案夾。這隻是友善的來組織你的源檔案的檔案夾名稱。

然後打開該控制器檔案 ProductsController,将代碼替換為以下内容

  為了保持樣例的簡單,通過上面的代碼可以發現我們将資料儲存在一個固定的數組變量裡。當然在真實的應用程式中,你會查詢一個資料庫,或者其他的資料源。

  在控制器中定義了傳回産品的兩個方法:

  GetAllProducts方法傳回産品的整個清單,并以IEnumerable<Product>類型作為傳回類型。

  GetProductById方法通過産品ID進行查詢一個單個産品。

就這麼簡單,現在你有一個工作的Web API了。控制器上的每個方法都對應了一個或多個URI。

Asp.Net Web API 2第一課——入門

對于GetProductById的方法,URI 中的id就是一個占位符。例如,若要獲得id 為 5 的産品,URI 是api/products/5。<code></code>

通過JavaScript和jQuery來調用Web API

 在這個小節,我們将添加一個HTML頁面來使用AJAX來調用Web  API。我們将使用jQuery的AJAX來調用并來更新頁面的結果。

Asp.Net Web API 2第一課——入門

在Web API項目上右鍵選擇Html頁進行添加,并命名為Index。

用以下内容來替換Index.html檔案的全部内容

  GetAllProducts

為了擷取一個産品的清單,需要發送一個“api/products”的HTTP Get請求。

jQuery的GetJSON函數發送一個AJAX請求。為了響應包含JSON對象的數組。指定的done函數如果請求成功,則會調用回調函數。在這個回調函數中,我們将更新産品資訊到DOM元素。

  GetProduct

 通過一個ID擷取一個産品的資訊,我們需要發送一個“api/products/id”的HTTP請求,id就是産品ID。

我們仍然使用 <code>getJSON來</code>發送 AJAX 請求,但這次我們将 ID 放在請求 URI 中。來自此請求的響應是一個單一産品的 JSON 表示。

調試、運作

Asp.Net Web API 2第一課——入門

通過上面的截圖示範可以看到清單是實作了,然後通過下面的搜尋框進行搜尋,也就是通過單個ID來擷取單個産品資訊的也實作了。

我現在使用的是IE10,那麼你可以直接通過F12來檢視請求的資訊

Asp.Net Web API 2第一課——入門

總結

本文初步簡單的使用了Asp.Net Web API,作為一個簡單入門示例。通過簡單的了解和翻譯微軟官網的文章,來進一步的學習英語,提高自己閱讀英文文章的能力,也來學習一下微軟的新技術,雖然Web API出來也很久了,可是對于我來說,這也是初次接觸。如果您正在檢視本文,那麼希望本文能對您有所幫助。如果文中有什麼不當之處,敬請了解,也希望您能幫助我修正一下。

下一節将來學習建立一個支援CRUD操作的Web  API。

繼續閱讀