Hướng dẫn này trình bày cách gọi API web ASP.NET Core bằng JavaScript, sử dụng Fetch API .
Điều kiện tiên quyết
Hướng dẫn đầy đủ : Tạo API web
Có kiến thức về CSS, HTML và JavaScript.
Gọi API web bằng JavaScript
Trong phần này, bạn sẽ thêm một trang HTML chứa các biểu mẫu để tạo và quản lý các mục việc cần làm. Các trình xử lý sự kiện được gắn vào các phần tử trên trang. Các trình xử lý sự kiện sẽ tạo ra các yêu cầu HTTP đến các phương thức hành động của API web. fetchHàm của API Fetch sẽ khởi tạo mỗi yêu cầu HTTP.
Hàm này fetchtrả về một Promiseđối tượng, chứa phản hồi HTTP được biểu diễn dưới dạng một Responseđối tượng. Một mô hình phổ biến là trích xuất phần thân phản hồi JSON bằng cách gọi jsonhàm trên Responseđối tượng đó. JavaScript sẽ cập nhật trang với các chi tiết từ phản hồi của API web.
Lệnh gọi đơn giản nhất fetchchấp nhận một tham số duy nhất đại diện cho tuyến đường. Tham số thứ hai, được gọi là initđối tượng, là tùy chọn. initNó được sử dụng để cấu hình yêu cầu HTTP.
Cấu hình ứng dụng để phục vụ các tập tin tĩnh và bật tính năng ánh xạ tập tin mặc định . Đoạn mã được đánh dấu sau đây cần thiết trong Program.cs:
C#
Sao chép
using Microsoft.EntityFrameworkCore;
using TodoApi.Models;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllers();
builder.Services.AddDbContext<TodoContext>(opt =>
opt.UseInMemoryDatabase("TodoList"));
var app = builder.Build();
if (builder.Environment.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.Run();
Tạo thư mục wwwroot trong thư mục gốc của dự án.
Tạo một thư mục css bên trong thư mục wwwroot .
Tạo thư mục js bên trong thư mục wwwroot .
Thêm một tệp HTML có tên index.htmlvào thư mục wwwroot . Thay thế nội dung của tệp đó index.htmlbằng đoạn mã sau:
HTML
Sao chép
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>To-do CRUD</title>
<link rel="stylesheet" href="css/site.css" />
</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="editForm">
<h3>Edit</h3>
<form action="javascript:void(0);" onsubmit="updateItem()">
<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="js/site.js" asp-append-version="true"></script>
<script type="text/javascript">
getItems();
</script>
</body>
</html>
Thêm một tệp CSS có tên site.cssvào thư mục wwwroot/css . Thay thế nội dung của tệp đó site.cssbằng các kiểu sau:
css
Sao chép
input[type='submit'], button, [aria-label] {
cursor: pointer;
}
#editForm {
display: none;
}
table {
font-family: Arial, sans-serif;
border: 1px solid;
border-collapse: collapse;
}
th {
background-color: #f8f8f8;
padding: 5px;
}
td {
border: 1px solid;
padding: 5px;
}
Thêm một tệp JavaScript có tên site.jsvào thư mục wwwroot/js . Thay thế nội dung của tệp đó site.jsbằng đoạn mã sau:
JavaScript
Sao chép
const uri = 'api/todoitems';
let todos = [];
function getItems() {
fetch(uri)
.then(response => response.json())
.then(data => _displayItems(data))
.catch(error => console.error('Unable to get items.', error));
}
function addItem() {
const addNameTextbox = document.getElementById('add-name');
const item = {
isComplete: false,
name: addNameTextbox.value.trim()
};
fetch(uri, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(item)
})
.then(response => response.json())
.then(() => {
getItems();
addNameTextbox.value = '';
})
.catch(error => console.error('Unable to add item.', error));
}
function deleteItem(id) {
fetch(`${uri}/${id}`, {
method: 'DELETE'
})
.then(() => getItems())
.catch(error => console.error('Unable to delete item.', error));
}
function displayEditForm(id) {
const item = todos.find(item => item.id === id);
document.getElementById('edit-name').value = item.name;
document.getElementById('edit-id').value = item.id;
document.getElementById('edit-isComplete').checked = item.isComplete;
document.getElementById('editForm').style.display = 'block';
}
function updateItem() {
const itemId = document.getElementById('edit-id').value;
const item = {
id: parseInt(itemId, 10),
isComplete: document.getElementById('edit-isComplete').checked,
name: document.getElementById('edit-name').value.trim()
};
fetch(`${uri}/${itemId}`, {
method: 'PUT',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(item)
})
.then(() => getItems())
.catch(error => console.error('Unable to update item.', error));
closeInput();
return false;
}
function closeInput() {
document.getElementById('editForm').style.display = 'none';
}
function _displayCount(itemCount) {
const name = (itemCount === 1) ? 'to-do' : 'to-dos';
document.getElementById('counter').innerText = `${itemCount} ${name}`;
}
function _displayItems(data) {
const tBody = document.getElementById('todos');
tBody.innerHTML = '';
_displayCount(data.length);
const button = document.createElement('button');
data.forEach(item => {
let isCompleteCheckbox = document.createElement('input');
isCompleteCheckbox.type = 'checkbox';
isCompleteCheckbox.disabled = true;
isCompleteCheckbox.checked = item.isComplete;
let editButton = button.cloneNode(false);
editButton.innerText = 'Edit';
editButton.setAttribute('onclick', `displayEditForm(${item.id})`);
let deleteButton = button.cloneNode(false);
deleteButton.innerText = 'Delete';
deleteButton.setAttribute('onclick', `deleteItem(${item.id})`);
let tr = tBody.insertRow();
let td1 = tr.insertCell(0);
td1.appendChild(isCompleteCheckbox);
let td2 = tr.insertCell(1);
let textNode = document.createTextNode(item.name);
td2.appendChild(textNode);
let td3 = tr.insertCell(2);
td3.appendChild(editButton);
let td4 = tr.insertCell(3);
td4.appendChild(deleteButton);
});
todos = data;
}
Có thể cần thay đổi cài đặt khởi chạy của dự án ASP.NET Core để kiểm tra trang HTML cục bộ:
Mở Properties\launchSettings.json .
Xóa launchUrlthuộc tính này để buộc ứng dụng mở tại index.htmlthư mục mặc định của dự án.
Ví dụ này gọi tất cả các phương thức CRUD của API web. Sau đây là giải thích về các yêu cầu API web.
Lập danh sách các việc cần làm
Trong đoạn mã sau, một yêu cầu HTTP GET được gửi đến tuyến đường api/todoitems :
JavaScript
Sao chép
fetch(uri)
.then(response => response.json())
.then(data => _displayItems(data))
.catch(error => console.error('Unable to get items.', error));
Khi API web trả về mã trạng thái thành công, _displayItemshàm sẽ được gọi. Mỗi mục việc cần làm trong tham số mảng được chấp nhận _displayItemssẽ được thêm vào một bảng có các nút Chỉnh sửa và Xóa . Nếu yêu cầu API web thất bại, lỗi sẽ được ghi vào bảng điều khiển của trình duyệt.
Thêm một mục cần làm
Trong đoạn mã sau:
Một itembiến được khai báo để tạo ra một biểu diễn dạng đối tượng (object literal) của mục việc cần làm.
Yêu cầu Fetch được cấu hình với các tùy chọn sau:
method—Chỉ định động từ hành động HTTP POST.
body—Chỉ định định dạng JSON của phần thân yêu cầu. JSON được tạo ra bằng cách truyền đối tượng literal được lưu trữ vào itemhàm JSON.stringify .
headers—Chỉ định Acceptcác Content-Typetiêu đề yêu cầu HTTP. Cả hai tiêu đề đều được đặt thành application/jsonđể chỉ định loại phương tiện được nhận và gửi tương ứng.
Một yêu cầu HTTP POST được gửi đến tuyến đường api/todoitems .
JavaScript
Sao chép
function addItem() {
const addNameTextbox = document.getElementById('add-name');
const item = {
isComplete: false,
name: addNameTextbox.value.trim()
};
fetch(uri, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(item)
})
.then(response => response.json())
.then(() => {
getItems();
addNameTextbox.value = '';
})
.catch(error => console.error('Unable to add item.', error));
}
Khi API web trả về mã trạng thái thành công, getItemshàm sẽ được gọi để cập nhật bảng HTML. Nếu yêu cầu API web thất bại, lỗi sẽ được ghi vào bảng điều khiển của trình duyệt.
Cập nhật mục việc cần làm
Việc cập nhật một mục việc cần làm tương tự như việc thêm một mục mới; tuy nhiên, có hai điểm khác biệt quan trọng:
Đường dẫn được thêm hậu tố là mã định danh duy nhất của mục cần cập nhật. Ví dụ: api/todoitems/1 .
Động từ hành động HTTP là PUT, như được chỉ ra bởi tùy methodchọn.
JavaScript
Sao chép
fetch(`${uri}/${itemId}`, {
method: 'PUT',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(item)
})
.then(() => getItems())
.catch(error => console.error('Unable to update item.', error));
Xóa một mục việc cần làm
Để xóa một mục việc cần làm, hãy đặt methodtùy chọn của yêu cầu thành DELETEvà chỉ định mã định danh duy nhất của mục đó trong URL.
JavaScript
Sao chép
fetch(`${uri}/${id}`, {
method: 'DELETE'
})
.then(() => getItems())
.catch(error => console.error('Unable to delete item.', error));
Hãy chuyển sang bài hướng dẫn tiếp theo để tìm hiểu cách tạo trang trợ giúp API web:
Post a Comment
- Nếu bạn không có các tài khoản để nhắn tin/bình luận bạn có thể chọn trong "Nhận xét với tư cách" với tài khoản "Ẩn danh" (Anonymous).
Cám ơn bạn đã đọc blog! Chúc bạn tìm được nhiều bài viết hay và hữu ích cho mình!