karatejb: [C#] 使用jQuery取得WebApi服務

使用jQuery取得WebApi服務

延續我們已經建立好的Book Web Api，除了利用HttpClient ( 文章：使用HttpClient取得WebApi服務 ) 去使用WebApi的CRUD方法。我們也也可以選擇在前端網頁直接用jQuery使用Web Api。

1. 如果尚未建立Web Api，請參考以下表格，建立一個～

2. 加入一個MVC4 Web應用程式專案，名稱：Mvc.Thru.WebApi

3. 加入一個空白的 Controller ： BookController

加入後，目前的BookController只有一個Index方法。我們預計要在這個範例放入一下以下內容：

Page	功能	對應的CRUD方法
Index	列出所有書籍，查詢某一本書籍	GET
Create	建立一本書籍資料	POST
Edit	1. 編輯某本書籍（更新或刪除） 2. 從Index帶URL參數過來。	PUT, DELETE

所以我們在BookController中再加入以下程式碼：

public class BooksController : Controller
{
public ActionResult Index()
{
     return View();
}
public ActionResult Create()
{
      return View();
   }
   public ActionResult Edit(String id)
   {
      return View();
   }
}

4. 加入Controller的方法後，接著建立View。
當然本例是沒有任何Model的唷。

加入後的方案總管

5. 接下來開始寫View的Html部份，注意每個View都有內嵌一個CallWebApi-XXX.js檔，是放我們等下要實作的jQuery部分，目前請先建立空檔即可。

★Index

@{
ViewBag.Title = "Book Index";
}

@section scripts
{
///新增按鈕事件
function RedirectCreatePage() {
location.href = "/Book/Create"; //導向至Create頁面
}
<script src="~/Scripts/CallWebApi-Get.js"></script>
}


<div>
<form>
<label for="bookId" >以ID查詢 : </label>
<input type="text" id="tb_bookId" maxlength="3" />
<input type="button" id="bt_search" value="Search"/>
</form>
</div>

<div>
<p id="book"></p>
</div>

<div>
<table id="BookList" >
<tr>
<td>代號</td><td></td>
<td>書籍名稱</td><td></td>
<td>價錢</td>
</tr>
</table>
</div>

<div>
<input type="button" id="bt_create" value="新增" onclick="RedirectCreatePage();"/>
</div>

★Create

@{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@section scripts
{
<script src="~/Scripts/CallWebApi-Create.js"></script>
}
<h2>新增資料</h2>
<label for="ID">代號</label>
<input type="text" id="tb_id" value="" />
<label for="NAME">書籍名稱</label>
<input type="text" id="tb_name" value=""/>
<label for="PRICE">價錢</label>
<input type="text" id="tb_price" value="0"/>
<br />
<input type="button" id="bt_create" value="新增"/>

★Edit

@{
ViewBag.Title = "Edit";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@section scripts

{
<script src="~/Scripts/CallWebApi-Put.js"></script>
<script src="~/Scripts/CallWebApi-Delete.js"></script>
}

<h2>編輯資料</h2>
<label for="ID">代號</label>
<input type="text" readonly="true" id="tb_id" value="@ViewBag.ID" />
<label for="NAME">書籍名稱</label>
<input type="text" id="tb_name" value="@ViewBag.NAME"/>
<label for="PRICE">價錢</label>
<input type="text" id="tb_price" value="@ViewBag.PRICE"/>
<br />
<input type="button" id="bt_update" value="更新"/>
<input type="button" id="bt_delete" value="刪除"/>

因為Edit頁面上的資料會從Index帶URL參數過來，所以我們放了幾個ViewBag在上面，將顯示ID的TextBox設成唯獨，並在Controller中稍加一些程式碼：

public ActionResult Edit(String id)
{
//設定帶過來的值到頁面上
ViewBag.ID = id;
ViewBag.NAME = Request["NAME"].ToString();
ViewBag.PRICE = Request["PRICE"].ToString();
return View();
}

6. 以上HTML和後端都準備好之後，目前頁面可正常瀏覽，但是沒辦法操作資料，我們接下來便要開始撰寫jQuery 來使用Web Api。如果剛才還沒有新增前面四支空的 js檔，請如下新增在Script資料夾。

7. jQuery 使用Web Api GET方法：CallWebApi-Create.js (載入於Index.cshtml)

$(function () {
//Web api url
var API_URL = "http://localhost:33855/api/Book/";

//利用Get方式取得。
$.getJSON( API_URL,
function (data) {
        $.each(data, function (key, val) {
        //格式化文字資料，以方便顯示
        // var str = val.NAME + ' : $' + val.PRICE;
        //將Book資料設定成 li 項目，再加入 ul 元素中
        //$('<li/>', { html: str }).appendTo($('#books'));
        var content = "";
        content +="<tr>";
        content += "<td>" + val.ID + "<td/>";
        content += "<td>" + val.NAME + "<td/>";
        content +="<td>"+val.PRICE+"<td/>";
        content += "<tr/>";
        $('#BookList').append(content);
});
}).fail(
    function (jqXHR, textStatus, err) {
      alert("Error : " + err.toString());
});

$('#bt_search').bind("click",
   function () {
        var id = $('#tb_bookId').val();
        $.getJSON( API_URL + id,
        function (data) {
            var str = data.NAME + ' : $' + data.PRICE;
            var linkStr = "<a href='/Book/Edit/" + data.ID + "?NAME=" + data.NAME + "&PRICE="+data.PRICE+"'>" + str + "</a>";
            $('#book').append(linkStr);
            //$('#book').html(str);
        }).fail(
        function (jqXHR, textStatus, err) {
           $('#book').html('Error : ' + err);
        });
   });
});

※ 第一段是使用$.getJSON 方法去使用Web APi的GET，取得資料後，再把每一筆資料放入Index View 裡面的<Table>中。

※ 第二段是實作查詢單筆的Click事件，依舊是使用Web APi的GET，只不過我們在api Url最後加上單筆書籍的ID，讓Web Api回傳單筆資料。再將此筆資料以超連結<a href=..></a>的格式放入頁面，讓使用者點選此筆連結後，可直接到Edit頁面。

(超連結到Edit的網址範例：http://localhost/Book/Edit/001?NAME=BOOK01&PRICE=1000)
完成後的結果如下圖：

8. jQuery 使用Web Api PUT方法：CallWebApi-Put.js (載入於Edit.cshtml)

還記得我們在Edit頁面的資料是從Index帶過來的，所以上面的步驟完成後，我們目前可以看到Edit頁面上的資料已經自動帶入了，我們只要再實作【更新】的Click事件裡面使用Web Api的PUT方法。

$(function () {
//Web api url
var API_URL = "http://localhost:33855/api/Book/";

$('#bt_update').bind("click",
   function () {
        //取得Book的ID
        var id = $('#tb_id').val();
        //要給WebApi的JSON字串
        var uptJson = JSON.stringify(
              { ID: id, NAME: $('#tb_name').val(), PRICE: parseInt($('#tb_price').val()) });
        //以ajax呼叫WebApi的PUT方法
        $.ajax({
            url: API_URL + id,
            cache:false,
            type: "PUT",
            contentType: "application/json; charset=utf-8",
            data: uptJson,
            success: function () { location.href = "/Book/"; }
        }).fail(
             function(jqXHR, textStatus, err){
               alert("更新失敗："+err);
          });
});
});

※ 這邊我們必須指定要使用的Http方法，以及送過去的ContentType、data（JSON）。

※ 更新成功後，會直接回到Index頁面。

9. jQuery 使用Web Api DELETE方法：CallWebApi-Delete.js (載入於Edit.cshtml)
Edit頁面上，還有一個刪除功能，我們一併完成它 …

$(function () {
//Web api url
var API_URL = "http://localhost:33855/api/Book/";

$('#bt_delete').bind("click",
function () {
        //取得Book的ID
        var id = $('#tb_id').val();
        //以ajax呼叫WebApi的Delete方法
        $.ajax({
            url: API_URL + id,
            cache: false,
            type: "DELETE",
            success: function () { location.href = "/Book/"; }
         }).fail(
            function (jqXHR, textStatus, err) {
               alert("刪除失敗：" + err);
          })
});
});

※ 因為Delete方法只要知道ID，所以就省略了設定data的部分。

10. jQuery 使用Web Api POST方法：CallWebApi-Post.js (載入於Create.cshtml)

$(function () {
//Web api url
var API_URL = "http://localhost:33855/api/Book/";
$('#bt_create').bind("click",
        function () {
        //取得Book的ID
        var id = $('#tb_id').val();
        //要給WebApi的JSON字串
        var uptJson = JSON.stringify(
           { ID: id, NAME: $('#tb_name').val(), PRICE: parseInt($('#tb_price').val()) });
        //以ajax呼叫WebApi的PUT方法
        $.ajax({
            url: API_URL,
            cache:false,
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: uptJson,
            success: function () { location.href = "/Book/"; }
        }).fail(
             function(jqXHR, textStatus, err){
                 alert("新增失敗："+err);
         });
});
});