在上篇中，小編為大家介紹了在使用Visual Studio 2019創(chuàng)建Web項(xiàng)目過程中測試API、添加模型類、添加數(shù)據(jù)庫上下文、注冊數(shù)據(jù)庫上下文、添加控制器等步驟的方法和相關(guān)代碼，本文將繼續(xù)介紹在創(chuàng)建Web過程中會(huì)使用的其他步驟。
為形成完整、連貫的操作步驟，請點(diǎn)擊此處閱讀更多。
點(diǎn)擊下載Visual Studio試用版
返回值
GetTodoItems和GetTodoItem方法的返回類型是ActionResult <T>類型。ASP.NET Core自動(dòng)將對象序列化為JSON，并將JSON寫入響應(yīng)消息的正文中。假設(shè)沒有未處理的異常，此返回類型的響應(yīng)代碼為200。未處理的異常被轉(zhuǎn)換為5xx錯(cuò)誤。
ActionResult返回類型可以表示各種HTTP狀態(tài)代碼。例如，GetTodoItem可以返回兩個(gè)不同的狀態(tài)值：
測試GetTodoItems方法
本教程使用Postman來測試Web API。
從文件>設(shè)置（常規(guī)選項(xiàng)卡），禁用SSL證書驗(yàn)證。
創(chuàng)建一個(gè)新請求。
將HTTP方法設(shè)置為GET
將請求URL設(shè)置為//localhost:<port>/api/todo。例如，//localhost:5001/api/todo。
在Postman中設(shè)置兩個(gè)窗格視圖。
選擇發(fā)送。
添加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項(xiàng)的值。
CreatedAtAction方法：
如果成功，返回HTTP 201狀態(tài)碼。HTTP 201是HTTP POST方法的標(biāo)準(zhǔn)響應(yīng)，該方法在服務(wù)器上創(chuàng)建新資源。
Location為響應(yīng)添加標(biāo)頭。該Location頭指定新創(chuàng)建待完成項(xiàng)目的URI。
引用GetTodoItem創(chuàng)建Location標(biāo)頭URI的操作。C＃nameof關(guān)鍵字用于避免在CreatedAtAction調(diào)用中對操作名稱進(jìn)行硬編碼。
// 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方法
在請求正文中輸入待辦事項(xiàng)的JSON：
{
"name":"walk dog",
"isComplete":true
}
如果您收到405 Method Not Allowed錯(cuò)誤，可能是因?yàn)樵谔砑覲ostTodoItem方法后未編譯項(xiàng)目。
測試位置標(biāo)頭URI
添加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，回復(fù)是204（無內(nèi)容）。根據(jù)HTTP規(guī)范，PUT請求要求客戶端發(fā)送整個(gè)更新的實(shí)體，而不僅僅是更改。
如果您在調(diào)用PutTodoItem時(shí)出錯(cuò)，請調(diào)用get以確保數(shù)據(jù)庫中有一個(gè)條目。
測試PutTodoItem方法
這個(gè)示例使用內(nèi)存中的數(shù)據(jù)庫，該數(shù)據(jù)庫必須在每次啟動(dòng)應(yīng)用程序時(shí)初始化。在執(zhí)行PUT調(diào)用之前，數(shù)據(jù)庫中必須有一個(gè)項(xiàng)。
更新id=1的待辦事項(xiàng)，并將其名稱設(shè)置為“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響應(yīng)是204(沒有內(nèi)容)。
測試DeleteTodoItem方法
使用Postman刪除待辦事項(xiàng)：
示例應(yīng)用程序允許您刪除所有項(xiàng)目。但是，當(dāng)刪除最后一項(xiàng)時(shí)，下次調(diào)用API時(shí)，模型類構(gòu)造函數(shù)會(huì)創(chuàng)建一個(gè)新項(xiàng)。
使用jQuery調(diào)用API
在本節(jié)中，添加了一個(gè)使用jQuery調(diào)用web api的HTML頁面，jQuery啟動(dòng)請求并使用API響應(yīng)中的詳細(xì)信息更新頁面。
將應(yīng)用程序配置為提供靜態(tài)文件，并通過使用以下突出顯示的代碼更新Startup.cs來啟用默認(rèn)文件映射：
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();
}在項(xiàng)目目錄中創(chuàng)建wwwroot文件夾。
將名為index.html的HTML文件添加到wwwroot目錄中。用以下標(biāo)記替換其內(nèi)容：
<!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目錄中。用以下代碼替換其內(nèi)容：
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項(xiàng)目的啟動(dòng)設(shè)置才能在本地測試HTML頁面：
下面是對API調(diào)用的解釋。
獲取待辦事項(xiàng)列表
jQuery ajax函數(shù)向API發(fā)送GET請求，API返回表示待辦事項(xiàng)數(shù)組的JSON。如果請求成功，則調(diào)用success回調(diào)函數(shù)。在回調(diào)中，DOM將使用to-do信息進(jìn)行更新。
$(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;
}
});
}添加待辦事項(xiàng)
AJAX功能發(fā)送POST與請求體待辦事項(xiàng)項(xiàng)目請求。accept和contentType選項(xiàng)設(shè)置為application/json，以指定接收和發(fā)送的媒體類型。通過使用JSON.stringify將待辦事項(xiàng)轉(zhuǎn)換為JSON。當(dāng)API返回成功的狀態(tài)代碼時(shí)，將調(diào)用getData函數(shù)來更新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("");
}
});
}更新待辦事項(xiàng)
更新待辦事項(xiàng)類似于添加待辦事項(xiàng)。url將更改為添加項(xiàng)的唯一標(biāo)識符，并放入類型。
$.ajax({
url: uri + "/" + $("#edit-id").val(),
type: "PUT",
accepts: "application/json",
contentType: "application/json",
data: JSON.stringify(item),
success: function(result) {
getData();
}
});刪除待辦事項(xiàng)
刪除待辦事項(xiàng)是通過type在AJAX調(diào)用上設(shè)置DELETE并在URL中指定項(xiàng)目的唯一標(biāo)識符來完成的。
$.ajax({
url: uri + "/" + id,
type: "DELETE",
success: function(result) {
getData();
}
});
想要了解 Visual Studio 更多資源的伙伴，請點(diǎn)這里。
想要獲取 Visual Studio 正版授權(quán)的伙伴，
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
半島外圍網(wǎng)上直營 
11次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
半島外圍網(wǎng)上直營相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線