Oktatóanyag: ASP.NET Core webes API meghívása JavaScript használatával

Készítette: Rick Anderson

Ez az oktatóanyag bemutatja, hogyan hívhat meg egy ASP.NET Core webes API-t JavaScript használatával a Fetch API használatával.

Prerequisites

A webes API meghívása JavaScript használatával

Ebben a szakaszban egy HTML-lapot fog hozzáadni, amely űrlapokat tartalmaz to-do elemek létrehozásához és kezeléséhez. Az eseménykezelők a lap elemeihez vannak csatolva. Az eseménykezelők HTTP-kéréseket eredményeznek a webes API műveleti módszereihez. A Fetch API függvénye fetch minden HTTP-kérést kezdeményez.

A fetch függvény egy Promise objektumot ad vissza, amely objektumként ábrázolt Response HTTP-választ tartalmaz. Gyakori minta a JSON-válasz törzsének kinyerése a json függvény meghívásával az Response objektumon. A JavaScript frissíti a lapot a webes API válaszából származó részletekkel.

A legegyszerűbb fetch hívás egyetlen, az útvonalat képviselő paramétert fogad el. A második paraméter, az init úgynevezett objektum nem kötelező. init A HTTP-kérés konfigurálására szolgál.

  1. Konfigurálja az alkalmazást statikus fájlok kiszolgálására és az alapértelmezett fájlleképezés engedélyezésére. A következő kiemelt kódra van szükség a következőben 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. Hozzon létre egy wwwroot mappát a projekt gyökérkönyvtárában.

  2. Hozzon létre egy css mappát a wwwroot mappában.

  3. Hozzon létre egy js mappát a wwwroot mappában.

  4. Adjon hozzá egy HTML-fájlt index.html a wwwroot mappához. Cserélje le a index.html tartalmát a következő jelölőkódra:

    <!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. Adjon hozzá egy CSS-fájlt site.css a wwwroot/css mappához. Cserélje le a(z) site.css tartalmát a következő stílusokra:

    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. Adjon hozzá egy JavaScript-fájlt site.js a wwwroot/js mappához. Cserélje le a site.js tartalmát a következő kódra:

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

Előfordulhat, hogy a HTML-oldal helyi teszteléséhez módosítani kell a ASP.NET Core projekt indítási beállításait:

  1. Nyissa meg a Properties\launchSettings.json fájlt.
  2. Távolítsa el a launchUrl tulajdonságot, hogy kényszerítse az alkalmazás megnyitását index.htmla projekt alapértelmezett fájljában.

Ez a minta meghívja a webes API ÖSSZES CRUD metódusát. Az alábbiakban a webes API-kérések magyarázatait követjük.

teendőelemek listájának lekérése

A következő kódban http GET-kérést küld a rendszer az api/todoitems útvonalra :

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

Amikor a webes API sikeres állapotkódot ad vissza, a _displayItems függvény meghívása történik. A(z) _displayItems által fogadott tömbparaméter minden teendőelemét egy Szerkesztés és Törlés gombokkal ellátott táblához adja. Ha a webes API-kérés meghiúsul, a rendszer hibát naplóz a böngésző konzoljára.

Teendő hozzáadása

A következő kódban:

  • A item rendszer deklarál egy változót a to-do elem objektumkonstans-ábrázolásának létrehozásához.
  • A beolvasási kérések a következő beállításokkal vannak konfigurálva:
    • method– a POST HTTP műveleti parancsot adja meg.
    • body– a kérelem törzsének JSON-ábrázolását adja meg. A JSON a item függvénybe tárolt objektumkonstans átadásával jön létre.
    • headers— megadja a(z) Accept és Content-Type HTTP-kérelemfejléceket. Mindkét fejléc úgy van beállítva, hogy application/json megadja a fogadott és elküldött médiatípust.
  • A rendszer HTTP POST-kérést küld az api/todoitems útvonalra .
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));
}

Amikor a webes API sikeres állapotkódot ad vissza, a getItems függvény a HTML-tábla frissítéséhez lesz meghívva. Ha a webes API-kérés meghiúsul, a rendszer hibát naplóz a böngésző konzoljára.

Teendő frissítése

A to-do elem frissítése hasonló a hozzáadáshoz; azonban két jelentős különbség van:

  • Az útvonal a frissítendő elem egyedi azonosítójával van kiegészítve. Például api/todoitems/1.
  • A HTTP műveleti parancs a PUT, ahogy azt a method beállítás jelzi.
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));

to-do elem törlése

Ha törölni szeretne egy to-do elemet, állítsa be a kérés beállítását methodDELETE , és adja meg az elem egyedi azonosítóját az URL-címben.

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

Lépjen tovább a következő oktatóanyagra, amelyből megtudhatja, hogyan hozhat létre webes API-súgólapokat:

Ismerkedés a Swashbuckle és az ASP.NET Core használatával

Ez az oktatóanyag bemutatja, hogyan hívhat meg egy ASP.NET Core webes API-t JavaScript használatával a Fetch API használatával.

Prerequisites

A webes API meghívása JavaScript használatával

Ebben a szakaszban egy HTML-lapot fog hozzáadni, amely űrlapokat tartalmaz to-do elemek létrehozásához és kezeléséhez. Az eseménykezelők a lap elemeihez vannak csatolva. Az eseménykezelők HTTP-kéréseket eredményeznek a webes API műveleti módszereihez. A Fetch API függvénye fetch minden HTTP-kérést kezdeményez.

A fetch függvény egy Promise objektumot ad vissza, amely objektumként ábrázolt Response HTTP-választ tartalmaz. Gyakori minta a JSON-válasz törzsének kinyerése a json függvény meghívásával az Response objektumon. A JavaScript frissíti a lapot a webes API válaszából származó részletekkel.

A legegyszerűbb fetch hívás egyetlen, az útvonalat képviselő paramétert fogad el. A második paraméter, az init úgynevezett objektum nem kötelező. init A HTTP-kérés konfigurálására szolgál.

  1. Konfigurálja az alkalmazást statikus fájlok kiszolgálására és az alapértelmezett fájlleképezés engedélyezésére. A következő kiemelt kódra van szükség a Configure következő metódusban 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. Hozzon létre egy wwwroot mappát a projekt gyökérkönyvtárában.

  3. Hozzon létre egy css mappát a wwwroot mappában.

  4. Hozzon létre egy js mappát a wwwroot mappában.

  5. Adjon hozzá egy HTML-fájlt index.html a wwwroot mappához. Cserélje le a index.html tartalmát a következő jelölőkódra:

    <!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. Adjon hozzá egy CSS-fájlt site.css a wwwroot/css mappához. Cserélje le a(z) site.css tartalmát a következő stílusokra:

    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. Adjon hozzá egy JavaScript-fájlt site.js a wwwroot/js mappához. Cserélje le a site.js tartalmát a következő kódra:

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

Előfordulhat, hogy a HTML-oldal helyi teszteléséhez módosítani kell a ASP.NET Core projekt indítási beállításait:

  1. Nyissa meg a Properties\launchSettings.json fájlt.
  2. Távolítsa el a launchUrl tulajdonságot, hogy kényszerítse az alkalmazás megnyitását index.htmla projekt alapértelmezett fájljában.

Ez a minta meghívja a webes API ÖSSZES CRUD metódusát. Az alábbiakban a webes API-kérések magyarázatait követjük.

teendőelemek listájának lekérése

A következő kódban http GET-kérést küld a rendszer az api/todoitems útvonalra :

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

Amikor a webes API sikeres állapotkódot ad vissza, a _displayItems függvény meghívása történik. A(z) _displayItems által fogadott tömbparaméter minden teendőelemét egy Szerkesztés és Törlés gombokkal ellátott táblához adja. Ha a webes API-kérés meghiúsul, a rendszer hibát naplóz a böngésző konzoljára.

Teendő hozzáadása

A következő kódban:

  • A item rendszer deklarál egy változót a to-do elem objektumkonstans-ábrázolásának létrehozásához.
  • A beolvasási kérések a következő beállításokkal vannak konfigurálva:
    • method– a POST HTTP műveleti parancsot adja meg.
    • body– a kérelem törzsének JSON-ábrázolását adja meg. A JSON a item függvénybe tárolt objektumkonstans átadásával jön létre.
    • headers— megadja a(z) Accept és Content-Type HTTP-kérelemfejléceket. Mindkét fejléc úgy van beállítva, hogy application/json megadja a fogadott és elküldött médiatípust.
  • A rendszer HTTP POST-kérést küld az api/todoitems útvonalra .
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));
}

Amikor a webes API sikeres állapotkódot ad vissza, a getItems függvény a HTML-tábla frissítéséhez lesz meghívva. Ha a webes API-kérés meghiúsul, a rendszer hibát naplóz a böngésző konzoljára.

Teendő frissítése

A to-do elem frissítése hasonló a hozzáadáshoz; azonban két jelentős különbség van:

  • Az útvonal a frissítendő elem egyedi azonosítójával van kiegészítve. Például api/todoitems/1.
  • A HTTP műveleti parancs a PUT, ahogy azt a method beállítás jelzi.
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));

to-do elem törlése

Ha törölni szeretne egy to-do elemet, állítsa be a kérés beállítását methodDELETE , és adja meg az elem egyedi azonosítóját az URL-címben.

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

Lépjen tovább a következő oktatóanyagra, amelyből megtudhatja, hogyan hozhat létre webes API-súgólapokat:

Ismerkedés a Swashbuckle és az ASP.NET Core használatával

Ez az oktatóanyag bemutatja, hogyan hívhat meg egy ASP.NET Core webes API-t JavaScript használatával a Fetch API használatával.

Prerequisites

A webes API meghívása JavaScript használatával

Ebben a szakaszban egy HTML-lapot fog hozzáadni, amely űrlapokat tartalmaz to-do elemek létrehozásához és kezeléséhez. Az eseménykezelők a lap elemeihez vannak csatolva. Az eseménykezelők HTTP-kéréseket eredményeznek a webes API műveleti módszereihez. A Fetch API függvénye fetch minden HTTP-kérést kezdeményez.

A fetch függvény egy Promise objektumot ad vissza, amely objektumként ábrázolt Response HTTP-választ tartalmaz. Gyakori minta a JSON-válasz törzsének kinyerése a json függvény meghívásával az Response objektumon. A JavaScript frissíti a lapot a webes API válaszából származó részletekkel.

A legegyszerűbb fetch hívás egyetlen, az útvonalat képviselő paramétert fogad el. A második paraméter, az init úgynevezett objektum nem kötelező. init A HTTP-kérés konfigurálására szolgál.

  1. Konfigurálja az alkalmazást statikus fájlok kiszolgálására és az alapértelmezett fájlleképezés engedélyezésére. A következő kiemelt kódra van szükség a következőben 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. Hozzon létre egy wwwroot mappát a projekt gyökérkönyvtárában.

  2. Hozzon létre egy css mappát a wwwroot mappában.

  3. Hozzon létre egy js mappát a wwwroot mappában.

  4. Adjon hozzá egy HTML-fájlt index.html a wwwroot mappához. Cserélje le a index.html tartalmát a következő jelölőkódra:

    <!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. Adjon hozzá egy CSS-fájlt site.css a wwwroot/css mappához. Cserélje le a(z) site.css tartalmát a következő stílusokra:

    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. Adjon hozzá egy JavaScript-fájlt site.js a wwwroot/js mappához. Cserélje le a site.js tartalmát a következő kódra:

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

Előfordulhat, hogy a HTML-oldal helyi teszteléséhez módosítani kell a ASP.NET Core projekt indítási beállításait:

  1. Nyissa meg a Properties\launchSettings.json fájlt.
  2. Távolítsa el a launchUrl tulajdonságot, hogy kényszerítse az alkalmazás megnyitását index.htmla projekt alapértelmezett fájljában.

Ez a minta meghívja a webes API ÖSSZES CRUD metódusát. Az alábbiakban a webes API-kérések magyarázatait követjük.

teendőelemek listájának lekérése

A következő kódban http GET-kérést küld a rendszer az api/todoitems útvonalra :

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

Amikor a webes API sikeres állapotkódot ad vissza, a _displayItems függvény meghívása történik. A(z) _displayItems által fogadott tömbparaméter minden teendőelemét egy Szerkesztés és Törlés gombokkal ellátott táblához adja. Ha a webes API-kérés meghiúsul, a rendszer hibát naplóz a böngésző konzoljára.

Teendő hozzáadása

A következő kódban:

  • A item rendszer deklarál egy változót a to-do elem objektumkonstans-ábrázolásának létrehozásához.
  • A beolvasási kérések a következő beállításokkal vannak konfigurálva:
    • method– a POST HTTP műveleti parancsot adja meg.
    • body– a kérelem törzsének JSON-ábrázolását adja meg. A JSON a item függvénybe tárolt objektumkonstans átadásával jön létre.
    • headers— megadja a(z) Accept és Content-Type HTTP-kérelemfejléceket. Mindkét fejléc úgy van beállítva, hogy application/json megadja a fogadott és elküldött médiatípust.
  • A rendszer HTTP POST-kérést küld az api/todoitems útvonalra .
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));
}

Amikor a webes API sikeres állapotkódot ad vissza, a getItems függvény a HTML-tábla frissítéséhez lesz meghívva. Ha a webes API-kérés meghiúsul, a rendszer hibát naplóz a böngésző konzoljára.

Teendő frissítése

A to-do elem frissítése hasonló a hozzáadáshoz; azonban két jelentős különbség van:

  • Az útvonal a frissítendő elem egyedi azonosítójával van kiegészítve. Például api/todoitems/1.
  • A HTTP műveleti parancs a PUT, ahogy azt a method beállítás jelzi.
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));

to-do elem törlése

Ha törölni szeretne egy to-do elemet, állítsa be a kérés beállítását methodDELETE , és adja meg az elem egyedi azonosítóját az URL-címben.

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

Lépjen tovább a következő oktatóanyagra, amelyből megtudhatja, hogyan hozhat létre webes API-súgólapokat:

Ismerkedés a Swashbuckle és az ASP.NET Core használatával

  • Last updated on