2013年10月11日 星期五

【Web API】 建立一個讀取 Web API 的頁面

1. 練習寫一頁 Web ，從 Web API 讀取 Json 格式的資料，並顯示在當前的頁面上

2. 在 View 資料夾中，建立一個 View，取名「ReadWebAPI.cshtml」


3. 因為我的 View 是建在 Views\Home\ReadWebAPI.cshtml 下，所以 Controller\HomeController.cs 也要建一個對應的 method，View才能正常顯示












4.先試跑一下網頁，確定網頁可以正常執行



5.  因為是用 MVC4 ，預設就有 jQuery 可以使用了


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@section Scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            $.getJSON("/api/Products", function (result) {
                var strHtml = "";
                strHtml += "<table>";
                for (var i = 0; i < result.length; i++) {
                    strHtml += "<tr>";
                    strHtml += "<td>";
                    strHtml += result[i].Id;
                    strHtml += "</td>";
                    strHtml += "<td>";
                    strHtml += result[i].Name;
                    strHtml += "</td>";
                    strHtml += "<td>";
                    strHtml += result[i].Category;
                    strHtml += "</td>";
                    strHtml += "<td>";
                    strHtml += result[i].Price;
                    strHtml += "</td>";
                    strHtml += "</tr>";
                }
                strHtml += "</table>";
                $("#Content").html(strHtml);
            })
            .error(function (res, textStatus, errorThrown) {
                alert("error ==> " + res.responseText);
            });
        });
    </script>
}
<p/>
<div id="Content"></div>

6. 結果顯示如下

張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)