使用 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 核心 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请求,请求正文中包含书籍信息。 将 acceptscontentType 选项设置为 application/json,以便指定接收和发送的数据类型。 书籍信息使用 JSON.stringify 转换为 JSON。 当 API 返回成功状态的代码时,将调用 getData 函数来更新 HTML 表格。如下图。 

三)  更新书籍信息

editItem方法用来更新书籍信息,这个方法的实现与addItem类似。 url 更改为添加项的唯一标识符,并且 typePUT。如下图。我们在表格点击需要修改的书籍信息的“Edit”按钮,系统会把这条书籍信息中的数据显示到编辑文本框中,在进行修改之后,点击“Save”按钮,保存数据。

四) 删除书籍

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

使用 ASP.NET Core MVC 创建 Web API(六)的更多相关文章

  1. 使用 ASP.NET Core MVC 创建 Web API(五)

    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使 ...

  2. 使用 ASP.NET Core MVC 创建 Web API(二)

    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 六.添加数据库上下文 数据库上下文是使用Entity Framewor ...

  3. 使用 ASP.NET Core MVC 创建 Web API(三)

    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 十 ...

  4. 使用 ASP.NET Core MVC 创建 Web API(四)

    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使 ...

  5. 使用 ASP.NET Core MVC 创建 Web API——响应数据的内容协商(七)

    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使 ...

  6. 使用 ASP.NET Core MVC 创建 Web API(一)

    从今天开始来学习如何在 ASP.NET Core 中构建 Web API 以及每项功能的最佳适用场景.关于此次示例的数据库创建请参考<学习ASP.NET Core Razor 编程系列一> ...

  7. 使用.Net Core MVC创建Web API

    创建.Net Core MVC 打开appsettings.json文件,添加数据库连接 { "Logging": { "LogLevel": { " ...

  8. 002.Create a web API with ASP.NET Core MVC and Visual Studio for Windows -- 【在windows上用vs与asp.net core mvc 创建一个 web api 程序】

    Create a web API with ASP.NET Core MVC and Visual Studio for Windows 在windows上用vs与asp.net core mvc 创 ...

  9. 为什么 web 开发人员需要迁移到. NET Core, 并使用 ASP.NET Core MVC 构建 web 和 webservice/API

    2018 .NET开发者调查报告: .NET Core 是怎么样的状态,这里我们看到了还有非常多的.net开发人员还在观望,本文给大家一个建议.这仅代表我的个人意见, 我有充分的理由推荐.net 程序 ...

随机推荐

  1. c语言I博客专业06

    问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-2/homework/8655 我在 ...

  2. 检测是否引入jQuery

    if (typeof jQuery != 'undefined') { document.write("jquery已经被加载"); } else { document.write ...

  3. Spring Boot中@ConditionalOnProperty使用详解

    在Spring Boot的自动配置中经常看到@ConditionalOnProperty注解的使用,本篇文章带大家来了解一下该注解的功能. Spring Boot中的使用 在Spring Boot的源 ...

  4. luogu P4065 [JXOI2017]颜色 |随机化+前缀和

    题目描述 可怜有一个长度为 n 的正整数序列 Ai,其中相同的正整数代表着相同的颜色. 现在可怜觉得这个序列太长了,于是她决定选择一些颜色把这些颜色的所有位置都删去. 删除颜色 i 可以定义为把所有满 ...

  5. mac+chrome 最常用快捷键

    12个mac快捷键 命令 含义 command+空格 (先摁command再摁空格) Spotlight搜索 crt+command+F 最大化和关闭最大化切换 Command+H 隐藏当前窗口 Co ...

  6. 利用etcd实现服务注册和服务发现

    文章目录 服务注册 服务发现 协议编写 服务端实现 客户端实现 实验结果 参考文章 服务注册 主要逻辑在go func函数里面,先是去etcd获取一下服务,没有获取到的话就注册进去. package ...

  7. 【解决】OCI runtime exec failed......executable file not found in $PATH": unknown

    [问题]使用docker exec + sh进入容器时报错 [root@localhost home]# docker exec -it container-test bash OCI runtime ...

  8. HYSBZ-2002弹飞绵羊

    某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装置设定初始弹力系数ki,当 ...

  9. eviews面板数据的操作

    数据结构: 打开eviews File>new>workfile Object>new object > pool 输入城市名称: _bj 下划线加名称(必须是英文),竖着输入 ...

  10. Docker系列-(2) 镜像制作与发布

    上篇文章引入了Docker的基本原理和操作,本节文章主要介绍如何制作Docker镜像和发布. 镜像文件结构 Docker镜像的本质是一系列文件的集合,这些文件依次叠加,形成了最后的镜像文件,类似于下图 ...