關於ASP.NET MVC4 Web API簡單總結

記錄一下 這周研究 api相關知識，主要介紹 api 分類、創建、調用。特別感謝網上同仁提供的資料。

關於 web api 分類：

wcf web api 和 asp.net web api , 2012年2月 微軟已宣布 WCF和ASP.NET 團隊合並，把WCF Web API的內容並入了ASP.NET Web API。

（詳見：http://www.cnblogs.com/shanyou/archive/2012/03/11/2390672.html）

 

關於 web api 創建:

研發環境配置：

首先需要安裝了ASP.NET MVC 4的 Visual Studio 。下面的用哪個都行：

• Visual Studio 2012
• Visual Studio 2010 且已安裝 ASP.NET MVC 4。（需要安裝vssp1補丁，耗時較長）

下面使用vs2010 為例，具體操作步驟：

第一：創建項目，選擇 mvc4 web 應用程序

 

第二：在彈出的“新 ASP.NET MVC 4 項目”對話框中，選擇“Web API”然后點“確定”。

 

第三：當你創建完項目以后，”新建項目“向導就自動創建了2個控制器。在解決方案資源管理器里展開”Controllers“目錄就能看到了。

• HomeController 是一個傳統的 ASP.NET MVC 控制器。它只是負責處理站點的HTML頁，跟Web API沒有直接關系。
• ValuesController 是一個示例 WebAPI 控制器。

解決方案資源管理里，右擊 Controllers 目錄，選擇”添加“，”控制器“：並且選擇控制器模版類型,如圖：

 

第四：

控制器定義了三個方法，要么返回單個商品，要么返回一組產品：

• GetAllProducts 方法返回所有的產品，返回類型為 IEnumerable<Product> 。
• GetProductById 方法通過ID查詢某個產品。

 

ok！web API已經能用了。每一個控制器上的方法都對應了一個URI：

 

關於 web api 調用：

 

第一種：從瀏覽器中訪問WEB API

如：http://localhost:xxxx/api/products/. (將 "xxxx" 替換為真實的端口號)

 

第二種：用JavaScript和jQuery調用 Web API（注意：有時候 $ 識別需替換成JQuery）

（詳見：http://tech.it168.com/a2012/0606/1357/000001357231_all.shtml）

 

在jQuery中，使用 JSONP 跨越數據傳輸方式， 通過$.getJSON的方法獲取服務器端數據。調用WEB API，代碼如下：

<script type="text/javascript">

    $(document).ready(function () {

        // Send an AJAX request

        $.getJSON("api/products/",

        function (data) {

            // On success, 'data' contains a list of products.

            $.each(data, function (key, val) {

 

                // Format the text to display.

                var str = val.Name + ': $' + val.Price;

 

                // Add a list item for the product.

                $('<li/>', { text: str })    

                .appendTo($('#products'));  

            });

        });

    });

</script>

實例一 經常使用的傳統方式。

$(document).ready(function () {

　　$.getJSON("api/customers", Loadfun);

　　});

$.getJson方法中第一個參數是調用服務的地址，第二個參數是回調方法，這個回調方法Loadfun中，將展示服務端web api返回的數據，代碼如下：

function Loadfun(data) {
    $("#customerTable").find("tr:gt(1)").remove();
    $.each(data, function (key, val) {
        var tableRow = '<tr>' + 
                        '<td>' + val.CustomerID + '</td>' +
                        '<td><input type="text" value="' + val.CompanyName + '"/></td>' +
                        '<td><input type="text" value="' + val.ContactName + '"/></td>' +
                        '<td><input type="text" value="' + val.Country + '"/></td>' +
                        '<td><input type="button" name="btnUpdate" value="Update" /> 
                             <input type="button" name="btnDelete" value="Delete" /></td>' + 
                        '</tr>';
        $('#customerTable').append(tableRow);
    });

    $("input[name='btnInsert']").click(OnInsert);
    $("input[name='btnUpdate']").click(OnUpdate);
    $("input[name='btnDelete']").click(OnDelete);
}

實例二 中我們可以拼接html,給某個按鈕注冊事件，如同操作普通html一樣。

　　

 總結：研究的時候，需要耐心去查詢文獻，必須耐心，當沒有線索的時候，再堅持一下，也許奇跡就出現了。