ASP.NET MVC Web API 學習筆記---Web API概述及程序示例

時間 2019-11-06

標籤 asp.net asp mvc web api 學習筆記概述程序示例欄目 ASP 简体版

原文原文鏈接

1. Web API簡單說明javascript

近來不少大型的平臺都公開了Web API。好比百度地圖 Web API，作過地圖相關的人都熟悉。公開服務這種方式可使它易於與各類各樣的設備和客戶端平臺集成功能，以及經過在瀏覽器中使用 JavaScript來建立更豐富的HTML體驗。因此我相信Web API會愈來愈有它的用武之地。html

說道Web API不少人都會想到Web服務，可是他們仍然有必定的區別：Web API服務是經過通常的 HTTP公開了，而不是經過更正式的服務合同（如SOAP）java

2. ASP.NET Web API簡介jquery

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

(1)現代 HTTP 的編程模型：在你的 Web 應用程序中直接訪問和處理 HTTP 請求並響應，使用清潔、強類型的 HTTP 對象模型。除了在服務器上支持這個 HTTP 的編程模型以外，經過使用新的 HttpClient API來從任何.NET 應用程序中調用 Web ApI，咱們也支持客戶端中相同的編程模型。json

(2)內容協商： Web API 有對內容協商的內置支持 — — 這使客戶端和服務器一塊兒工做以決定從一個 API 返回的正確的數據格式。咱們爲JSON、 XML 和Form URL 編碼的格式提供默認支持，並能夠經過添加你本身的格式化程序來擴展這種支持，或者甚至用你本身的來替換默認的內容協商策略。api

(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 的圖片信息。(後面詳細介紹)