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

  • Makale
  • Okumak için 2 dakika

Gönderen Rick Anderson

Bu öğreticide, Fetch API'si ASP.NET Core JavaScript ile bir web API'sini çağırmayı gösterir.

2.2 ASP.NET Core için JavaScript ile web API'sini çağırma'nın 2.2 sürümüne bakın.

Önkoşullar

JavaScript ile web API'sini çağırma

Bu bölümde, to-do öğelerini oluşturmak ve yönetmek için formlar içeren bir HTML sayfası eksersiniz. Olay işleyicileri, sayfada öğelere iliştirilmiş. Olay işleyicileri web API'lerinin eylem yöntemlerine HTTP istekleriyle sonuç oluşturur. Fetch API'si işlevi fetch her HTTP isteğini başlatıyor.

İşlev, fetch nesne olarak temsil edilen bir HTTP yanıtı içeren Promise nesnesini Response döndürür. Yaygın olarak kullanılan bir desen, nesnesinde işlevinin iptali ile JSON yanıt json gövdesini Response ayıklamaktır. JavaScript, web API'si yanıtının ayrıntılarıyla sayfayı günceller.

En basit fetch çağrı, yolu temsil eden tek bir parametreyi kabul eder. nesne olarak bilinen ikinci bir init parametre isteğe bağlıdır. init HTTP isteğini yapılandırmak için kullanılır.

  1. Uygulamayı statik dosyaları sağlayacak şekilde yapılandırma ve varsayılan dosya eşlemesini etkinleştirme. Startup.cs yönteminde aşağıdaki Configure vurgulanan kod 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. index.html'nin içeriğini 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 site.css adlı bir CSS dosyası ekleyin. site.css 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. wwwroot/js klasörünesite.js adlı bir JavaScript dosyası ekleyin. Dosyanın içeriğini site.js 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 ASP.NET Core için proje başlatma ayarlarında değişiklik yapmak gerekebilir:

  1. üzerinde Properties\launchSettings.jsaçın.
  2. Uygulamayı launchUrl projenin varsayılan dosyasındaindex.htm için özelliğini — kaldırın.

Bu örnek, web API'sinde tüm CRUD yöntemlerini çağıran bir örnektir. Aşağıda web API'si isteklerinin açıklamaları yer almaktadır.

Yapacak öğelerin listesini al

Aşağıdaki kodda, api/todoitems yolu için 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ür _displayItems olduğunda işlev çağrılır. tarafından kabul edilen dizi parametresinde yer alan her bir to-do öğesi, Düzenle ve _displayItems Sil düğmeleriyle bir tabloya eklenir. Web API'si isteği başarısız olursa, tarayıcının konsoluna bir hata kaydedilir.

Bir to-do öğesi ekleme

Aşağıdaki kodda:

  • Bir item değişken, to-do öğesinin nesne değişmez gösterimini oluşturmak için bildirildi.
  • 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 depolanan nesne değişmez değeri item JSON.stringify işlevine aktararak üretir.
    • headers—ve Accept HTTP Content-Type isteği üst bilgilerini belirtir. Her iki üst bilgi de application/json sırasıyla alınan ve gönderilen medya türünü belirtmek için olarak ayarlanır.
  • api/todoitems yolu için 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ür getItems olduğunda, HTML tablosu 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.

Bir to-do öğesini güncelleştirme

Bir to-do öğesini güncelleştirmek, bir öğe eklemeye benzer; ancak, iki önemli fark vardır:

  • Yol, güncelleştirilen öğenin benzersiz tanımlayıcısıyla son eke sahip olur. Örneğin, api/todoitems/1.
  • HTTP eylem fiili, seçeneğiyle belirtilen PUT method eylemidir.
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));

Bir to-do öğesini silme

Bir to-do öğesini silmek için isteğin seçeneğini olarak ayarlayın method DELETE 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'si yardım sayfaları oluşturma hakkında bilgi edinmek için sonraki öğreticiye ilerleyin:

Swashbuckle ve ASP.NET Core kullanmaya başlayın