Öğretici: JavaScript ile ASP.NET Core web API'lerini çağırma

Makale
12/06/2023

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ğini index.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">&#10006;</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ğini site.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ğini site.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 konumunda index.htmlaçı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çinde item depolanan nesne değişmez değeri ON.stringify işlevine JSgeçirilerek oluşturulur.
- headers—ve Content-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ır application/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:

Swashbuckle ve ASP.NET Core ile çalışmaya başlama

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

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 ConfigureStartup.csgereklidir:

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ğini index.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">&#10006;</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ğini site.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ğini site.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 konumunda index.htmlaçı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));

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çinde item depolanan nesne değişmez değeri ON.stringify işlevine JSgeçirilerek oluşturulur.
- headers—ve Content-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ır application/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));
}

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:

Swashbuckle ve ASP.NET Core ile çalışmaya başlama

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

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ğini index.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">&#10006;</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ğini site.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ğini site.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 konumunda index.htmlaçı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));

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çinde item depolanan nesne değişmez değeri ON.stringify işlevine JSgeçirilerek oluşturulur.
- headers—ve Content-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ır application/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));
}

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:

Swashbuckle ve ASP.NET Core ile çalışmaya başlama

Öğretici: JavaScript ile ASP.NET Core web API'lerini çağırma

Önkoşullar

JavaScript ile web API'sini çağırma

Yapılacaklar öğelerinin listesini alma

Yapılacaklar öğesi ekleme

Yapılacaklar öğesini güncelleştirme

Yapılacaklar öğesini silme

Önkoşullar

JavaScript ile web API'sini çağırma

Yapılacaklar öğelerinin listesini alma

Yapılacaklar öğesi ekleme

Yapılacaklar öğesini güncelleştirme

Yapılacaklar öğesini silme

Önkoşullar

JavaScript ile web API'sini çağırma

Yapılacaklar öğelerinin listesini alma

Yapılacaklar öğesi ekleme

Yapılacaklar öğesini güncelleştirme

Yapılacaklar öğesini silme

Geri Bildirim

Ek kaynaklar