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

時間 2019-11-07

標籤使用 asp.net asp core mvc 建立 web api 欄目 ASP 简体版

原文原文鏈接

使用 ASP.NET Core MVC 建立 Web APIjavascript

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

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

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

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

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

十7、使用 jQuery 調用 API

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

1) 在Visual Studio 2017的「解決方案資源管理器」中打開Startup.cs文件，並找到Configure方法，在方法中添加 app.UseStaticFiles()方法，配置應用提供靜態文件並啓用默認文件映射，代碼以下：
npm

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

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

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

Index.html文件的內容以下：api

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>BOOK CRUD</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" 
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/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」按鈕，保存數據。