Sdílet prostřednictvím

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

  • Článek

Autor: Rick Anderson

V tomto kurzu se dozvíte, jak volat webové rozhraní API ASP.NET Core pomocí JavaScriptu pomocí rozhraní Fetch API.

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 úkolů. Obslužné rutiny událostí jsou připojeny k prvkům na stránce. Obslužné rutiny událostí vedou k požadavkům HTTP na metody akcí webového rozhraní API. Funkce rozhraní Fetch API fetch inicializuje každý požadavek HTTP.

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

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

  1. Nakonfigurujte aplikaci tak, aby sloužila statickým souborům a povolila výchozí mapování souborů. Následující zvýrazněný kód je potřeba v 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. V kořenovém adresáři projektu vytvořte složku wwwroot .

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

  3. js Vytvořte složku uvnitř složky wwwroot.

  4. Přidejte soubor HTML s názvem index.html do složky wwwroot . Nahraďte obsah index.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>

  5. Přidejte soubor CSS s názvem site.css do složky wwwroot/css . Obsah nahraďte 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;
}

  6. Přidejte soubor JavaScriptu s názvem site.js do složky wwwroot/js. site.js Obsah 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;
}

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

  1. Otevřete vlastnosti\launchSettings.json.
  2. Odeberte vlastnost, launchUrl aby se aplikace otevřela – index.htmlvýchozí soubor 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 odešle požadavek HTTP GET na trasu api/todoitems :

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 funkce se vyvolá. Každá položka úkolu v parametru pole, kterou akceptuje _displayItems , se přidá do tabulky s tlačítky 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 úkolu

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

  • Proměnná item je deklarována k vytvoření literálu objektu reprezentace položky úkolu.
  • Požadavek na načtení je nakonfigurovaný 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 vytvoří předáním literálu objektu uloženého do item funkce JSON.stringify.
    • headers– určuje hlavičky Accept požadavku HTTP.Content-Type Obě hlavičky jsou nastaveny tak, aby application/json určily typ média, který se přijímá a odesílá.
  • Požadavek HTTP POST se odešle na trasu 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, getItems funkce se vyvolá za účelem aktualizace tabulky HTML. Pokud požadavek webového rozhraní API selže, do konzoly prohlížeče se zaprotokoluje chyba.

Aktualizace položky úkolu

Aktualizace položky úkolu je podobná 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, kterou chcete aktualizovat. Například api/todoitems/1.
  • Příkaz akce HTTP je PUT, jak je uvedeno v method možnosti.
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 úkolu

Pokud chcete odstranit položku úkolu, nastavte možnost požadavku method tak, aby DELETE v adrese URL zadala jedinečný 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 k webovému rozhraní API:

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

V tomto kurzu se dozvíte, jak volat webové rozhraní API ASP.NET Core pomocí JavaScriptu pomocí rozhraní Fetch API.

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 úkolů. Obslužné rutiny událostí jsou připojeny k prvkům na stránce. Obslužné rutiny událostí vedou k požadavkům HTTP na metody akcí webového rozhraní API. Funkce rozhraní Fetch API fetch inicializuje každý požadavek HTTP.

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

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

  1. Nakonfigurujte aplikaci tak, aby sloužila statickým souborům a povolila výchozí mapování souborů. Následující zvýrazněný kód je potřeba v Configure metodě Startup.cs:

    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. js Vytvořte složku uvnitř složky wwwroot.

  5. Přidejte soubor HTML s názvem index.html do složky wwwroot . Nahraďte obsah index.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. Přidejte soubor CSS s názvem site.css do složky wwwroot/css . Obsah nahraďte 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 soubor JavaScriptu s názvem site.js do složky wwwroot/js. site.js Obsah 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;
}

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

  1. Otevřete vlastnosti\launchSettings.json.
  2. Odeberte vlastnost, launchUrl aby se aplikace otevřela – index.htmlvýchozí soubor 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 odešle požadavek HTTP GET na trasu api/todoitems :

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 funkce se vyvolá. Každá položka úkolu v parametru pole, kterou akceptuje _displayItems , se přidá do tabulky s tlačítky 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 úkolu

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

  • Proměnná item je deklarována k vytvoření literálu objektu reprezentace položky úkolu.
  • Požadavek na načtení je nakonfigurovaný 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 vytvoří předáním literálu objektu uloženého do item funkce JSON.stringify.
    • headers– určuje hlavičky Accept požadavku HTTP.Content-Type Obě hlavičky jsou nastaveny tak, aby application/json určily typ média, který se přijímá a odesílá.
  • Požadavek HTTP POST se odešle na trasu 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, getItems funkce se vyvolá za účelem aktualizace tabulky HTML. Pokud požadavek webového rozhraní API selže, do konzoly prohlížeče se zaprotokoluje chyba.

Aktualizace položky úkolu

Aktualizace položky úkolu je podobná 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, kterou chcete aktualizovat. Například api/todoitems/1.
  • Příkaz akce HTTP je PUT, jak je uvedeno v method možnosti.
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 úkolu

Pokud chcete odstranit položku úkolu, nastavte možnost požadavku method tak, aby DELETE v adrese URL zadala jedinečný 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 k webovému rozhraní API:

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

V tomto kurzu se dozvíte, jak volat webové rozhraní API ASP.NET Core pomocí JavaScriptu pomocí rozhraní Fetch API.

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 úkolů. Obslužné rutiny událostí jsou připojeny k prvkům na stránce. Obslužné rutiny událostí vedou k požadavkům HTTP na metody akcí webového rozhraní API. Funkce rozhraní Fetch API fetch inicializuje každý požadavek HTTP.

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

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

  1. Nakonfigurujte aplikaci tak, aby sloužila statickým souborům a povolila výchozí mapování souborů. Následující zvýrazněný kód je potřeba v 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. V kořenovém adresáři projektu vytvořte složku wwwroot .

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

  3. js Vytvořte složku uvnitř složky wwwroot.

  4. Přidejte soubor HTML s názvem index.html do složky wwwroot . Nahraďte obsah index.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>

  5. Přidejte soubor CSS s názvem site.css do složky wwwroot/css . Obsah nahraďte 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;
}

  6. Přidejte soubor JavaScriptu s názvem site.js do složky wwwroot/js. site.js Obsah 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;
}

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

  1. Otevřete vlastnosti\launchSettings.json.
  2. Odeberte vlastnost, launchUrl aby se aplikace otevřela – index.htmlvýchozí soubor 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 odešle požadavek HTTP GET na trasu api/todoitems :

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 funkce se vyvolá. Každá položka úkolu v parametru pole, kterou akceptuje _displayItems , se přidá do tabulky s tlačítky 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 úkolu

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

  • Proměnná item je deklarována k vytvoření literálu objektu reprezentace položky úkolu.
  • Požadavek na načtení je nakonfigurovaný 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 vytvoří předáním literálu objektu uloženého do item funkce JSON.stringify.
    • headers– určuje hlavičky Accept požadavku HTTP.Content-Type Obě hlavičky jsou nastaveny tak, aby application/json určily typ média, který se přijímá a odesílá.
  • Požadavek HTTP POST se odešle na trasu 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, getItems funkce se vyvolá za účelem aktualizace tabulky HTML. Pokud požadavek webového rozhraní API selže, do konzoly prohlížeče se zaprotokoluje chyba.

Aktualizace položky úkolu

Aktualizace položky úkolu je podobná 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, kterou chcete aktualizovat. Například api/todoitems/1.
  • Příkaz akce HTTP je PUT, jak je uvedeno v method možnosti.
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 úkolu

Pokud chcete odstranit položku úkolu, nastavte možnost požadavku method tak, aby DELETE v adrese URL zadala jedinečný 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 k webovému rozhraní API:

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