使用 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/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">✖</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”按钮，保存数据。

四）删除书籍

deleteItem方法用来删除书籍信息，通过调用JQuery AJAX函数发出删除请求。并把 type 设为 DELETE ，指定该项在 URL 中的唯一标识符。如下图中1与2，就是删除前后的情况。我们点击表格中的删除按钮，将调用脚本中的deleteItem方法，删除指定书籍。