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

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

Požadavky

Kompletní kurz: Vytvoření webového rozhraní API
Znalost šablon stylů CSS, HTML a JavaScriptu

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é funkce událostí jsou přiřazeny 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.

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

V kořenovém adresáři projektu vytvořte složku wwwroot .
Ve složce wwwroot vytvořte složku css.
Ve složce wwwroot vytvořte složku js.

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>

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

Do složky site.js přidejte soubor JavaScript s názvem . 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;
}

Změna nastavení spuštění ASP.NET Core projektu může být nutná k místnímu otestování stránky HTML:

Otevřete vlastnosti\launchSettings.json.
Odeberte vlastnost launchUrl, aby se aplikace otevřela v index.html, tedy ve výchozím souboru projektu.

Tato ukázka využívá všechny metody CRUD webového 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 pro vytvoření objektového literálu představujícího položku seznamu úkolů.
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 na application/json, aby určily typ média přijímaného a odesílaného v uvedeném pořadí.
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.
Sloveso akce HTTP je PUT, jak ukazuje možnost method.

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

Chcete-li odstranit položku seznamu úkolů, nastavte možnost požadavku method na DELETE a v adrese URL zadejte 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

Kompletní kurz: Vytvoření webového rozhraní API
Znalost šablon stylů CSS, HTML a JavaScriptu

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

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.

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

V kořenovém adresáři projektu vytvořte složku wwwroot .
Ve složce wwwroot vytvořte složku css.
Ve složce wwwroot vytvořte složku js.

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>

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

Do složky site.js přidejte soubor JavaScript s názvem . 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:

Otevřete vlastnosti\launchSettings.json.
Odeberte vlastnost launchUrl, aby se aplikace otevřela v index.html, tedy ve výchozím souboru projektu.

Tato ukázka využívá všechny metody CRUD webového 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));

Přidání položky úkolu

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

Proměnná item je deklarována pro vytvoření objektového literálu představujícího položku seznamu úkolů.
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 na application/json, aby určily typ média přijímaného a odesílaného v uvedeném pořadí.
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));
}

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.
Sloveso akce HTTP je PUT, jak ukazuje možnost method.

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

Chcete-li odstranit položku seznamu úkolů, nastavte možnost požadavku method na DELETE a v adrese URL zadejte 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

Kompletní kurz: Vytvoření webového rozhraní API
Znalost šablon stylů CSS, HTML a JavaScriptu

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

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.

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

V kořenovém adresáři projektu vytvořte složku wwwroot .
Ve složce wwwroot vytvořte složku css.
Ve složce wwwroot vytvořte složku js.

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>

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

Do složky site.js přidejte soubor JavaScript s názvem . 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:

Otevřete vlastnosti\launchSettings.json.
Odeberte vlastnost launchUrl, aby se aplikace otevřela v index.html, tedy ve výchozím souboru projektu.

Tato ukázka využívá všechny metody CRUD webového 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));

Přidání položky úkolu

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

Proměnná item je deklarována pro vytvoření objektového literálu představujícího položku seznamu úkolů.
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 na application/json, aby určily typ média přijímaného a odesílaného v uvedeném pořadí.
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));
}

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.
Sloveso akce HTTP je PUT, jak ukazuje možnost method.

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

Chcete-li odstranit položku seznamu úkolů, nastavte možnost požadavku method na DELETE a v adrese URL zadejte 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áš názor

Byla tato stránka užitečná?

Last updated on 2026-05-26

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

Požadavky

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

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

Přidání položky úkolu

Aktualizace položky úkolu

Odstranění položky úkolu

Požadavky

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

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

Přidání položky úkolu

Aktualizace položky úkolu

Odstranění položky úkolu

Požadavky

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

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

Přidání položky úkolu

Aktualizace položky úkolu

Odstranění položky úkolu

Váš názor

Další materiály