ASP.NET MVC Web API 學習筆記---第一個Web API程式---近來很多大型的平台都公開了Web API

標籤：

1. Web API簡單說明

近來很多大型的平台都公開了Web API。比如百度地圖 Web API，做過地圖相關的人都熟悉。公開服務這種方式可以使它易於與各種各樣的裝置和用戶端平台整合功能，以及通過在瀏覽器中使用 JavaScript來建立更豐富的HTML體驗。所以我相信Web API會越來越有它的用武之地。

說道Web API很多人都會想到Web服務，但是他們仍然有一定的區別：Web API服務是通過一般的 HTTP公開了，而不是通過更正式的服務合約 （如SOAP）

 2. ASP.NET Web API簡介

    ASP. NET Web API支援讓你能夠輕鬆地建立功能強大的 Web API，可以從範圍廣泛的用戶端 （包括使用 JavaScript從瀏覽器中，到任何移動/用戶端平台上的本機應用程式）訪問。它提供以下支援：

 

(1)現代 HTTP 的編程模型：在你的 Web 應用程式中直接存取和處理 HTTP 要求並響應，使用清潔、 強型別的 HTTP 物件模型。除了在伺服器上支援這個 HTTP 的編程模型之外，通過使用新的 HttpClient API來從任何.NET 應用程式中調用 Web ApI，我們也支援用戶端中相同的編程模型。

(2)內容協商： Web API 有對內容協商的內建支援 — — 這使用戶端和伺服器一起工作以決定從一個 API 返回的正確的資料格式。我們為JSON、 XML 和Form URL 編碼的格式提供預設支援，並可以通過添加你自己的格式化程式來擴充這種支援，或者甚至用你自己的來替換預設的內容協商策略。

(3)查詢組成： Web API 通過 OData URL 公約使你能夠輕鬆地支援查詢。當你從你的 Web API 返回一種類型的 IQueryable <T> 時，架構將自動為它提供 OData 查詢支援— — 使其易於分頁和排序。

(4)模型繫結和驗證：模型繫結器提供了一種簡單的方法來從HTTP 要求中的不同部分提取資料，並將這些資訊部分轉換為Web API行為可使用的.NET對象。Web API 支援相同的模型繫結和ASP. NET MVC 現今支援的驗證基礎結構。

(5)路由： Web ApI 支援完整的路由功能集。現今ASP. NET MVC 和 ASP.NET也支援這一點，包括路線參數和約束。預設情況下，Web API 還提供了智能公約，使你能夠輕鬆地建立實現 Web ApI的類，而無需不得不將屬性應用到你的類或方法中。Web API 的配置純粹是通過代碼來實現的 — — 保持你的設定檔乾淨。

(6)篩選器： Web ApI 使你能夠輕鬆地使用和建立篩選器 （例如： [授權]），那樣你能夠封裝和應用交叉行為。

(7)改進的可測試性： 與其在靜態文字物件中設定 HTTP 的詳細資料，不如將 Web API 行為與 HttpRequestMessage 和 HttpResponseMessage 一起使用— — 兩個新 的HTTP對象 （在其他內） 使測試更容易。例如，你可以單元測試你的 Web ApI，而無需不得不使用 Mocking 架構。

(8)IoC支援： Web API 支援由 ASP. NET MVC 實現的服務定位器模式，使你能夠解決不同裝置的依賴。你可以輕鬆地使用IoC容器或依賴注射架構來整合，以保持乾淨的依賴解決方案。

   (9)靈活的託管： Web ApI可以託管在任何類型的 ASP.NET應用程式內 （包括這兩個基於應用程式的ASP. NET MVC和ASP.NET Web Forms）。我們還設計了 Web API 支援，這樣，你還可以選擇在你自己的進程內託管/公開它們，如果你不想使用 ASP.NET/IIS 來這樣做。至於你如何以及在哪兒使用它，這給了你最大的靈活性。

 

 

 3. 建立一個Web API程式

 啟動VS2012建立一個新項目，在已經安裝的模板中選擇 ASP.NET MVC4 Web API程式

 

在ASP.NET MVC項目對話方塊中選擇Web API項，點擊確定 

 

建立成功之後工程中會自動添加一個Web API服務控制器，上面並附帶訪問地址 

 

項目解決方案，選擇Models檔案夾右鍵 添加一個Model類 

 

代碼如下： 

 namespace Git.Framework.WebAPI.Models {     public class Contact     {         public int ID { get; set; }
        public string Name { get; set; }
        public string Sex { get; set; }
        public DateTime Birthday { get; set; }
        public int Age { get; set; }     } } 

 

 工程解決方案選擇Controllers檔案夾右鍵添加一個新的Web API controller

 

 在添加控制器彈出對話方塊中選擇模板： 空API控制器

 

控制器中添加如下代碼： 

 namespace Git.Framework.WebAPI.Controllers {     public class ContactController : ApiController     {         Contact[] contacts = new Contact[]          {              new Contact(){ ID=1, Age=23, Birthday=Convert.ToDateTime("1977-05-30"), Name="情緣", Sex="男"},             new Contact(){ ID=2, Age=55, Birthday=Convert.ToDateTime("1937-05-30"), Name="令狐沖", Sex="男"},             new Contact(){ ID=3, Age=12, Birthday=Convert.ToDateTime("1987-05-30"), Name="郭靖", Sex="男"},             new Contact(){ ID=4, Age=18, Birthday=Convert.ToDateTime("1997-05-30"), Name="黃蓉", Sex="女"},         };
        /// <summary>         /// /api/Contact         /// </summary>         /// <returns></returns>         public IEnumerable<Contact> GetListAll()         {             return contacts;         }
        /// <summary>         /// /api/Contact/id         /// </summary>         /// <param name="id"></param>         /// <returns></returns>         public Contact GetContactByID(int id)         {             Contact contact = contacts.FirstOrDefault<Contact>(item=>item.ID==id);             if (contact == null)             {                 throw new HttpResponseException(HttpStatusCode.NotFound);             }             return contact;         }
        /// <summary>         /// 根據性別查詢         /// /api/Contact?sex=女         /// </summary>         /// <param name="sex"></param>         /// <returns></returns>         public IEnumerable<Contact> GetListBySex(string sex)         {             return contacts.Where(item => item.Sex == sex);         }     }} 

 

4. 瀏覽器訪問API路徑

Controller             Methed	URI
GetListAll	/api/Contact
GetListBySex	"/api/Contact?sex=" + sex
GetContactByID	/api/Contact/"+id

 

在IE瀏覽器中瀏覽出現如下效果

 

如果在Chrome 或者 FireFox 中瀏覽會先下如下效果

 

 

 

5. Javascript訪問Web API

 在項目中添加一個About View視圖

 

代碼如下：

 @{     Layout = null; }
<!DOCTYPE html>
<html> <head>     <meta name="viewport" content="width=device-width" />     <title>About</title>     <script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>     <script type="text/ecmascript">         $(document).ready(function () {             $("#btnAll").click(function () {                 $.getJSON("/api/Contact", function (data) {                     var html = "<ul>";                     $(data).each(function (i, item) {                         html += "<li>"+item.ID+":"+item.Name+":"+item.Sex+"</li>";                     });                     html += "</ul>";                     $("#contactAll").html(html);                 });             });
            $("#btnID").click(function () {                 var id = $("#txtID").val();                 $.getJSON("/api/Contact/"+id, function (data) {                     var html = "<ul>";                     $(data).each(function (i, item) {                         html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>";                     });                     html += "</ul>";                     $("#contactID").html(html);                 });             });
            $("#btnSex").click(function () {                 var sex = $("#ddlSex").val();                 $.getJSON("/api/Contact?sex=" + sex, function (data) {                     var html = "<ul>";                     $(data).each(function (i, item) {                         html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>";                     });                     html += "</ul>";                     $("#contactSex").html(html);                 });             });         });     </script> </head> <body>     <p>         <input type="button" id="btnAll" value="查詢所有" />&nbsp;     </p>     <p>         <input type="text"  id="txtID" name="txtID"/>         <input type="button" id="btnID" value="根據ID查詢" />&nbsp;     </p>     <p>         <select id="ddlSex" name="ddlSex">             <option value="男">男</option>             <option value="女">女</option>         </select>         <input type="button" id="btnSex" value="根據性別查詢" />&nbsp;     </p>     <div id="contactAll">     </div>     <div id="contactID">     </div>     <div id="contactSex">     </div> </body> 

</html>

 

運行結果

 

 6. Web API總結

      1.Web API 控制器(Controller) 繼承ApiController

      2. Api 的 Url Map： api/{controller}/{id} 每個"Action"是通過 Http謂詞(GET/POST/PUT/DELETE)映射的

3.用戶端可以通過 Http Header 的 Accept 指定返回資料的格式。預設是支援：appliction/xml 和 application/json，當想返回比如 image/jpeg 這樣的圖片格式時，需要添加 MediaTypeFormatter 。比如：當指定某個 Task 時，通過指定 Accept : image/jpeg 擷取該 Task 的圖片資訊。(後面詳細介紹)

      該系列大概20篇左右，期待各位的拍磚！

 

ASP.NET MVC Web API 學習筆記---第一個Web API程式---近來很多大型的平台都公開了Web API