Partage via

Tutoriel : Appeler une API web ASP.NET Core avec JavaScript

Par Rick Anderson

Ce tutoriel montre comment appeler une API web ASP.NET Core avec JavaScript à l’aide de l’API Fetch.

Prérequis

Appelez l’API web avec JavaScript

Dans cette section, vous allez ajouter une page HTML contenant des formulaires permettant de créer et de gérer des éléments de tâche. Des gestionnaires d’événements sont joints aux éléments de la page. Les gestionnaires d’événements génèrent des requêtes HTTP pour les méthodes d’action de l’API web. La fonction fetch de l’API Fetch lance chaque requête HTTP.

La fonction fetch retourne un objet Promise qui contient une réponse HTTP représentée sous la forme d’un objet Response. Un modèle courant consiste à extraire le corps de réponse JSON en appelant la fonction json sur l'objet Response. JavaScript met à jour la page avec les détails de la réponse de l’API Web.

L'appel fetch le plus simple accepte un seul paramètre représentant l’itinéraire. Un deuxième paramètre, connu sous le nom d’objet init, est facultatif. init est utilisé pour configurer la requête HTTP.

  1. Configurez l’application pour traiter les fichiers statiques et activer le mappage du fichier par défaut. Le code mis en surbrillance ci-dessous est nécessaire dans 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. Créez un dossier wwwroot dans le répertoire du projet.

  2. Créez un dossier css à l’intérieur du dossier wwwroot.

  3. Créez un dossier js à l’intérieur du dossier wwwroot.

  4. Ajoutez un fichier HTML nommé index.html au dossier wwwroot. Remplacez le contenu de index.html par le balisage suivant :

    <!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. Ajoutez un fichier CSS nommé site.css au dossier wwwroot/css. Remplacez le contenu de site.css par les styles suivants :

    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. Ajoutez un fichier JavaScript nommé site.js au dossier wwwroot/js. Remplacez le contenu de site.js par le code suivant :

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

Vous devrez peut-être changer les paramètres de lancement du projet ASP.NET Core pour tester la page HTML localement :

  1. Ouvrez Properties\launchSettings.json.
  2. Supprimez la propriété launchUrl pour forcer l’ouverture de l’application au niveau de index.html (fichier par défaut du projet).

Cet exemple appelle toutes les méthodes CRUD de l’API web. Les explications suivantes traitent des demandes de l’API web.

Obtenir une liste de tâches

Dans le code suivant, une requête HTTP GET est envoyée à la route api/todoitems :

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

Quand l’API web retourne un code d’état de réussite, la fonction _displayItems est appelée. Chaque élément de tâche du paramètre de tableau accepté par _displayItems est ajouté à une table avec les boutons Modifier et Supprimer. Si la demande de l’API Web échoue, une erreur est consignée dans la console du navigateur.

Ajouter une tâche

Dans le code suivant :

  • Une variable item est déclarée pour construire une représentation littérale d’objet de l’élément de tâche.
  • Une requête Fetch est configurée avec les options suivantes :
    • method – spécifie le verbe d’action POST HTTP.
    • body – spécifie la représentation JSON du corps de la demande. Le JSON est généré en passant le littéral d’objet stocké dans item à la fonction JSON. stringify.
    • headers – spécifie les en-têtes de requête HTTP Accept et Content-Type. Les deux en-têtes sont définies sur application/json pour spécifier le type de média respectivement reçu et envoyé.
  • Une requête HTTP POST est envoyée à la route 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));
}

Quand l’API web retourne un code d’état de réussite, la fonction getItems est appelée pour mettre à jour la table HTML. Si la demande de l’API Web échoue, une erreur est consignée dans la console du navigateur.

Mettre à jour une tâche

La mise à jour d’un élément de tâche est semblable à l’ajout d’un élément. Toutefois, il y a deux différences importantes :

  • L’itinéraire est suivi de l’identificateur unique de l’élément à mettre à jour. Par exemple, api/todoitems/1.
  • Le verbe d’action HTTP est PUT, comme indiqué par l’option 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));

Supprimer une tâche

Pour supprimer un élément de tâche, définissez l’option de la demande method sur DELETE et spécifiez l’identificateur unique de l’élément dans l’URL.

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

Passez au tutoriel suivant pour apprendre à générer des pages d’aide d’API web :

Bien démarrer avec Swashbuckle et ASP.NET Core

Ce tutoriel montre comment appeler une API web ASP.NET Core avec JavaScript à l’aide de l’API Fetch.

Prérequis

Appelez l’API web avec JavaScript

Dans cette section, vous allez ajouter une page HTML contenant des formulaires permettant de créer et de gérer des éléments de tâche. Des gestionnaires d’événements sont joints aux éléments de la page. Les gestionnaires d’événements génèrent des requêtes HTTP pour les méthodes d’action de l’API web. La fonction fetch de l’API Fetch lance chaque requête HTTP.

La fonction fetch retourne un objet Promise qui contient une réponse HTTP représentée sous la forme d’un objet Response. Un modèle courant consiste à extraire le corps de réponse JSON en appelant la fonction json sur l'objet Response. JavaScript met à jour la page avec les détails de la réponse de l’API Web.

L'appel fetch le plus simple accepte un seul paramètre représentant l’itinéraire. Un deuxième paramètre, connu sous le nom d’objet init, est facultatif. init est utilisé pour configurer la requête HTTP.

  1. Configurez l’application pour traiter les fichiers statiques et activer le mappage du fichier par défaut. Le code en surbrillance suivant est nécessaire dans la méthode Configure de 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. Créez un dossier wwwroot dans le répertoire du projet.

  3. Créez un dossier css à l’intérieur du dossier wwwroot.

  4. Créez un dossier js à l’intérieur du dossier wwwroot.

  5. Ajoutez un fichier HTML nommé index.html au dossier wwwroot. Remplacez le contenu de index.html par le balisage suivant :

    <!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. Ajoutez un fichier CSS nommé site.css au dossier wwwroot/css. Remplacez le contenu de site.css par les styles suivants :

    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. Ajoutez un fichier JavaScript nommé site.js au dossier wwwroot/js. Remplacez le contenu de site.js par le code suivant :

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

Vous devrez peut-être changer les paramètres de lancement du projet ASP.NET Core pour tester la page HTML localement :

  1. Ouvrez Properties\launchSettings.json.
  2. Supprimez la propriété launchUrl pour forcer l’ouverture de l’application au niveau de index.html (fichier par défaut du projet).

Cet exemple appelle toutes les méthodes CRUD de l’API web. Les explications suivantes traitent des demandes de l’API web.

Obtenir une liste de tâches

Dans le code suivant, une requête HTTP GET est envoyée à la route api/todoitems :

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

Quand l’API web retourne un code d’état de réussite, la fonction _displayItems est appelée. Chaque élément de tâche du paramètre de tableau accepté par _displayItems est ajouté à une table avec les boutons Modifier et Supprimer. Si la demande de l’API Web échoue, une erreur est consignée dans la console du navigateur.

Ajouter une tâche

Dans le code suivant :

  • Une variable item est déclarée pour construire une représentation littérale d’objet de l’élément de tâche.
  • Une requête Fetch est configurée avec les options suivantes :
    • method – spécifie le verbe d’action POST HTTP.
    • body – spécifie la représentation JSON du corps de la demande. Le JSON est généré en passant le littéral d’objet stocké dans item à la fonction JSON. stringify.
    • headers – spécifie les en-têtes de requête HTTP Accept et Content-Type. Les deux en-têtes sont définies sur application/json pour spécifier le type de média respectivement reçu et envoyé.
  • Une requête HTTP POST est envoyée à la route 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));
}

Quand l’API web retourne un code d’état de réussite, la fonction getItems est appelée pour mettre à jour la table HTML. Si la demande de l’API Web échoue, une erreur est consignée dans la console du navigateur.

Mettre à jour une tâche

La mise à jour d’un élément de tâche est semblable à l’ajout d’un élément. Toutefois, il y a deux différences importantes :

  • L’itinéraire est suivi de l’identificateur unique de l’élément à mettre à jour. Par exemple, api/todoitems/1.
  • Le verbe d’action HTTP est PUT, comme indiqué par l’option 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));

Supprimer une tâche

Pour supprimer un élément de tâche, définissez l’option de la demande method sur DELETE et spécifiez l’identificateur unique de l’élément dans l’URL.

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

Passez au tutoriel suivant pour apprendre à générer des pages d’aide d’API web :

Bien démarrer avec Swashbuckle et ASP.NET Core

Ce tutoriel montre comment appeler une API web ASP.NET Core avec JavaScript à l’aide de l’API Fetch.

Prérequis

Appelez l’API web avec JavaScript

Dans cette section, vous allez ajouter une page HTML contenant des formulaires permettant de créer et de gérer des éléments de tâche. Des gestionnaires d’événements sont joints aux éléments de la page. Les gestionnaires d’événements génèrent des requêtes HTTP pour les méthodes d’action de l’API web. La fonction fetch de l’API Fetch lance chaque requête HTTP.

La fonction fetch retourne un objet Promise qui contient une réponse HTTP représentée sous la forme d’un objet Response. Un modèle courant consiste à extraire le corps de réponse JSON en appelant la fonction json sur l'objet Response. JavaScript met à jour la page avec les détails de la réponse de l’API Web.

L'appel fetch le plus simple accepte un seul paramètre représentant l’itinéraire. Un deuxième paramètre, connu sous le nom d’objet init, est facultatif. init est utilisé pour configurer la requête HTTP.

  1. Configurez l’application pour traiter les fichiers statiques et activer le mappage du fichier par défaut. Le code mis en surbrillance ci-dessous est nécessaire dans 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. Créez un dossier wwwroot dans le répertoire du projet.

  2. Créez un dossier css à l’intérieur du dossier wwwroot.

  3. Créez un dossier js à l’intérieur du dossier wwwroot.

  4. Ajoutez un fichier HTML nommé index.html au dossier wwwroot. Remplacez le contenu de index.html par le balisage suivant :

    <!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. Ajoutez un fichier CSS nommé site.css au dossier wwwroot/css. Remplacez le contenu de site.css par les styles suivants :

    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. Ajoutez un fichier JavaScript nommé site.js au dossier wwwroot/js. Remplacez le contenu de site.js par le code suivant :

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

Vous devrez peut-être changer les paramètres de lancement du projet ASP.NET Core pour tester la page HTML localement :

  1. Ouvrez Properties\launchSettings.json.
  2. Supprimez la propriété launchUrl pour forcer l’ouverture de l’application au niveau de index.html (fichier par défaut du projet).

Cet exemple appelle toutes les méthodes CRUD de l’API web. Les explications suivantes traitent des demandes de l’API web.

Obtenir une liste de tâches

Dans le code suivant, une requête HTTP GET est envoyée à la route api/todoitems :

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

Quand l’API web retourne un code d’état de réussite, la fonction _displayItems est appelée. Chaque élément de tâche du paramètre de tableau accepté par _displayItems est ajouté à une table avec les boutons Modifier et Supprimer. Si la demande de l’API Web échoue, une erreur est consignée dans la console du navigateur.

Ajouter une tâche

Dans le code suivant :

  • Une variable item est déclarée pour construire une représentation littérale d’objet de l’élément de tâche.
  • Une requête Fetch est configurée avec les options suivantes :
    • method – spécifie le verbe d’action POST HTTP.
    • body – spécifie la représentation JSON du corps de la demande. Le JSON est généré en passant le littéral d’objet stocké dans item à la fonction JSON. stringify.
    • headers – spécifie les en-têtes de requête HTTP Accept et Content-Type. Les deux en-têtes sont définies sur application/json pour spécifier le type de média respectivement reçu et envoyé.
  • Une requête HTTP POST est envoyée à la route 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));
}

Quand l’API web retourne un code d’état de réussite, la fonction getItems est appelée pour mettre à jour la table HTML. Si la demande de l’API Web échoue, une erreur est consignée dans la console du navigateur.

Mettre à jour une tâche

La mise à jour d’un élément de tâche est semblable à l’ajout d’un élément. Toutefois, il y a deux différences importantes :

  • L’itinéraire est suivi de l’identificateur unique de l’élément à mettre à jour. Par exemple, api/todoitems/1.
  • Le verbe d’action HTTP est PUT, comme indiqué par l’option 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));

Supprimer une tâche

Pour supprimer un élément de tâche, définissez l’option de la demande method sur DELETE et spécifiez l’identificateur unique de l’élément dans l’URL.

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

Passez au tutoriel suivant pour apprendre à générer des pages d’aide d’API web :

Bien démarrer avec Swashbuckle et ASP.NET Core

  • Last updated on