Kurz: Volání webového ASP.NET Core API pomocí JavaScriptu

  • Článek
  • 2 min ke čtení

Autor: Rick Anderson

Tento kurz ukazuje, jak volat webové ASP.NET Core API pomocí JavaScriptu pomocí rozhraní Fetch API.

Další ASP.NET Core 2.2 najdete ve verzi 2.2 tématu Volání webového rozhraní API pomocí JavaScriptu.

Požadavky

Volání webového rozhraní API pomocí JavaScriptu

V této části přidáte stránku HTML obsahující formuláře pro vytváření a správu položek seznamu. Obslužné rutiny událostí jsou připojeny k prvkům na stránce. Výsledkem obslužných rutin událostí jsou požadavky HTTP na metody akcí webového rozhraní API. Funkce rozhraní API Fetch fetch iniciuje každý požadavek HTTP.

Funkce fetch vrátí objekt Promise, který obsahuje odpověď HTTP reprezentované jako Response objekt. Běžným vzorem je extrakce textu odpovědi JSON vyvoláním json funkce v Response objektu . JavaScript aktualizuje stránku s podrobnostmi z odpovědi webového rozhraní API.

Nejjednodušší volání fetch přijímá jeden parametr představující trasu. Druhý parametr, označované jako init objekt , je volitelný. init se používá ke konfiguraci požadavku HTTP.

  1. Nakonfigurujte aplikaci pro obsluhu statických souborů a povolte výchozí mapování souborů. V metodě souboru Startup.cs je potřeba následující Configure zvýrazněný kód:

    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. V kořenovém adresáři projektu vytvořte složku wwwroot.

  3. Ve složce wwwroot vytvořte složku css.

  4. Ve složce wwwroot vytvořte složku js.

  5. Do složky wwwroot přidejte soubor HTML index.html. Nahraďte obsah souboruindex.html následujícím kódem:

    <!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. Do složky wwwroot/css přidejte soubor CSS s názvem site.css. Nahraďte obsah souboru site.css následujícími styly:

    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. Přidejte javascriptový soubor site.js do složky wwwroot/js. Obsah souboru site.js nahraďte následujícím kódem:

    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;
}

K místnímu otestování ASP.NET Core HTML může být potřeba změnit nastavení spuštění projektu projektu:

  1. Otevřete Properties\launchSettings.jsna .
  2. Odebráním launchUrl vlastnosti vynutíte, aby se aplikace index.html — výchozího souboru projektu.

Tato ukázka volá všechny metody CRUD webového rozhraní API. Následuje vysvětlení požadavků webového rozhraní API.

Získání seznamu položek úkolů

V následujícím kódu se do trasy api/todoitems odesílá požadavek HTTP GET:

fetch(uri)
  .then(response => response.json())
  .then(data => _displayItems(data))
  .catch(error => console.error('Unable to get items.', error));

Když webové rozhraní API vrátí úspěšný stavový kód, _displayItems vyvolá se funkce . Každá položka položek seznamu v parametru pole přijatá parametrem se přidá do tabulky pomocí tlačítek _displayItems Upravit a Odstranit. Pokud požadavek webového rozhraní API selže, do konzoly prohlížeče se zaprotokoluje chyba.

Přidání položky položek seznamu

V následujícím kódu:

  • Proměnná item je deklarována k vytvoření reprezentace literálu objektu položky ovládacího prvku.
  • Požadavek fetch se konfiguruje s následujícími možnostmi:
    • method—určuje příkaz akce POST HTTP.
    • body—určuje reprezentaci JSON textu požadavku. Json se produkuje předáním literálu objektu uloženého v item do funkce JSON.stringify.
    • headers—určuje Accept hlavičky Content-Type požadavku HTTP a . Obě hlavičky jsou nastavené na , aby bylo možné určit typ média, application/json které se přijímá a odesílá.
  • Požadavek HTTP POST se odesílá do trasy api/todoitems.
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));
}

Když webové rozhraní API vrátí úspěšný stavový kód, vyvolá se funkce pro getItems aktualizaci tabulky HTML. Pokud požadavek webového rozhraní API selže, do konzoly prohlížeče se zaprotokoluje chyba.

Aktualizace položky položek seznamu

Aktualizace položky položek položek seznamu je podobná jako při přidání položky. Existují však dva významné rozdíly:

  • Trasa má příponu s jedinečným identifikátorem položky, která se má aktualizovat. Například api/todoitems/1.
  • Příkaz akce HTTP je PUT, jak je označeno method parametrem .
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));

Odstranění položky položek seznamu

Pokud chcete odstranit položku seznamu, nastavte možnost požadavku na a v adrese URL zadejte jedinečný method DELETE identifikátor položky.

fetch(`${uri}/${id}`, {
  method: 'DELETE'
})
.then(() => getItems())
.catch(error => console.error('Unable to delete item.', error));

V dalším kurzu se dozvíte, jak vygenerovat stránky nápovědy webového rozhraní API:

Začínáme s swashbuckle a ASP.NET Core