events
3月31日 23時 - 4月2日 23時
究極の Power BI、Fabric、SQL、AI コミュニティ主導のイベント。 3 月 31 日から 4 月 2 日。 コード MSCUST を使用して 150 ドルの割引。 価格は2月11日に上昇します。
今すぐ登録このブラウザーはサポートされなくなりました。
Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。
作成者: Rick Anderson
このチュートリアルでは、Fetch API を使用して JavaScript で ASP.NET Core Web API を呼び出す方法について説明します。
このセクションでは、To Do アイテムを作成および管理するためのフォームが含まれる HTML ページを追加します。 イベント ハンドラーを、ページ上の要素にアタッチします。 イベント ハンドラーによって、Web API のアクション メソッドに HTTP 要求が送信されます。 Fetch API の fetch
関数により、各 HTTP 要求が開始されます。
fetch
関数からは Promise
オブジェクトが返され、このオブジェクトには Response
オブジェクトとして表された HTTP 応答が含まれます。 一般的なパターンでは、Response
オブジェクトに対して json
関数を呼び出して、JSON 応答の本文を抽出します。 JavaScript により、Web API の応答からの詳細を使ってページが更新されます。
fetch
の最も簡単な呼び出しでは、ルートを表す 1 つのパラメーターが受け付けられます。 init
オブジェクトである 2 番目のパラメーターは省略可能です。 init
は、HTTP 要求を構成するために使用されます。
Program.cs
に、次の強調表示されたコードが必要です。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();
プロジェクト ルートに wwwroot フォルダーを作成します。
wwwroot フォルダー内に css フォルダーを作成します。
wwwroot フォルダー内に js フォルダーを作成します。
index.html
という名前の HTML ファイルを、wwwroot フォルダーに追加します。 index.html
の内容を次のマークアップに置き換えます。
<!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>
site.css
という名前の CSS ファイルを wwwroot/css フォルダーに追加します。 site.css
の内容を、次のスタイルに置き換えます。
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;
}
site.js
という名前の JavaScript ファイルを、wwwroot/jsjs フォルダーに追加します。 site.js
の内容を次のコードに置き換えます。
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;
}
ローカルで HTML ページをテストするために、ASP.NET Core プロジェクトの起動設定への変更が要求される場合があります。
index.html
(プロジェクトの既定ファイル) で開くようにするには、launchUrl
プロパティを削除します。このサンプルでは、Web API のすべての CRUD メソッドを呼び出します。 以下では、Web API 要求について説明します。
次のコードでは、HTTP GET 要求が api/todoitems ルートに送信されます。
fetch(uri)
.then(response => response.json())
.then(data => _displayItems(data))
.catch(error => console.error('Unable to get items.', error));
Web API から正常状態コードが返されると、_displayItems
関数が呼び出されます。 _displayItems
によって受け入れられた配列パラメーターの各 To Do アイテムが、[Edit] ボタンと [Delete] ボタンのあるテーブルに追加されます。 Web API 要求が失敗した場合は、ブラウザーのコンソールにエラーが記録されます。
次のコードの内容は以下のとおりです。
item
変数は、To Do アイテムのオブジェクト リテラル表現を構築するために宣言されています。method
- POST HTTP アクション動詞が指定されています。body
- 要求本文の JSON 表現が指定されています。 JSON は、item
に格納されているオブジェクト リテラルを JSON.stringify 関数に渡すことによって生成されます。headers
- Accept
および Content-Type
の HTTP 要求ヘッダーが指定されています。 どちらのヘッダーも application/json
に設定され、それぞれ、受信および送信されるメディアの種類が指定されています。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));
}
Web API で正常状態コードが返されると、getItems
関数が呼び出されて、HTML テーブルが更新されます。 Web API 要求が失敗した場合は、ブラウザーのコンソールにエラーが記録されます。
To Do アイテムの更新は追加と似ていますが、2 つの大きな違いがあります。
method
オプションで示されているように、HTTP アクション動詞は PUT です。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));
To Do アイテムを削除するには、要求の method
オプションを DELETE
に設定し、URL でアイテムの一意の識別子を指定します。
fetch(`${uri}/${id}`, {
method: 'DELETE'
})
.then(() => getItems())
.catch(error => console.error('Unable to delete item.', error));
Web API のヘルプ ページを生成する方法については、次のチュートリアルに進んでください。
このチュートリアルでは、Fetch API を使用して JavaScript で ASP.NET Core Web API を呼び出す方法について説明します。
このセクションでは、To Do アイテムを作成および管理するためのフォームが含まれる HTML ページを追加します。 イベント ハンドラーを、ページ上の要素にアタッチします。 イベント ハンドラーによって、Web API のアクション メソッドに HTTP 要求が送信されます。 Fetch API の fetch
関数により、各 HTTP 要求が開始されます。
fetch
関数からは Promise
オブジェクトが返され、このオブジェクトには Response
オブジェクトとして表された HTTP 応答が含まれます。 一般的なパターンでは、Response
オブジェクトに対して json
関数を呼び出して、JSON 応答の本文を抽出します。 JavaScript により、Web API の応答からの詳細を使ってページが更新されます。
fetch
の最も簡単な呼び出しでは、ルートを表す 1 つのパラメーターが受け付けられます。 init
オブジェクトである 2 番目のパラメーターは省略可能です。 init
は、HTTP 要求を構成するために使用されます。
静的ファイルを提供し、既定のファイル マッピングを有効にするように、アプリを構成します。 Startup.cs
の Configure
メソッドでは、次の強調表示されたコードが必要です。
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseHttpsRedirection();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
}
プロジェクト ルートに wwwroot フォルダーを作成します。
wwwroot フォルダー内に css フォルダーを作成します。
wwwroot フォルダー内に js フォルダーを作成します。
index.html
という名前の HTML ファイルを、wwwroot フォルダーに追加します。 index.html
の内容を次のマークアップに置き換えます。
<!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>
site.css
という名前の CSS ファイルを wwwroot/css フォルダーに追加します。 site.css
の内容を、次のスタイルに置き換えます。
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;
}
site.js
という名前の JavaScript ファイルを、wwwroot/jsjs フォルダーに追加します。 site.js
の内容を次のコードに置き換えます。
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;
}
ローカルで HTML ページをテストするために、ASP.NET Core プロジェクトの起動設定への変更が要求される場合があります。
index.html
(プロジェクトの既定ファイル) で開くようにするには、launchUrl
プロパティを削除します。このサンプルでは、Web API のすべての CRUD メソッドを呼び出します。 以下では、Web API 要求について説明します。
次のコードでは、HTTP GET 要求が api/todoitems ルートに送信されます。
fetch(uri)
.then(response => response.json())
.then(data => _displayItems(data))
.catch(error => console.error('Unable to get items.', error));
Web API から正常状態コードが返されると、_displayItems
関数が呼び出されます。 _displayItems
によって受け入れられた配列パラメーターの各 To Do アイテムが、[Edit] ボタンと [Delete] ボタンのあるテーブルに追加されます。 Web API 要求が失敗した場合は、ブラウザーのコンソールにエラーが記録されます。
次のコードの内容は以下のとおりです。
item
変数は、To Do アイテムのオブジェクト リテラル表現を構築するために宣言されています。method
- POST HTTP アクション動詞が指定されています。body
- 要求本文の JSON 表現が指定されています。 JSON は、item
に格納されているオブジェクト リテラルを JSON.stringify 関数に渡すことによって生成されます。headers
- Accept
および Content-Type
の HTTP 要求ヘッダーが指定されています。 どちらのヘッダーも application/json
に設定され、それぞれ、受信および送信されるメディアの種類が指定されています。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));
}
Web API で正常状態コードが返されると、getItems
関数が呼び出されて、HTML テーブルが更新されます。 Web API 要求が失敗した場合は、ブラウザーのコンソールにエラーが記録されます。
To Do アイテムの更新は追加と似ていますが、2 つの大きな違いがあります。
method
オプションで示されているように、HTTP アクション動詞は PUT です。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));
To Do アイテムを削除するには、要求の method
オプションを DELETE
に設定し、URL でアイテムの一意の識別子を指定します。
fetch(`${uri}/${id}`, {
method: 'DELETE'
})
.then(() => getItems())
.catch(error => console.error('Unable to delete item.', error));
Web API のヘルプ ページを生成する方法については、次のチュートリアルに進んでください。
このチュートリアルでは、Fetch API を使用して JavaScript で ASP.NET Core Web API を呼び出す方法について説明します。
このセクションでは、To Do アイテムを作成および管理するためのフォームが含まれる HTML ページを追加します。 イベント ハンドラーを、ページ上の要素にアタッチします。 イベント ハンドラーによって、Web API のアクション メソッドに HTTP 要求が送信されます。 Fetch API の fetch
関数により、各 HTTP 要求が開始されます。
fetch
関数からは Promise
オブジェクトが返され、このオブジェクトには Response
オブジェクトとして表された HTTP 応答が含まれます。 一般的なパターンでは、Response
オブジェクトに対して json
関数を呼び出して、JSON 応答の本文を抽出します。 JavaScript により、Web API の応答からの詳細を使ってページが更新されます。
fetch
の最も簡単な呼び出しでは、ルートを表す 1 つのパラメーターが受け付けられます。 init
オブジェクトである 2 番目のパラメーターは省略可能です。 init
は、HTTP 要求を構成するために使用されます。
Program.cs
に、次の強調表示されたコードが必要です。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();
プロジェクト ルートに wwwroot フォルダーを作成します。
wwwroot フォルダー内に css フォルダーを作成します。
wwwroot フォルダー内に js フォルダーを作成します。
index.html
という名前の HTML ファイルを、wwwroot フォルダーに追加します。 index.html
の内容を次のマークアップに置き換えます。
<!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>
site.css
という名前の CSS ファイルを wwwroot/css フォルダーに追加します。 site.css
の内容を、次のスタイルに置き換えます。
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;
}
site.js
という名前の JavaScript ファイルを、wwwroot/jsjs フォルダーに追加します。 site.js
の内容を次のコードに置き換えます。
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;
}
ローカルで HTML ページをテストするために、ASP.NET Core プロジェクトの起動設定への変更が要求される場合があります。
index.html
(プロジェクトの既定ファイル) で開くようにするには、launchUrl
プロパティを削除します。このサンプルでは、Web API のすべての CRUD メソッドを呼び出します。 以下では、Web API 要求について説明します。
次のコードでは、HTTP GET 要求が api/todoitems ルートに送信されます。
fetch(uri)
.then(response => response.json())
.then(data => _displayItems(data))
.catch(error => console.error('Unable to get items.', error));
Web API から正常状態コードが返されると、_displayItems
関数が呼び出されます。 _displayItems
によって受け入れられた配列パラメーターの各 To Do アイテムが、[Edit] ボタンと [Delete] ボタンのあるテーブルに追加されます。 Web API 要求が失敗した場合は、ブラウザーのコンソールにエラーが記録されます。
次のコードの内容は以下のとおりです。
item
変数は、To Do アイテムのオブジェクト リテラル表現を構築するために宣言されています。method
- POST HTTP アクション動詞が指定されています。body
- 要求本文の JSON 表現が指定されています。 JSON は、item
に格納されているオブジェクト リテラルを JSON.stringify 関数に渡すことによって生成されます。headers
- Accept
および Content-Type
の HTTP 要求ヘッダーが指定されています。 どちらのヘッダーも application/json
に設定され、それぞれ、受信および送信されるメディアの種類が指定されています。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));
}
Web API で正常状態コードが返されると、getItems
関数が呼び出されて、HTML テーブルが更新されます。 Web API 要求が失敗した場合は、ブラウザーのコンソールにエラーが記録されます。
To Do アイテムの更新は追加と似ていますが、2 つの大きな違いがあります。
method
オプションで示されているように、HTTP アクション動詞は PUT です。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));
To Do アイテムを削除するには、要求の method
オプションを DELETE
に設定し、URL でアイテムの一意の識別子を指定します。
fetch(`${uri}/${id}`, {
method: 'DELETE'
})
.then(() => getItems())
.catch(error => console.error('Unable to delete item.', error));
Web API のヘルプ ページを生成する方法については、次のチュートリアルに進んでください。
ASP.NET Core に関するフィードバック
ASP.NET Core はオープンソース プロジェクトです。 フィードバックを提供するにはリンクを選択します。
events
3月31日 23時 - 4月2日 23時
究極の Power BI、Fabric、SQL、AI コミュニティ主導のイベント。 3 月 31 日から 4 月 2 日。 コード MSCUST を使用して 150 ドルの割引。 価格は2月11日に上昇します。
今すぐ登録トレーニング
モジュール
ASP.NET Core コントローラーを使用して Web API を作成する - Training
作成、読み取り、更新、削除 (CRUD) 操作をサポートする ASP.NET Core コントローラーを使用して、RESTful サービスを作成します。