Öğretici: JavaScript ile ASP.NET Core web API'lerini çağırma
Gönderen Rick Anderson
Bu öğreticide, Getirme API'sini kullanarak JavaScript ile bir ASP.NET Core web API'sinin nasıl çağrılacakları gösterilmektedir.
Önkoşullar
- Öğreticiyi Tamamlama : Web API'si oluşturma
- CSS, HTML ve JavaScript hakkında bilgi
JavaScript ile web API'sini çağırma
Bu bölümde, yapılacaklar öğelerini oluşturmak ve yönetmek için formlar içeren bir HTML sayfası ekleyeceksiniz. Olay işleyicileri sayfadaki öğelere eklenir. Olay işleyicileri, web API'sinin eylem yöntemlerine HTTP istekleriyle sonuçlanır. Fetch API'sinin fetch
işlevi her HTTP isteğini başlatır.
fetch
İşlev, nesne olarak temsil edilen bir Promise
HTTP yanıtı içeren bir Response
nesne döndürür. Yaygın bir desen, nesnedeki JSişlevi çağırarak ON yanıt gövdesini json
ayıklamaktır Response
. JavaScript, web API'sinin yanıtından alınan ayrıntılarla sayfayı güncelleştirir.
En fetch
basit çağrı, yolu temsil eden tek bir parametreyi kabul eder. nesne olarak init
bilinen ikinci bir parametre isteğe bağlıdır. init
HTTP isteğini yapılandırmak için kullanılır.
- Uygulamayı statik dosyalara hizmet vermek ve varsayılan dosya eşlemeyi etkinleştirmek için yapılandırın. içinde aşağıdaki vurgulanmış kod gereklidir
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();
Proje kökünde bir wwwroot klasörü oluşturun.
wwwroot klasörünün içinde bir css klasörü oluşturun.
wwwroot klasörünün içinde bir js klasörü oluşturun.
wwwroot klasörüne adlı
index.html
bir HTML dosyası ekleyin. öğesinin içeriğiniindex.html
aşağıdaki işaretlemeyle değiştirin:<!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>
wwwroot/css klasörüne adlı
site.css
bir CSS dosyası ekleyin. öğesinin içeriğinisite.css
aşağıdaki stillerle değiştirin: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; }
wwwroot/js klasörüne adlı
site.js
bir JavaScript dosyası ekleyin. öğesinin içeriğinisite.js
aşağıdaki kodla değiştirin: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 sayfasını yerel olarak test etmek için ASP.NET Core projesinin başlatma ayarlarında değişiklik yapılması gerekebilir:
- Properties\launch Ayarlar.json dosyasını açın.
launchUrl
Uygulamanın projenin varsayılan dosyası olan konumundaindex.html
açılmasını zorlamak için özelliğini kaldırın.
Bu örnek, web API'sinin tüm CRUD yöntemlerini çağırır. Aşağıda web API'sinin isteklerinin açıklamaları verilmiştir.
Yapılacaklar öğelerinin listesini alma
Aşağıdaki kodda api/todoitems yoluna bir HTTP GET isteği gönderilir:
fetch(uri)
.then(response => response.json())
.then(data => _displayItems(data))
.catch(error => console.error('Unable to get items.', error));
Web API'si başarılı bir durum kodu döndürdüğünde _displayItems
işlev çağrılır. tarafından _displayItems
kabul edilen dizi parametresindeki her yapılacaklar öğesi, Düzenle ve Sil düğmeleriyle bir tabloya eklenir. Web API'si isteği başarısız olursa, tarayıcının konsoluna bir hata kaydedilir.
Yapılacaklar öğesi ekleme
Aşağıdaki kodda:
- Yapılacaklar
item
öğesinin nesne değişmez değeri gösterimini oluşturmak için bir değişken bildirilir. - Fetch isteği aşağıdaki seçeneklerle yapılandırılır:
method
—POST HTTP eylem fiilini belirtir.body
—istek gövdesinin JSON gösterimini belirtir. JSON, içindeitem
depolanan nesne değişmez değeri ON.stringify işlevine JSgeçirilerek oluşturulur.headers
—veContent-Type
HTTP isteği üst bilgilerini belirtirAccept
. Her iki üst bilgi de sırasıyla alınan ve gönderilen medya türünü belirtmek için ayarlanırapplication/json
.
- API/todoitems yoluna bir HTTP POST isteği gönderilir.
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'si başarılı bir durum kodu döndürdüğünde getItems
, HTML tablosunu güncelleştirmek için işlev çağrılır. Web API'si isteği başarısız olursa, tarayıcının konsoluna bir hata kaydedilir.
Yapılacaklar öğesini güncelleştirme
Yapılacaklar öğesini güncelleştirmek, bir öğe eklemeye benzer; ancak iki önemli fark vardır:
- Yol, güncelleştirilecek öğenin benzersiz tanımlayıcısıyla son eklenmiştir. Örneğin, api/todoitems/1.
- HTTP eylem fiili, seçenekte
method
gösterildiği gibi PUT'dır.
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));
Yapılacaklar öğesini silme
Yapılacaklar öğesini silmek için, isteğin method
seçeneğini DELETE
olarak ayarlayın ve URL'de öğenin benzersiz tanımlayıcısını belirtin.
fetch(`${uri}/${id}`, {
method: 'DELETE'
})
.then(() => getItems())
.catch(error => console.error('Unable to delete item.', error));
Web API'sinin yardım sayfalarını oluşturmayı öğrenmek için sonraki öğreticiye geçin:
Bu öğreticide, Getirme API'sini kullanarak JavaScript ile bir ASP.NET Core web API'sinin nasıl çağrılacakları gösterilmektedir.
Önkoşullar
- Öğreticiyi Tamamlama : Web API'si oluşturma
- CSS, HTML ve JavaScript hakkında bilgi
JavaScript ile web API'sini çağırma
Bu bölümde, yapılacaklar öğelerini oluşturmak ve yönetmek için formlar içeren bir HTML sayfası ekleyeceksiniz. Olay işleyicileri sayfadaki öğelere eklenir. Olay işleyicileri, web API'sinin eylem yöntemlerine HTTP istekleriyle sonuçlanır. Fetch API'sinin fetch
işlevi her HTTP isteğini başlatır.
fetch
İşlev, nesne olarak temsil edilen bir Promise
HTTP yanıtı içeren bir Response
nesne döndürür. Yaygın bir desen, nesnedeki JSişlevi çağırarak ON yanıt gövdesini json
ayıklamaktır Response
. JavaScript, web API'sinin yanıtından alınan ayrıntılarla sayfayı güncelleştirir.
En fetch
basit çağrı, yolu temsil eden tek bir parametreyi kabul eder. nesne olarak init
bilinen ikinci bir parametre isteğe bağlıdır. init
HTTP isteğini yapılandırmak için kullanılır.
Uygulamayı statik dosyalara hizmet vermek ve varsayılan dosya eşlemeyi etkinleştirmek için yapılandırın. aşağıdaki vurgulanmış kod yönteminde
Configure
Startup.cs
gereklidir: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(); }); }
Proje kökünde bir wwwroot klasörü oluşturun.
wwwroot klasörünün içinde bir css klasörü oluşturun.
wwwroot klasörünün içinde bir js klasörü oluşturun.
wwwroot klasörüne adlı
index.html
bir HTML dosyası ekleyin. öğesinin içeriğiniindex.html
aşağıdaki işaretlemeyle değiştirin:<!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>
wwwroot/css klasörüne adlı
site.css
bir CSS dosyası ekleyin. öğesinin içeriğinisite.css
aşağıdaki stillerle değiştirin: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; }
wwwroot/js klasörüne adlı
site.js
bir JavaScript dosyası ekleyin. öğesinin içeriğinisite.js
aşağıdaki kodla değiştirin: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 sayfasını yerel olarak test etmek için ASP.NET Core projesinin başlatma ayarlarında değişiklik yapılması gerekebilir:
- Properties\launch Ayarlar.json dosyasını açın.
launchUrl
Uygulamanın projenin varsayılan dosyası olan konumundaindex.html
açılmasını zorlamak için özelliğini kaldırın.
Bu örnek, web API'sinin tüm CRUD yöntemlerini çağırır. Aşağıda web API'sinin isteklerinin açıklamaları verilmiştir.
Yapılacaklar öğelerinin listesini alma
Aşağıdaki kodda api/todoitems yoluna bir HTTP GET isteği gönderilir:
fetch(uri)
.then(response => response.json())
.then(data => _displayItems(data))
.catch(error => console.error('Unable to get items.', error));
Web API'si başarılı bir durum kodu döndürdüğünde _displayItems
işlev çağrılır. tarafından _displayItems
kabul edilen dizi parametresindeki her yapılacaklar öğesi, Düzenle ve Sil düğmeleriyle bir tabloya eklenir. Web API'si isteği başarısız olursa, tarayıcının konsoluna bir hata kaydedilir.
Yapılacaklar öğesi ekleme
Aşağıdaki kodda:
- Yapılacaklar
item
öğesinin nesne değişmez değeri gösterimini oluşturmak için bir değişken bildirilir. - Fetch isteği aşağıdaki seçeneklerle yapılandırılır:
method
—POST HTTP eylem fiilini belirtir.body
—istek gövdesinin JSON gösterimini belirtir. JSON, içindeitem
depolanan nesne değişmez değeri ON.stringify işlevine JSgeçirilerek oluşturulur.headers
—veContent-Type
HTTP isteği üst bilgilerini belirtirAccept
. Her iki üst bilgi de sırasıyla alınan ve gönderilen medya türünü belirtmek için ayarlanırapplication/json
.
- API/todoitems yoluna bir HTTP POST isteği gönderilir.
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'si başarılı bir durum kodu döndürdüğünde getItems
, HTML tablosunu güncelleştirmek için işlev çağrılır. Web API'si isteği başarısız olursa, tarayıcının konsoluna bir hata kaydedilir.
Yapılacaklar öğesini güncelleştirme
Yapılacaklar öğesini güncelleştirmek, bir öğe eklemeye benzer; ancak iki önemli fark vardır:
- Yol, güncelleştirilecek öğenin benzersiz tanımlayıcısıyla son eklenmiştir. Örneğin, api/todoitems/1.
- HTTP eylem fiili, seçenekte
method
gösterildiği gibi PUT'dır.
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));
Yapılacaklar öğesini silme
Yapılacaklar öğesini silmek için, isteğin method
seçeneğini DELETE
olarak ayarlayın ve URL'de öğenin benzersiz tanımlayıcısını belirtin.
fetch(`${uri}/${id}`, {
method: 'DELETE'
})
.then(() => getItems())
.catch(error => console.error('Unable to delete item.', error));
Web API'sinin yardım sayfalarını oluşturmayı öğrenmek için sonraki öğreticiye geçin:
Bu öğreticide, Getirme API'sini kullanarak JavaScript ile bir ASP.NET Core web API'sinin nasıl çağrılacakları gösterilmektedir.
Önkoşullar
- Öğreticiyi Tamamlama : Web API'si oluşturma
- CSS, HTML ve JavaScript hakkında bilgi
JavaScript ile web API'sini çağırma
Bu bölümde, yapılacaklar öğelerini oluşturmak ve yönetmek için formlar içeren bir HTML sayfası ekleyeceksiniz. Olay işleyicileri sayfadaki öğelere eklenir. Olay işleyicileri, web API'sinin eylem yöntemlerine HTTP istekleriyle sonuçlanır. Fetch API'sinin fetch
işlevi her HTTP isteğini başlatır.
fetch
İşlev, nesne olarak temsil edilen bir Promise
HTTP yanıtı içeren bir Response
nesne döndürür. Yaygın bir desen, nesnedeki JSişlevi çağırarak ON yanıt gövdesini json
ayıklamaktır Response
. JavaScript, web API'sinin yanıtından alınan ayrıntılarla sayfayı güncelleştirir.
En fetch
basit çağrı, yolu temsil eden tek bir parametreyi kabul eder. nesne olarak init
bilinen ikinci bir parametre isteğe bağlıdır. init
HTTP isteğini yapılandırmak için kullanılır.
- Uygulamayı statik dosyalara hizmet vermek ve varsayılan dosya eşlemeyi etkinleştirmek için yapılandırın. içinde aşağıdaki vurgulanmış kod gereklidir
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();
Proje kökünde bir wwwroot klasörü oluşturun.
wwwroot klasörünün içinde bir css klasörü oluşturun.
wwwroot klasörünün içinde bir js klasörü oluşturun.
wwwroot klasörüne adlı
index.html
bir HTML dosyası ekleyin. öğesinin içeriğiniindex.html
aşağıdaki işaretlemeyle değiştirin:<!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>
wwwroot/css klasörüne adlı
site.css
bir CSS dosyası ekleyin. öğesinin içeriğinisite.css
aşağıdaki stillerle değiştirin: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; }
wwwroot/js klasörüne adlı
site.js
bir JavaScript dosyası ekleyin. öğesinin içeriğinisite.js
aşağıdaki kodla değiştirin: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 sayfasını yerel olarak test etmek için ASP.NET Core projesinin başlatma ayarlarında değişiklik yapılması gerekebilir:
- Properties\launch Ayarlar.json dosyasını açın.
launchUrl
Uygulamanın projenin varsayılan dosyası olan konumundaindex.html
açılmasını zorlamak için özelliğini kaldırın.
Bu örnek, web API'sinin tüm CRUD yöntemlerini çağırır. Aşağıda web API'sinin isteklerinin açıklamaları verilmiştir.
Yapılacaklar öğelerinin listesini alma
Aşağıdaki kodda api/todoitems yoluna bir HTTP GET isteği gönderilir:
fetch(uri)
.then(response => response.json())
.then(data => _displayItems(data))
.catch(error => console.error('Unable to get items.', error));
Web API'si başarılı bir durum kodu döndürdüğünde _displayItems
işlev çağrılır. tarafından _displayItems
kabul edilen dizi parametresindeki her yapılacaklar öğesi, Düzenle ve Sil düğmeleriyle bir tabloya eklenir. Web API'si isteği başarısız olursa, tarayıcının konsoluna bir hata kaydedilir.
Yapılacaklar öğesi ekleme
Aşağıdaki kodda:
- Yapılacaklar
item
öğesinin nesne değişmez değeri gösterimini oluşturmak için bir değişken bildirilir. - Fetch isteği aşağıdaki seçeneklerle yapılandırılır:
method
—POST HTTP eylem fiilini belirtir.body
—istek gövdesinin JSON gösterimini belirtir. JSON, içindeitem
depolanan nesne değişmez değeri ON.stringify işlevine JSgeçirilerek oluşturulur.headers
—veContent-Type
HTTP isteği üst bilgilerini belirtirAccept
. Her iki üst bilgi de sırasıyla alınan ve gönderilen medya türünü belirtmek için ayarlanırapplication/json
.
- API/todoitems yoluna bir HTTP POST isteği gönderilir.
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'si başarılı bir durum kodu döndürdüğünde getItems
, HTML tablosunu güncelleştirmek için işlev çağrılır. Web API'si isteği başarısız olursa, tarayıcının konsoluna bir hata kaydedilir.
Yapılacaklar öğesini güncelleştirme
Yapılacaklar öğesini güncelleştirmek, bir öğe eklemeye benzer; ancak iki önemli fark vardır:
- Yol, güncelleştirilecek öğenin benzersiz tanımlayıcısıyla son eklenmiştir. Örneğin, api/todoitems/1.
- HTTP eylem fiili, seçenekte
method
gösterildiği gibi PUT'dır.
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));
Yapılacaklar öğesini silme
Yapılacaklar öğesini silmek için, isteğin method
seçeneğini DELETE
olarak ayarlayın ve URL'de öğenin benzersiz tanımlayıcısını belirtin.
fetch(`${uri}/${id}`, {
method: 'DELETE'
})
.then(() => getItems())
.catch(error => console.error('Unable to delete item.', error));
Web API'sinin yardım sayfalarını oluşturmayı öğrenmek için sonraki öğreticiye geçin:
ASP.NET Core