使用 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/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 java script 文件 --> <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="java script: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-la