在上篇中，小编为大家介绍了在使用Visual Studio 2019创建Web项目过程中测试API、添加模型类、添加数据库上下文、注册数据库上下文、添加控制器等步骤的方法和相关代码，本文将继续介绍在创建Web过程中会使用的其他步骤。
为形成完整、连贯的操作步骤，请点击此处阅读更多。
点击下载Visual Studio试用版
返回值
GetTodoItems和GetTodoItem方法的返回类型是ActionResult <T>类型。ASP.NET Core自动将对象序列化为JSON，并将JSON写入响应消息的正文中。假设没有未处理的异常，此返回类型的响应代码为200。未处理的异常被转换为5xx错误。
ActionResult返回类型可以表示各种HTTP状态代码。例如，GetTodoItem可以返回两个不同的状态值：
测试GetTodoItems方法
本教程使用Postman来测试Web API。
添加Create方法
PostTodoItem在Controllers / TodoController.cs中添加以下方法：
// POST: api/Todo
[HttpPost]
public async Task<ActionResult<TodoItem>> PostTodoItem(TodoItem item)
{
_context.TodoItems.Add(item);
await _context.SaveChangesAsync();
return CreatedAtAction(nameof(GetTodoItem), new { id = item.Id }, item);
}上面的代码是HTTP POST方法，由[HttpPost]属性表示。该方法从HTTP请求的主体获取to-do项的值。
CreatedAtAction方法：
如果成功，返回HTTP 201状态码。HTTP 201是HTTP POST方法的标准响应，该方法在服务器上创建新资源。
Location为响应添加标头。该Location头指定新创建待完成项目的URI。
引用GetTodoItem创建Location标头URI的操作。C＃nameof关键字用于避免在CreatedAtAction调用中对操作名称进行硬编码。
// GET: api/Todo/5
[HttpGet("{id}")]
public async Task<ActionResult<TodoItem>> GetTodoItem(long id)
{
var todoItem = await _context.TodoItems.FindAsync(id);
if (todoItem == null)
{
return NotFound();
}
return todoItem;
}测试PostTodoItem方法
在请求正文中输入待办事项的JSON：
{
"name":"walk dog",
"isComplete":true
}
如果您收到405 Method Not Allowed错误，可能是因为在添加PostTodoItem方法后未编译项目。
测试位置标头URI
在“ 响应”窗格中选择“ 标题”选项卡。
复制Location标头值：
添加PutTodoItem方法
添加以下PutTodoItem方法：
// PUT: api/Todo/5
[HttpPut("{id}")]
public async Task<IActionResult> PutTodoItem(long id, TodoItem item)
{
if (id != item.Id)
{
return BadRequest();
}
_context.Entry(item).State = EntityState.Modified;
await _context.SaveChangesAsync();
return NoContent();
}PutTodoItem类似于PostTodoItem，除了它使用HTTP PUT，回复是204（无内容）。根据HTTP规范，PUT请求要求客户端发送整个更新的实体，而不仅仅是更改。
如果您在调用PutTodoItem时出错，请调用get以确保数据库中有一个条目。
测试PutTodoItem方法
这个示例使用内存中的数据库，该数据库必须在每次启动应用程序时初始化。在执行PUT调用之前，数据库中必须有一个项。
更新id=1的待办事项，并将其名称设置为“feed fish”:
{
"ID":1,
"name":"feed fish",
"isComplete":true
}下图显示了Postman更新：
添加DeleteTodoItem方法
添加以下DeleteTodoItem方法：
// DELETE: api/Todo/5
[HttpDelete("{id}")]
public async Task<IActionResult> DeleteTodoItem(long id)
{
var todoItem = await _context.TodoItems.FindAsync(id);
if (todoItem == null)
{
return NotFound();
}
_context.TodoItems.Remove(todoItem);
await _context.SaveChangesAsync();
return NoContent();
}DeleteTodoItem响应是204(没有内容)。
测试DeleteTodoItem方法
使用Postman删除待办事项：
示例应用程序允许您删除所有项目。但是，当删除最后一项时，下次调用API时，模型类构造函数会创建一个新项。
使用jQuery调用API
在本节中，添加了一个使用jQuery调用web api的HTML页面，jQuery启动请求并使用API响应中的详细信息更新页面。
将应用程序配置为提供静态文件，并通过使用以下突出显示的代码更新Startup.cs来启用默认文件映射：
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
// The default HSTS value is 30 days. You may want to change this for
// production scenarios, see //aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseHttpsRedirection();
app.UseMvc();
}在项目目录中创建wwwroot文件夹。
将名为index.html的HTML文件添加到wwwroot目录中。用以下标记替换其内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>To-do CRUD</title>
<style>
input[type='submit'], button, [aria-label] {
cursor: pointer;
}
#spoiler {
display: none;
}
table {
font-family: Arial, sans-serif;
border: 1px solid;
border-collapse: collapse;
}
th {
background-color: #0066CC;
color: white;
}
td {
border: 1px solid;
padding: 5px;
}
</style>
</head>
<body>
<h1>To-do CRUD</h1>
<h3>Add</h3>
<form action="javascript:void(0);" method="POST" onsubmit="addItem()">
<input type="text" id="add-name" placeholder="New to-do">
<input type="submit" value="Add">
</form>
<div id="spoiler">
<h3>Edit</h3>
<form class="my-form">
<input type="hidden" id="edit-id">
<input type="checkbox" id="edit-isComplete">
<input type="text" id="edit-name">
<input type="submit" value="Save">
<a onclick="closeInput()" aria-label="Close">✖</a>
</form>
</div>
<p id="counter"></p>
<table>
<tr>
<th>Is Complete</th>
<th>Name</th>
<th></th>
<th></th>
</tr>
<tbody id="todos"></tbody>
</table>
<script src="//code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="site.js"></script>
</body>
</html>将名为site.js的JavaScript文件添加到wwwroot目录中。用以下代码替换其内容：
const uri = "api/todo";
let todos = null;
function getCount(data) {
const el = $("#counter");
let name = "to-do";
if (data) {
if (data > 1) {
name = "to-dos";
}
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 = $("#todos");
$(tBody).empty();
getCount(data.length);
$.each(data, function(key, item) {
const tr = $("<tr></tr>")
.append(
$("<td></td>").append(
$("<input/>", {
type: "checkbox",
disabled: true,
checked: item.isComplete
})
)
)
.append($("<td></td>").text(item.name))
.append(
$("<td></td>").append(
$("<button>Edit</button>").on("click", function() {
editItem(item.id);
})
)
)
.append(
$("<td></td>").append(
$("<button>Delete</button>").on("click", function() {
deleteItem(item.id);
})
)
);
tr.appendTo(tBody);
});
todos = data;
}
});
}
function addItem() {
const item = {
name: $("#add-name").val(),
isComplete: false
};
$.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(todos, function(key, item) {
if (item.id === id) {
$("#edit-name").val(item.name);
$("#edit-id").val(item.id);
$("#edit-isComplete")[0].checked = item.isComplete;
}
});
$("#spoiler").css({ display: "block" });
}
$(".my-form").on("submit", function() {
const item = {
name: $("#edit-name").val(),
isComplete: $("#edit-isComplete").is(":checked"),
id: $("#edit-id").val()
};
$.ajax({
url: uri + "/" + $("#edit-id").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" });
}可能需要更改ASP.NET Core项目的启动设置才能在本地测试HTML页面：
下面是对API调用的解释。
获取待办事项列表
jQuery ajax函数向API发送GET请求，API返回表示待办事项数组的JSON。如果请求成功，则调用success回调函数。在回调中，DOM将使用to-do信息进行更新。
$(document).ready(function() {
getData();
});
function getData() {
$.ajax({
type: "GET",
url: uri,
cache: false,
success: function(data) {
const tBody = $("#todos");
$(tBody).empty();
getCount(data.length);
$.each(data, function(key, item) {
const tr = $("<tr></tr>")
.append(
$("<td></td>").append(
$("<input/>", {
type: "checkbox",
disabled: true,
checked: item.isComplete
})
)
)
.append($("<td></td>").text(item.name))
.append(
$("<td></td>").append(
$("<button>Edit</button>").on("click", function() {
editItem(item.id);
})
)
)
.append(
$("<td></td>").append(
$("<button>Delete</button>").on("click", function() {
deleteItem(item.id);
})
)
);
tr.appendTo(tBody);
});
todos = data;
}
});
}添加待办事项
AJAX功能发送POST与请求体待办事项项目请求。accept和contentType选项设置为application/json，以指定接收和发送的媒体类型。通过使用JSON.stringify将待办事项转换为JSON。当API返回成功的状态代码时，将调用getData函数来更新HTML表。
function addItem() {
const item = {
name: $("#add-name").val(),
isComplete: false
};
$.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("");
}
});
}更新待办事项
更新待办事项类似于添加待办事项。url将更改为添加项的唯一标识符，并放入类型。
$.ajax({
url: uri + "/" + $("#edit-id").val(),
type: "PUT",
accepts: "application/json",
contentType: "application/json",
data: JSON.stringify(item),
success: function(result) {
getData();
}
});删除待办事项
删除待办事项是通过type在AJAX调用上设置DELETE并在URL中指定项目的唯一标识符来完成的。
$.ajax({
url: uri + "/" + id,
type: "DELETE",
success: function(result) {
getData();
}
});
想要了解 Visual Studio 更多资源的伙伴，请点这里。
想要获取 Visual Studio 正版授权的伙伴，
标签：
本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@ke049m.cn
半岛外围网上直营 
11次
相关产品
最新文章 
半岛外围网上直营相关的文章 
微信
在线咨询
渝公网安备
50010702500608号
客服热线