자습서: JavaScript를 사용하여 ASP.NET Core Web API 호출

아티클
11/06/2024

이 자습서에서는 Fetch API를 사용하여 JavaScript로 ASP.NET Core 웹 API를 호출하는 방법을 보여줍니다.

필수 조건

자습서 완료 : 웹 API 만들기
CSS, HTML, JavaScript에 대한 지식

JavaScript를 사용하여 웹 API 호출

이 섹션에서는 할 일 항목의 생성과 관리를 위한 양식이 포함된 HTML 페이지를 추가하게 됩니다. 이벤트 처리기는 페이지의 요소에 연결됩니다. 이벤트 처리기에 의해 웹 API의 작업 메서드에 대한 HTTP 요청이 발생합니다. Fetch API의 fetch 함수는 각 HTTP 요청을 시작합니다.

fetch 함수는 Promise 개체를 반환하는데, 해당 개체에는 Response 개체로 나타나는 HTTP 응답이 포함됩니다. 일반적인 패턴은 Response 개체에 대해 json 함수를 호출하여 JSON 응답 본문을 추출하는 것입니다. JavaScript는 웹 API 응답의 세부 정보를 토대로 페이지를 업데이트합니다.

가장 간단한 fetch 호출에서는 경로를 나타내는 단일 매개 변수가 허용됩니다. init 개체라고 하는 두 번째 매개 변수는 선택 사항입니다. init은 HTTP 요청 구성에 사용됩니다.

정적 파일을 제공하고 기본 파일 매핑을 사용하도록 앱을 구성합니다. 다음 강조 표시된 코드는 다음에서 필요합니다.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();

프로젝트 루트에서 wwwroot 폴더를 만듭니다.
wwwroot 폴더 안에 css 폴더를 만듭니다.
js wwwroot 폴더 내에 폴더를 만듭니다.

wwwroot 폴더에 명명된 index.html HTML 파일을 추가합니다. index.html의 콘텐츠를 다음 태그로 바꿉니다.

<!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>

wwwroot/css 폴더에 명명된 site.css CSS 파일을 추가합니다 . 내용을 다음 스타일로 바꿉니다 site.css .

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

wwwroot/js폴더에 이름이 지정된 site.js JavaScript 파일을 추가합니다. site.js의 내용을 다음 코드로 바꿉니다.

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

HTML 페이지를 로컬에서 테스트하려면 ASP.NET Core 프로젝트의 시작 설정을 변경해야 할 수 있습니다.

Properties\launchSettings.json을 엽니다.
launchUrl 속성을 제거하여 앱이 index.html 프로젝트의 기본 파일에서 열리도록 합니다.

이 샘플은 웹 API의 CRUD 메서드를 모두 호출합니다. 웹 API 요청에 대한 설명은 다음과 같습니다.

할 일 항목의 목록 가져오기

다음 코드에서 HTTP GET 요청은 api/todoitems 경로로 전송됩니다.

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

웹 API가 성공한 상태 코드를 반환하면 _displayItems 함수가 호출됩니다. _displayItems에서 허용하는 배열 매개 변수의 각 할 일 항목은 편집 및 삭제 단추가 포함된 테이블로 추가됩니다. 웹 API 요청이 실패하는 경우 브라우저의 콘솔에 오류가 기록됩니다.

할 일 항목 추가

다음 코드에서:

item 변수는 할 일 항목의 개체 리터럴 표현을 생성하기 위해 선언됩니다.
Fetch 요청은 다음 옵션으로 구성됩니다.
- method- POST HTTP 작업 동사를 지정합니다.
- body - 요청 본문의 JSON 표현을 지정합니다. JSON은 item에 저장된 개체 리터럴을 JSON.stringify 함수로 전달하여 생성됩니다.
- headers - Accept 및 Content-Type HTTP 요청 헤더를 지정합니다. 두 헤더 모두 application/json으로 설정되어 개별적으로 수신 및 전송되는 미디어 유형을 지정합니다.
HTTP POST 요청은 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));
}

웹 API가 성공적인 상태 코드를 반환하면 getItems 함수가 호출되어 HTML 테이블을 업데이트합니다. 웹 API 요청이 실패하는 경우 브라우저의 콘솔에 오류가 기록됩니다.

할 일 항목 업데이트

할 일 항목 업데이트는 항목 추가와 비슷하지만 크게 두 가지에서 차이를 보입니다.

경로는 업데이트할 항목의 고유 식별자를 접미사로 가집니다. 예를 들면 api/todoitems/1과 같습니다.
HTTP 작업 동사는 method 옵션으로 표시되는 바와 같이 PUT입니다.

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

할 일 항목 삭제

할 일 항목을 삭제하려면 요청의 method 옵션을 DELETE로 설정하고 URL에서 항목의 고유 식별자를 지정합니다.

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

웹 API 도움말 페이지를 생성하는 방법을 알아보려면 다음 자습서로 계속 진행합니다.

Swashbuckle 및 ASP.NET Core 시작

이 자습서에서는 Fetch API를 사용하여 JavaScript로 ASP.NET Core 웹 API를 호출하는 방법을 보여줍니다.

필수 조건

자습서 완료 : 웹 API 만들기
CSS, HTML, JavaScript에 대한 지식

JavaScript를 사용하여 웹 API 호출

정적 파일을 제공하고 기본 파일 매핑을 사용하도록 앱을 구성합니다. 다음의 강조 표시된 코드는 Startup.cs의 Configure 메서드에서 필요합니다.

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

프로젝트 루트에서 wwwroot 폴더를 만듭니다.
wwwroot 폴더 안에 css 폴더를 만듭니다.
js wwwroot 폴더 내에 폴더를 만듭니다.

wwwroot 폴더에 명명된 index.html HTML 파일을 추가합니다. index.html의 콘텐츠를 다음 태그로 바꿉니다.

<!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>

wwwroot/css 폴더에 명명된 site.css CSS 파일을 추가합니다 . 내용을 다음 스타일로 바꿉니다 site.css .

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

wwwroot/js폴더에 이름이 지정된 site.js JavaScript 파일을 추가합니다. site.js의 내용을 다음 코드로 바꿉니다.

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

HTML 페이지를 로컬에서 테스트하려면 ASP.NET Core 프로젝트의 시작 설정을 변경해야 할 수 있습니다.

Properties\launchSettings.json을 엽니다.
launchUrl 속성을 제거하여 앱이 index.html 프로젝트의 기본 파일에서 열리도록 합니다.

이 샘플은 웹 API의 CRUD 메서드를 모두 호출합니다. 웹 API 요청에 대한 설명은 다음과 같습니다.

할 일 항목의 목록 가져오기

다음 코드에서 HTTP GET 요청은 api/todoitems 경로로 전송됩니다.

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

할 일 항목 추가

다음 코드에서:

item 변수는 할 일 항목의 개체 리터럴 표현을 생성하기 위해 선언됩니다.
Fetch 요청은 다음 옵션으로 구성됩니다.
- method- POST HTTP 작업 동사를 지정합니다.
- body - 요청 본문의 JSON 표현을 지정합니다. JSON은 item에 저장된 개체 리터럴을 JSON.stringify 함수로 전달하여 생성됩니다.
- headers - Accept 및 Content-Type HTTP 요청 헤더를 지정합니다. 두 헤더 모두 application/json으로 설정되어 개별적으로 수신 및 전송되는 미디어 유형을 지정합니다.
HTTP POST 요청은 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));
}

할 일 항목 업데이트

할 일 항목 업데이트는 항목 추가와 비슷하지만 크게 두 가지에서 차이를 보입니다.

경로는 업데이트할 항목의 고유 식별자를 접미사로 가집니다. 예를 들면 api/todoitems/1과 같습니다.
HTTP 작업 동사는 method 옵션으로 표시되는 바와 같이 PUT입니다.

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

할 일 항목 삭제

할 일 항목을 삭제하려면 요청의 method 옵션을 DELETE로 설정하고 URL에서 항목의 고유 식별자를 지정합니다.

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

웹 API 도움말 페이지를 생성하는 방법을 알아보려면 다음 자습서로 계속 진행합니다.

Swashbuckle 및 ASP.NET Core 시작

이 자습서에서는 Fetch API를 사용하여 JavaScript로 ASP.NET Core 웹 API를 호출하는 방법을 보여줍니다.

필수 조건

자습서 완료 : 웹 API 만들기
CSS, HTML, JavaScript에 대한 지식

JavaScript를 사용하여 웹 API 호출

정적 파일을 제공하고 기본 파일 매핑을 사용하도록 앱을 구성합니다. 다음 강조 표시된 코드는 다음에서 필요합니다.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();

프로젝트 루트에서 wwwroot 폴더를 만듭니다.
wwwroot 폴더 안에 css 폴더를 만듭니다.
js wwwroot 폴더 내에 폴더를 만듭니다.

wwwroot 폴더에 명명된 index.html HTML 파일을 추가합니다. index.html의 콘텐츠를 다음 태그로 바꿉니다.

<!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>

wwwroot/css 폴더에 명명된 site.css CSS 파일을 추가합니다 . 내용을 다음 스타일로 바꿉니다 site.css .

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

wwwroot/js폴더에 이름이 지정된 site.js JavaScript 파일을 추가합니다. site.js의 내용을 다음 코드로 바꿉니다.

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

HTML 페이지를 로컬에서 테스트하려면 ASP.NET Core 프로젝트의 시작 설정을 변경해야 할 수 있습니다.

Properties\launchSettings.json을 엽니다.
launchUrl 속성을 제거하여 앱이 index.html 프로젝트의 기본 파일에서 열리도록 합니다.

이 샘플은 웹 API의 CRUD 메서드를 모두 호출합니다. 웹 API 요청에 대한 설명은 다음과 같습니다.

할 일 항목의 목록 가져오기

다음 코드에서 HTTP GET 요청은 api/todoitems 경로로 전송됩니다.

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

할 일 항목 추가

다음 코드에서:

item 변수는 할 일 항목의 개체 리터럴 표현을 생성하기 위해 선언됩니다.
Fetch 요청은 다음 옵션으로 구성됩니다.
- method- POST HTTP 작업 동사를 지정합니다.
- body - 요청 본문의 JSON 표현을 지정합니다. JSON은 item에 저장된 개체 리터럴을 JSON.stringify 함수로 전달하여 생성됩니다.
- headers - Accept 및 Content-Type HTTP 요청 헤더를 지정합니다. 두 헤더 모두 application/json으로 설정되어 개별적으로 수신 및 전송되는 미디어 유형을 지정합니다.
HTTP POST 요청은 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));
}

할 일 항목 업데이트

할 일 항목 업데이트는 항목 추가와 비슷하지만 크게 두 가지에서 차이를 보입니다.

경로는 업데이트할 항목의 고유 식별자를 접미사로 가집니다. 예를 들면 api/todoitems/1과 같습니다.
HTTP 작업 동사는 method 옵션으로 표시되는 바와 같이 PUT입니다.

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

할 일 항목 삭제

할 일 항목을 삭제하려면 요청의 method 옵션을 DELETE로 설정하고 URL에서 항목의 고유 식별자를 지정합니다.

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

웹 API 도움말 페이지를 생성하는 방법을 알아보려면 다음 자습서로 계속 진행합니다.

Swashbuckle 및 ASP.NET Core 시작

다음을 통해 공유

자습서: JavaScript를 사용하여 ASP.NET Core Web API 호출

필수 조건

JavaScript를 사용하여 웹 API 호출

할 일 항목의 목록 가져오기

할 일 항목 추가

할 일 항목 업데이트

할 일 항목 삭제

필수 조건

JavaScript를 사용하여 웹 API 호출

할 일 항목의 목록 가져오기

할 일 항목 추가

할 일 항목 업데이트

할 일 항목 삭제

필수 조건

JavaScript를 사용하여 웹 API 호출

할 일 항목의 목록 가져오기

할 일 항목 추가

할 일 항목 업데이트

할 일 항목 삭제

추가 리소스