使用 ASP.NET Core MVC 創建 Web API（六）

在之前的文章中我們是使用Rester來測試我們的WebAPI的。接下來，我們來創建一個實際的頁面來測試之前我們寫的WebAPI。我們創建一個HTML頁面，併在頁面使用 jQuery 來調用 Web API 。通過jQuery來調用增刪除改查WebAPI介面，並用 API 介面返回的響應中的詳細信息更... ...

使用 ASP.NET Core MVC 創建 Web API

使用 ASP.NET Core MVC 創建 Web API（一）

使用 ASP.NET Core MVC 創建 Web API（二）

使用 ASP.NET Core MVC 創建 Web API（三）

使用 ASP.NET Core MVC 創建 Web API（四）

使用 ASP.NET Core MVC 創建 Web API（五）

十七、使用 jQuery 調用 API

在之前的文章中我們是使用Rester來測試我們的WebAPI的。接下來，我們來創建一個實際的頁面來測試之前我們寫的WebAPI。我們創建一個HTML頁面，併在頁面使用 jQuery 來調用 Web API 。通過jQuery來調用增刪除改查WebAPI介面，並用 API 介面返回的響應中的詳細信息更新到頁面中。

1) 在Visual Studio 2017的“解決方案資源管理器”中打開Startup.cs文件，並找到Configure方法，在方法中添加 app.UseStaticFiles()方法，配置應用提供靜態文件並啟用預設文件映射，代碼如下：

 public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            app.UseDefaultFiles();
            app.UseStaticFiles();
            app.UseMvc();
        }

2) 在Visual Studio 2017的“解決方案資源管理器”中，選中解決方案，點擊滑鼠右鍵，在彈出菜單中選擇“添加—》新建文件夾”，並把“新文件夾”命名為 wwwroot。如下圖。

3) 在Visual Studio 2017的“解決方案資源管理器”中，選中“wwwroot”目錄，點擊滑鼠右鍵，在彈出菜單中選擇“添加—》新建項”，在彈出對話框中選擇“HTML頁”，併在名稱輸入框中輸入“index.html”，然後點擊“添加”按鈕。如下圖。

Index.html文件的內容如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>BOOK CRUD</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
 integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <h1>BOOK CRUD</h1>
    <div class="container-fluid">     
        <div class="row-fluid">
            <div class="col-xs-12 col-md-8">
                <p id="counter"></p>
                <table class="table table-bordered">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>ReleaseDate</th>
                        <th>Author</th>
                        <th>Price</th>
                        <th>Publishing</th>
                        <th colspan="2">
                            <a class="btn btn-default btn-xs" onclick="getData()" role="button">刷新</a>
                        </th>
                    </tr>
                    <tbody id="books"></tbody>
                </table>
            </div>
            <div class="col-md-2">
                <form action="javascript:void(0);" method="POST" onsubmit="addItem()">
                    <fieldset>
                        <legend>Add</legend>
                        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                        <div class="form-group">
                            <label class="control-label">Name</label>
                            <input id="AddName" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label class="control-label">ReleaseDate</label>
                            <input id="AddReleaseDate" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label class="control-label">Author</label>
                            <input id="AddAuthor" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label class="control-label">Price</label>
                            <input id="AddPrice" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label class="control-label">Publishing</label>
                            <input id="AddPublishing" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="submit" value="Add" class="btn btn-primary">
                        </div>
                    </fieldset>                </form>

            </div>
            <div class="col-md-2" id="spoiler">
                <form class="my-form">
                    <fieldset>
                        <legend>Edit</legend>
                        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                        <input type="hidden" id="BookID" />
                        <input type="hidden" id="RowVersion" />
                        <div class="form-group">
                            <label class="control-label">Name</label>
                            <input id="Name" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label class="control-label">ReleaseDate</label>

                            <input id="ReleaseDate" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label class="control-label">Author</label>
                            <input id="Author" class="form-control" />

                        </div>
                        <div class="form-group">
                            <label class="control-label">Price</label>
                            <input id="Price" class="form-control" />

                        </div>
                        <div class="form-group">
                            <label class="control-label">Publishing</label>
                            <input id="Publishing" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="submit" value="Save" class="btn btn-default" />
                            <a onclick="closeInput()" aria-label="Close">&#10006;</a>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
    <script src="site.js"></script>
</body>
</html>

4) 在Visual Studio 2017的“解決方案資源管理器”中，選中“wwwroot”目錄，點擊滑鼠右鍵，在彈出菜單中選擇“添加—》新建項”，在彈出對話框中選擇“JavaScript文件”，併在名稱輸入框中輸入“site.js”，然後點擊“添加”按鈕。如下圖。

5) 在site.js文件中添加如下代碼：

const uri = "api/book";
let books = null;
function getCount(data) {
    const el = $("#counter");
    let name = "book";
    if (data) {
        if (data > 1) {
            name = "book-s";
        }

        el.text(data + " " + name);
    } else {
        el.text("No " + name);
    }
} 

$(document).ready(function () {
    getData();

}); 

function getData() {
    $.ajax({
        type: "GET",
        url: uri,
        cache: false,
        success: function (data) {
            const tBody = $("#books");
            $(tBody).empty();
            getCount(data.length);

            $.each(data, function (key, item) {
                const tr = $("<tr></tr>")
                    .append($("<td></td>").text(item.id))
                    .append($("<td></td>").text(item.name))
                    .append($("<td></td>").text(item.releaseDate))
                    .append($("<td></td>").text(item.author))
                    .append($("<td></td>").text(item.price))
                    .append($("<td></td>").text(item.publishing))
                    .append(
                        $("<td></td>").append(

  $("<button class=\"btn btn-default btn-sm\" >Edit</button>").on("click", function () {                                editItem(item.id);
                            })
                        )
                    )
                    .append(
                        $("<td></td>").append(

$("<button class=\"btn btn-default btn-sm\">Delete</button>").on("click", function () {                                deleteItem(item.id);
                            })
                        )
                    );
                tr.appendTo(tBody);
            });
            books = data;
        }
    });
} 

function addItem() {
    const item = {
        Name: $("#AddName").val(),
        ReleaseDate: $("#AddReleaseDate").val(),
        Author: $("#AddAuthor").val(),
        Publishing: $("#AddPublishing").val(),
        Price: $("#AddPrice").val(),     

        ID: 0
    }; 

    $.ajax({
        type: "POST",
        accepts: "application/json",
        url: uri,
        contentType: "application/json",
        data: JSON.stringify(item),
        error: function (jqXHR, textStatus, errorThrown) {
            alert("Something went wrong!");
        },

        success: function (result) {
            getData();
            $("#add-name").val("");
        }
    });
} 

function deleteItem(id) {
    $.ajax({
        url: uri + "/" + id,
        type: "DELETE",
        success: function (result) {
            getData();
        }
    });
} 

function editItem(id) {
    $.each(books, function (key, item) {
        if (item.id === id) {
            $("#Name").val(item.name);
            $("#BookID").val(item.id);
            $("#ReleaseDate").val(item.releaseDate);

            $("#Author").val(item.author);
            $("#Publishing").val(item.publishing);
            $("#Price").val(item.price);
            $("#RowVersion").val(item.rowVersion);
        }
    });
    $("#spoiler").css({ display: "block" });
} 

$(".my-form").on("submit", function () {
    const item = {
        Name: $("#Name").val(),
        ReleaseDate: $("#ReleaseDate").val(),
        Author: $("#Author").val(),
        Publishing: $("#Publishing").val(),
        Price: $("#Price").val(),
        RowVersion: $("#RowVersion").val(),
        ID: $("#BookID").val()
    }; 

    $.ajax({
        url: uri + "/" + $("#BookID").val(),
        type: "PUT",
        accepts: "application/json",
        contentType: "application/json",
        data: JSON.stringify(item),
        success: function (result) {
            getData();
        }
    }); 

    closeInput();
    return false;
}); 

function closeInput() {
    $("#spoiler").css({ display: "none" });
}

6）修改 ASP.NET Core 項目的啟動設置，以便對 HTML 頁面進行本地測試。在Visual Studio 2017中打開 Properties\launchSettings.json。

7）刪除 launchUrl 以便在項目的預設文件 index.html 強制打開應用。如下圖。

此示例調用 API 的所有 CRUD 方法。以下是 API 調用的說明。

一）獲取書籍的列表

我們寫的腳本中的getData 方法是通過jQuery ajax 函數將 GET 請求發送至 BookApi應用程式的GetBookItem方法，這個方法返回表示書籍數組的 JSON。如果請求成功，則調用 success 回調函數。在該回調中將書籍信息組裝成表格更新到 DOM中。如下圖。

二）添加書籍信息

腳本中的addItem 方法通過JQuery 的Ajax 函數發送 POST請求，請求正文中包含書籍信息。將 accepts 和 contentType 選項設置為 application/json，以便指定接收和發送的數據類型。書籍信息使用 JSON.stringify 轉換為 JSON。當 API 返回成功狀態的代碼時，將調用 getData 函數來更新 HTML 表格。如下圖。

三）更新書籍信息

editItem方法用來更新書籍信息，這個方法的實現與addItem類似。 url 更改為添加項的唯一標識符，並且 type 為 PUT。如下圖。我們在表格點擊需要修改的書籍信息的“Edit”按鈕，系統會把這條書籍信息中的數據顯示到編輯文本框中，在進行修改之後，點擊“Save”按鈕，保存數據。