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

Yazan Rick Anderson

Bu öğretici, JavaScript kullanarak Fetch API ile bir ASP.NET Core web API’sinin nasıl çağrılacağını gösterir.

Önkoşullar

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 metotlarına yönelik HTTP isteklerine neden olur. Fetch API'sinin fetch işlevi her HTTP isteğini başlatır.

fetch fonksiyonu, Response nesnesi olarak temsil edilen bir HTTP yanıtı barındıran bir Promise nesnesi döndürür. Yaygın bir yöntem, Response nesnesi üzerinde json işlevini çağırarak JSON yanıt gövdesini ayıklamaktır. 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.

  1. 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();

  1. Proje kökünde bir wwwroot klasörü oluşturun.

  2. wwwroot klasörünün içinde bir css klasörü oluşturun.

  3. wwwroot klasörünün içinde bir js klasörü oluşturun.

  4. wwwroot klasörüne index.html adlı 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>

  5. wwwroot/css klasörüne adlı site.css bir CSS dosyası ekleyin. site.css öğesinin içeriğini 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;
}

  6. site.js klasörüne adlı 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:

  1. Özellikler\launchSettings.json'ni açın.
  2. Uygulamanın projenin varsayılan dosyası olan index.html konumunda açılmasını zorlamak için launchUrl ö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ılacak öğesinin nesne değişmezi gösterimini oluşturmak için item adlı 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, item içinde depolanan nesne değişmezinin JSON.stringify işlevine geçirilmesiyle üretilir.
    • headers—Accept ve Content-Type HTTP istek üst bilgilerini belirtir. Her iki başlık da sırasıyla alınan ve gönderilen medya türünü belirtmek için application/json olarak ayarlanır.
  • 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:

  • Yolun sonuna, güncellenecek öğenin benzersiz tanımlayıcısı eklenir. Ö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 öğretici, JavaScript kullanarak Fetch API ile bir ASP.NET Core web API’sinin nasıl çağrılacağını gösterir.

Önkoşullar

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 metotlarına yönelik HTTP isteklerine neden olur. Fetch API'sinin fetch işlevi her HTTP isteğini başlatır.

fetch fonksiyonu, Response nesnesi olarak temsil edilen bir HTTP yanıtı barındıran bir Promise nesnesi döndürür. Yaygın bir yöntem, Response nesnesi üzerinde json işlevini çağırarak JSON yanıt gövdesini ayıklamaktır. 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.

  1. Uygulamayı statik dosyalara hizmet vermek ve varsayılan dosya eşlemeyi etkinleştirmek için yapılandırın. Aşağıda vurgulanan kod, Startup.cs içindeki Configure yönteminde 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();
    });
}

  2. Proje kökünde bir wwwroot klasörü oluşturun.

  3. wwwroot klasörünün içinde bir css klasörü oluşturun.

  4. wwwroot klasörünün içinde bir js klasörü oluşturun.

  5. wwwroot klasörüne index.html adlı 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>

  6. wwwroot/css klasörüne adlı site.css bir CSS dosyası ekleyin. site.css öğesinin içeriğini 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;
}

  7. site.js klasörüne adlı 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:

  1. Özellikler\launchSettings.json'ni açın.
  2. Uygulamanın projenin varsayılan dosyası olan index.html konumunda açılmasını zorlamak için launchUrl ö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ılacak öğesinin nesne değişmezi gösterimini oluşturmak için item adlı 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, item içinde depolanan nesne değişmezinin JSON.stringify işlevine geçirilmesiyle üretilir.
    • headers—Accept ve Content-Type HTTP istek üst bilgilerini belirtir. Her iki başlık da sırasıyla alınan ve gönderilen medya türünü belirtmek için application/json olarak ayarlanır.
  • 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:

  • Yolun sonuna, güncellenecek öğenin benzersiz tanımlayıcısı eklenir. Ö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 öğretici, JavaScript kullanarak Fetch API ile bir ASP.NET Core web API’sinin nasıl çağrılacağını gösterir.

Önkoşullar

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 metotlarına yönelik HTTP isteklerine neden olur. Fetch API'sinin fetch işlevi her HTTP isteğini başlatır.

fetch fonksiyonu, Response nesnesi olarak temsil edilen bir HTTP yanıtı barındıran bir Promise nesnesi döndürür. Yaygın bir yöntem, Response nesnesi üzerinde json işlevini çağırarak JSON yanıt gövdesini ayıklamaktır. 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.

  1. 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();

  1. Proje kökünde bir wwwroot klasörü oluşturun.

  2. wwwroot klasörünün içinde bir css klasörü oluşturun.

  3. wwwroot klasörünün içinde bir js klasörü oluşturun.

  4. wwwroot klasörüne index.html adlı 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>

  5. wwwroot/css klasörüne adlı site.css bir CSS dosyası ekleyin. site.css öğesinin içeriğini 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;
}

  6. site.js klasörüne adlı 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:

  1. Özellikler\launchSettings.json'ni açın.
  2. Uygulamanın projenin varsayılan dosyası olan index.html konumunda açılmasını zorlamak için launchUrl ö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ılacak öğesinin nesne değişmezi gösterimini oluşturmak için item adlı 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, item içinde depolanan nesne değişmezinin JSON.stringify işlevine geçirilmesiyle üretilir.
    • headers—Accept ve Content-Type HTTP istek üst bilgilerini belirtir. Her iki başlık da sırasıyla alınan ve gönderilen medya türünü belirtmek için application/json olarak ayarlanır.
  • 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:

  • Yolun sonuna, güncellenecek öğenin benzersiz tanımlayıcısı eklenir. Ö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

  • Last updated on