ASP.NET Core と Visual Studio Code で Web API を作成するCreate a Web API with ASP.NET Core and Visual Studio Code

作成者: Rick AndersonMike WassonBy Rick Anderson and Mike Wasson

このチュートリアルでは、"to-do" 項目の一覧を管理する Web API を構築します。In this tutorial, build a web API for managing a list of "to-do" items. UI が構成されていません。A UI isn't constructed.

このチュートリアルには 3 つのバージョンがあります。There are three versions of this tutorial:

概要Overview

このチュートリアルでは、次の API を作成します。This tutorial creates the following API:

APIAPI 説明Description 要求本文Request body 応答本文Response body
GET /api/todoGET /api/todo すべての To Do アイテムを取得します。Get all to-do items なしNone To Do アイテムの配列Array of to-do items
GET /api/todo/{id}GET /api/todo/{id} ID でアイテムを取得します。Get an item by ID なしNone To Do アイテムTo-do item
POST /api/todoPOST /api/todo 新しいアイテムを追加します。Add a new item To Do アイテムTo-do item To Do アイテムTo-do item
PUT /api/todo/{id}PUT /api/todo/{id} 既存のアイテムを更新します。 Update an existing item   To Do アイテムTo-do item なしNone
DELETE /api/todo/{id}    DELETE /api/todo/{id}     アイテムを削除します    Delete an item     なしNone なしNone

次の図は、アプリの基本デザインを示しています。The following diagram shows the basic design of the app.

クライアントは左側のボックスで表され、要求を送信し、アプリケーション (右側に描画されたボックス) から応答を受信します。

  • クライアントとは、Web API を使用するもの (モバイル アプリやブラウザーなど) です。The client is whatever consumes the web API (mobile app, browser, etc.). このチュートリアルでは、クライアントは作成しません。This tutorial doesn't create a client. アプリのテストでは、Postman または curl をクライアントとして使用します。Postman or curl is used as the client to test the app.

  • モデルは、アプリのデータを表すオブジェクトです。A model is an object that represents the data in the app. ここでは、唯一のモデルが to-do 項目です。In this case, the only model is a to-do item. モデルは C# クラスで表され、POCO (Plain Old CLR Object。つまり、単純な従来の CLR オブジェクト) とも呼ばれます。Models are represented as C# classes, also known as Plain Old CLR Object (POCOs).

  • コントローラーは、HTTP 要求を処理し、HTTP 応答を作成するオブジェクトです。A controller is an object that handles HTTP requests and creates the HTTP response. このアプリのコントローラーは 1 つです。This app has a single controller.

  • このチュートリアルを簡潔にするために、アプリでは永続的なデータベースを使用しません。To keep the tutorial simple, the app doesn't use a persistent database. サンプル アプリでは、メモリ内データベースに To Do アイテムを格納します。The sample app stores to-do items in an in-memory database.

必須コンポーネントPrerequisites

以下をインストールします。Install the following:

プロジェクトの作成Create the project

コンソールから、次のコマンドを実行します。From a console, run the following commands:

dotnet new webapi -o TodoApi
code TodoApi

Visual Studio Code (VS Code) で TodoApi フォルダーが開きます。The TodoApi folder opens in Visual Studio Code (VS Code). Startup.cs ファイルを選択します。Select the Startup.cs file.

  • "'TodoApi' に作成とデバッグに必要な資産がありません。追加しますか?" という内容の警告メッセージが表示されたら、[はい]Select Yes to the Warn message "Required assets to build and debug are missing from 'TodoApi'. 選択します。Add them?"
  • [There are unresolved dependencies]/(未解決の依存関係があります/) という内容の情報メッセージが表示されたら、[復元] を選択します。Select Restore to the Info message "There are unresolved dependencies".

'TodoApi' に作成とデバッグに必要な資産がありません。

[デバッグ] (F5) を押してプログラムをビルドし、実行します。Press Debug (F5) to build and run the program. ブラウザーで、http://localhost:5000/api/values に移動します。In a browser, navigate to http://localhost:5000/api/values. 次のような出力が表示されます。The following output is displayed:

["value1","value2"]

VS Code の使用に関するヒントが必要であれば、「Visual Studio Code ヘルプ」を参照してください。See Visual Studio Code help for tips on using VS Code.

Entity Framework Core のサポートの追加Add support for Entity Framework Core

ASP.NET Core 2.1 以降で新しいプロジェクトを作成すると、TodoApi.csproj ファイルに Microsoft.AspNetCore.App パッケージ参照が追加されます。Creating a new project in ASP.NET Core 2.1 or later adds the Microsoft.AspNetCore.App package reference to the TodoApi.csproj file. まだ指定されていない場合は、Version 属性を追加します。Add the Version attribute, if not already specified.

<ItemGroup>
  <PackageReference Include="Microsoft.AspNetCore.App" />
</ItemGroup>

ASP.NET Core 2.0 で新しいプロジェクトを作成すると、TodoApi.csproj ファイルに Microsoft.AspNetCore.All プロバイダーが追加されます。Creating a new project in ASP.NET Core 2.0 adds the Microsoft.AspNetCore.All package reference to the TodoApi.csproj file:

<ItemGroup>
  <PackageReference Include="Microsoft.AspNetCore.All" Version="2.1.4" />
</ItemGroup>

Entity Framework Core InMemory データベース プロバイダーを個別にインストールする必要はありません。There's no need to install the Entity Framework Core InMemory database provider separately. このデータベース プロバイダーにより、メモリ内のデータベースで Entity Framework Core を使用することが許可されます。This database provider allows Entity Framework Core to be used with an in-memory database.

モデル クラスの追加Add a model class

モデルは、アプリのデータを表すオブジェクトです。A model is an object representing the data in your app. ここでは、唯一のモデルが to-do 項目です。In this case, the only model is a to-do item.

Models という名前のフォルダーを追加します。Add a folder named Models. モデル クラスはプロジェクト内のどこでも配置できますが、慣習で Models フォルダーが利用されます。You can put model classes anywhere in your project, but the Models folder is used by convention.

次のコードで TodoItem クラスを追加します。Add a TodoItem class with the following code:

namespace TodoApi.Models
{
    public class TodoItem
    {
        public long Id { get; set; }
        public string Name { get; set; }
        public bool IsComplete { get; set; }
    }
}

TodoItem が作成されるとき、データベースは Id を生成します。The database generates the Id when a TodoItem is created.

データベース コンテキストの作成Create the database context

データベース コンテキストは、所与のデータ モデルに対し、Entity Framework 機能を調整するメイン クラスです。The database context is the main class that coordinates Entity Framework functionality for a given data model. このクラスは、Microsoft.EntityFrameworkCore.DbContext クラスから派生させて作成します。You create this class by deriving from the Microsoft.EntityFrameworkCore.DbContext class.

Models フォルダーに TodoContext クラスを追加します。Add a TodoContext class in the Models folder:

using Microsoft.EntityFrameworkCore;

namespace TodoApi.Models
{
    public class TodoContext : DbContext
    {
        public TodoContext(DbContextOptions<TodoContext> options)
            : base(options)
        {
        }

        public DbSet<TodoItem> TodoItems { get; set; }
    }
}

データベース コンテキストの登録Register the database context

この手順では、依存性の注入コンテナーにデータベース コンテキストを登録します。In this step, the database context is registered with the dependency injection container. サービス (DB コンテキストなど) を依存性の注入 (DI) コンテナーに登録すると、コントローラーで使用できるようになります。Services (such as the DB context) that are registered with the dependency injection (DI) container are available to the controllers.

DB コンテキストをサービス コンテナーに登録するには、依存性の注入の組み込みサポートを使用します。Register the DB context with the service container using the built-in support for dependency injection. Startup.cs ファイルの内容を次のコードに置き換えます。Replace the contents of the Startup.cs file with the following code:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using TodoApi.Models;

namespace TodoApi
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<TodoContext>(opt => 
                opt.UseInMemoryDatabase("TodoList"));
            services.AddMvc()
                    .SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
        }

        public void Configure(IApplicationBuilder app)
        {
            app.UseMvc();
        }
    }
}
using Microsoft.AspNetCore.Builder;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using TodoApi.Models;

namespace TodoApi
{
    public class Startup
    {       
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<TodoContext>(opt => 
                opt.UseInMemoryDatabase("TodoList"));
            services.AddMvc();
        }

        public void Configure(IApplicationBuilder app)
        {
            app.UseMvc();
        }
    }
}

上のコードでは以下の操作が行われます。The preceding code:

  • 未使用のコードを削除します。Removes the unused code.
  • メモリ内データベースがサービス コンテナーに挿入されるように指定します。Specifies an in-memory database is injected into the service container.

コントローラーの追加Add a controller

Controllers フォルダーで、「TodoController」という名前のクラスを作成します。In the Controllers folder, create a class named TodoController. その内容を次のコードに置き換えます。Replace its contents with the following code:

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Linq;
using TodoApi.Models;

namespace TodoApi.Controllers
{
    [Route("api/[controller]")]
    public class TodoController : ControllerBase
    {
        private readonly TodoContext _context;

        public TodoController(TodoContext context)
        {
            _context = context;

            if (_context.TodoItems.Count() == 0)
            {
                _context.TodoItems.Add(new TodoItem { Name = "Item1" });
                _context.SaveChanges();
            }
        }       
    }
}

上記のコードでは、メソッドを使用せず、API コントローラー クラスを定義します。The preceding code defines an API controller class without methods. 次のセクションでは、API を実装するメソッドを追加します。In the next sections, methods are added to implement the API.

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Linq;
using TodoApi.Models;

namespace TodoApi.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class TodoController : ControllerBase
    {
        private readonly TodoContext _context;

        public TodoController(TodoContext context)
        {
            _context = context;

            if (_context.TodoItems.Count() == 0)
            {
                // Create a new TodoItem if collection is empty,
                // which means you can't delete all TodoItems.
                _context.TodoItems.Add(new TodoItem { Name = "Item1" });
                _context.SaveChanges();
            }
        }
    }
}

上のコードでは以下の操作が行われます。The preceding code:

  • メソッドを使用せず、API コントローラー クラスを定義します。Defines an API controller class without methods.
  • TodoItems が空の場合は、新しい Todo アイテムを作成します。Creates a new Todo item when TodoItems is empty. TodoItems が空の場合はコンストラクターが新しいアイテムを作成するため、すべての Todo アイテムを削除することはできません。You won't be able to delete all the Todo items because the constructor creates a new one if TodoItems is empty.

次のセクションでは、API を実装するメソッドを追加します。In the next sections, methods are added to implement the API. いくつかの便利な機能を有効にするには、[ApiController] 属性でクラスに注釈を付けます。The class is annotated with an [ApiController] attribute to enable some convenient features. 属性によって有効にする機能の詳細については、「ApiControllerAttribute でクラスに注釈を付ける」を参照してください。For information on features enabled by the attribute, see Annotate class with ApiControllerAttribute.

コントローラーのコンストラクターでは、依存性の挿入を使ってデータベース コンテキスト (TodoContext) がコントローラーに挿入されています。The controller's constructor uses Dependency Injection to inject the database context (TodoContext) into the controller. データベース コンテキストは、コントローラーの各 CRUD メソッドで使用されます。The database context is used in each of the CRUD methods in the controller. アイテムが存在しない場合は、コンストラクターがメモリ内データベースにアイテムを追加します。The constructor adds an item to the in-memory database if one doesn't exist.

To Do アイテムの取得Get to-do items

To Do アイテムを取得するには、TodoController クラスに次のメソッドを追加します。To get to-do items, add the following methods to the TodoController class:

[HttpGet]
public List<TodoItem> GetAll()
{
    return _context.TodoItems.ToList();
}

[HttpGet("{id}", Name = "GetTodo")]
public IActionResult GetById(long id)
{
    var item = _context.TodoItems.Find(id);
    if (item == null)
    {
        return NotFound();
    }
    return Ok(item);
}
[HttpGet]
public ActionResult<List<TodoItem>> GetAll()
{
    return _context.TodoItems.ToList();
}

[HttpGet("{id}", Name = "GetTodo")]
public ActionResult<TodoItem> GetById(long id)
{
    var item = _context.TodoItems.Find(id);
    if (item == null)
    {
        return NotFound();
    }
    return item;
}

これらのメソッドでは、以下の 2 つの GET メソッドを実装します。These methods implement the two GET methods:

  • GET /api/todo
  • GET /api/todo/{id}

GetAll メソッドの HTTP 応答例を以下に示します。Here's a sample HTTP response for the GetAll method:

[
  {
    "id": 1,
    "name": "Item1",
    "isComplete": false
  }
]

Postman または curl を使用して HTTP 応答を表示する方法については、後で説明します。Later in the tutorial, I'll show how the HTTP response can be viewed with Postman or curl.

ルーティングと URL パスRouting and URL paths

[HttpGet] 属性は、HTTP GET 要求に応答するメソッドを表します。The [HttpGet] attribute denotes a method that responds to an HTTP GET request. 各メソッドの URL パスは次のように構成されます。The URL path for each method is constructed as follows:

  • コントローラーの Route 属性でテンプレート文字列を使用します。Take the template string in the controller's Route attribute:
namespace TodoApi.Controllers
{
    [Route("api/[controller]")]
    public class TodoController : ControllerBase
    {
        private readonly TodoContext _context;
namespace TodoApi.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class TodoController : ControllerBase
    {
        private readonly TodoContext _context;
  • [controller] をコントローラーの名前 ("Controller" サフィックスを除くコントローラー クラス名) に置き換えます。Replace [controller] with the name of the controller, which is the controller class name minus the "Controller" suffix. このサンプルでは、コントローラー クラス名は TodoController で、ルート名は "todo" です。For this sample, the controller class name is TodoController and the root name is "todo". ASP.NET Core のルーティングでは、大文字と小文字が区別されません。ASP.NET Core routing is case insensitive.
  • [HttpGet] 属性にルート テンプレート ([HttpGet("/products")] など) がある場合は、それをパスに追加します。If the [HttpGet] attribute has a route template (such as [HttpGet("/products")], append that to the path. このサンプルではテンプレートを使用しません。This sample doesn't use a template. 詳細については、「Http[Verb] 属性を使用する属性ルーティング」を参照してください。For more information, see Attribute routing with Http[Verb] attributes.

次の GetById メソッドで、"{id}" は To Do アイテムの一意識別子に使用するプレースホルダーの変数です。In the following GetById method, "{id}" is a placeholder variable for the unique identifier of the to-do item. GetById が呼び出されると、メソッドの id パラメーターに URL の "{id}" の値が割り当てられます。When GetById is invoked, it assigns the value of "{id}" in the URL to the method's id parameter.

[HttpGet("{id}", Name = "GetTodo")]
public IActionResult GetById(long id)
{
    var item = _context.TodoItems.Find(id);
    if (item == null)
    {
        return NotFound();
    }
    return Ok(item);
}
[HttpGet("{id}", Name = "GetTodo")]
public ActionResult<TodoItem> GetById(long id)
{
    var item = _context.TodoItems.Find(id);
    if (item == null)
    {
        return NotFound();
    }
    return item;
}

Name = "GetTodo" により名前付きのルートを作成します。Name = "GetTodo" creates a named route. 名前付きのルートの役割は次のとおりです。Named routes:

  • アプリで、ルート名を使用して HTTP リンクを作成できるようにします。Enable the app to create an HTTP link using the route name.
  • 説明は後ほど行います。Are explained later in the tutorial.

戻り値Return values

GetAll メソッドは、TodoItem オブジェクトのコレクションを返します。The GetAll method returns a collection of TodoItem objects. MVC は自動的にオブジェクトを JSON にシリアル化して、応答メッセージの本文に JSON を書き込みます。MVC automatically serializes the object to JSON and writes the JSON into the body of the response message. このメソッドの応答コードは 200 で、ハンドルされない例外がないものと想定します The response code for this method is 200, assuming there are no unhandled exceptions. ハンドルされない例外は 5xx エラーに変換されます。Unhandled exceptions are translated into 5xx errors.

これに対し、GetById メソッドは、広範囲の戻り値の型を表す、より一般的な IActionResult type 型を返します。In contrast, the GetById method returns the more general IActionResult type, which represents a wide range of return types. GetById には、次の 2 つの異なる戻り値の型があります。GetById has two different return types:

  • 要求された ID と一致するアイテムがない場合、メソッドは 404 エラーを返します。If no item matches the requested ID, the method returns a 404 error. 戻り値が NotFound の場合、HTTP 404 応答が返されます。Returning NotFound returns an HTTP 404 response.
  • それ以外の場合、メソッドは JSON 応答本文で 200 を返します。Otherwise, the method returns 200 with a JSON response body. 戻り値が Ok の場合、HTTP 200 応答が返されます。Returning Ok results in an HTTP 200 response.

これに対し、GetById メソッドは、広範囲の戻り値の型を表す、ActionResult<T> 型を返します。In contrast, the GetById method returns the ActionResult<T> type, which represents a wide range of return types. GetById には、次の 2 つの異なる戻り値の型があります。GetById has two different return types:

  • 要求された ID と一致するアイテムがない場合、メソッドは 404 エラーを返します。If no item matches the requested ID, the method returns a 404 error. 戻り値が NotFound の場合、HTTP 404 応答が返されます。Returning NotFound returns an HTTP 404 response.
  • それ以外の場合、メソッドは JSON 応答本文で 200 を返します。Otherwise, the method returns 200 with a JSON response body. 戻り値が item の場合、HTTP 200 応答が返されます。Returning item results in an HTTP 200 response.

アプリの起動Launch the app

VS Code で、F5 を押してアプリを起動します。In VS Code, press F5 to launch the app. http://localhost:5000/api/todo (作成した Todo コントローラー) に移動します。Navigate to http://localhost:5000/api/todo (the Todo controller we created).

jQuery での Web API の呼び出しCall the Web API with jQuery

このセクションでは、jQuery を使用して Web API を呼び出す、HTML ページが追加されます。In this section, an HTML page is added that uses jQuery to call the Web API. jQuery で要求を開始し、API の応答からの詳細を含むページを更新します。jQuery initiates the request and updates the page with the details from the API's response.

静的ファイルを提供し、既定のファイル マッピングを有効にするようにプロジェクトを構成します。Configure the project to serve static files and to enable default file mapping. これには、Startup.ConfigureUseStaticFilesUseDefaultFiles 拡張メソッドを呼び出します。This is accomplished by invoking the UseStaticFiles and UseDefaultFiles extension methods in Startup.Configure. 詳しくは、静的ファイルに関するページをご覧ください。For more information, see Static files.

public void Configure(IApplicationBuilder app)
{
    app.UseDefaultFiles();
    app.UseStaticFiles();
    app.UseMvc();
}

index.html という名前の HTML ファイルをプロジェクトの wwwroot ディレクトリに追加します。Add an HTML file, named index.html, to the project's wwwroot directory. その内容を次のマークアップに置き換えます。Replace its contents with the following markup:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>To-do CRUD</title>
    <style>
        input[type='submit'], button, [aria-label] {
            cursor: pointer;
        }

        #spoiler {
            display: none;
        }

        table {
            font-family: Arial, sans-serif;
            border: 1px solid;
            border-collapse: collapse;
        }

        th {
            background-color: #0066CC;
            color: white;
        }

        td {
            border: 1px solid;
            padding: 5px;
        }
    </style>
</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="spoiler">
        <h3>Edit</h3>
        <form class="my-form">
            <input type="hidden" id="edit-id">
            <input type="checkbox" id="edit-isComplete">
            <input type="text" id="edit-name">
            <input type="submit" value="Edit">
            <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="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
    <script src="site.js"></script>
</body>
</html>

site.js という名前の JavaScript ファイルをプロジェクトの wwwroot ディレクトリに追加します。Add a JavaScript file, named site.js, to the project's wwwroot directory. その内容を次のコードに置き換えます。Replace its contents with the following code:

const uri = 'api/todo';
let todos = null;
function getCount(data) {
    const el = $('#counter');
    let name = 'to-do';
    if (data) {
        if (data > 1) {
            name = 'to-dos';
        }
        el.text(data + ' ' + name);
    } else {
        el.html('No ' + name);
    }
}

$(document).ready(function () {
    getData();
});

function getData() {
    $.ajax({
        type: 'GET',
        url: uri,
        success: function (data) {
            $('#todos').empty();
            getCount(data.length);
            $.each(data, function (key, item) {
                const checked = item.isComplete ? 'checked' : '';

                $('<tr><td><input disabled="true" type="checkbox" ' + checked + '></td>' +
                    '<td>' + item.name + '</td>' +
                    '<td><button onclick="editItem(' + item.id + ')">Edit</button></td>' +
                    '<td><button onclick="deleteItem(' + item.id + ')">Delete</button></td>' +
                    '</tr>').appendTo($('#todos'));
            });

            todos = data;
        }
    });
}

function addItem() {
    const item = {
        'name': $('#add-name').val(),
        'isComplete': false
    };

    $.ajax({
        type: 'POST',
        accepts: 'application/json',
        url: uri,
        contentType: 'application/json',
        data: JSON.stringify(item),
        error: function (jqXHR, textStatus, errorThrown) {
            alert('here');
        },
        success: function (result) {
            getData();
            $('#add-name').val('');
        }
    });
}

function deleteItem(id) {
    $.ajax({
        url: uri + '/' + id,
        type: 'DELETE',
        success: function (result) {
            getData();
        }
    });
}

function editItem(id) {
    $.each(todos, function (key, item) {
        if (item.id === id) {
            $('#edit-name').val(item.name);
            $('#edit-id').val(item.id);
            $('#edit-isComplete')[0].checked = item.isComplete;
        }
    });
    $('#spoiler').css({ 'display': 'block' });
}

$('.my-form').on('submit', function () {
    const item = {
        'name': $('#edit-name').val(),
        'isComplete': $('#edit-isComplete').is(':checked'),
        'id': $('#edit-id').val()
    };

    $.ajax({
        url: uri + '/' + $('#edit-id').val(),
        type: 'PUT',
        accepts: 'application/json',
        contentType: 'application/json',
        data: JSON.stringify(item),
        success: function (result) {
            getData();
        }
    });

    closeInput();
    return false;
});

function closeInput() {
    $('#spoiler').css({ 'display': 'none' });
}

ローカルで HTML ページをテストするために、ASP.NET Core プロジェクトの起動設定への変更が要求される場合があります。A change to the ASP.NET Core project's launch settings may be required to test the HTML page locally. プロジェクトの Properties ディレクトリの launchSettings.json を開きます。Open launchSettings.json in the Properties directory of the project. アプリが強制的に index.html—プロジェクトの既定ファイルで開くようにするには、launchUrl プロパティを削除します。Remove the launchUrl property to force the app to open at index.html—the project's default file.

jQuery を取得するには、いくつかの方法があります。There are several ways to get jQuery. 前のスニペットでは、ライブラリは CDN から読み込まれます。In the preceding snippet, the library is loaded from a CDN. このサンプルは、jQuery で API を呼び出す完全な CRUD の例です。This sample is a complete CRUD example of calling the API with jQuery. 豊富な体験ができるように、このサンプルには追加の機能が用意されています。There are additional features in this sample to make the experience richer. API の呼び出しを中心にした説明を次に示します。Below are explanations around the calls to the API.

To Do アイテムのリストの取得Get a list of to-do items

To Do アイテムのリストを取得するには、HTTP GET 要求を /api/todo に送信します。To get a list of to-do items, send an HTTP GET request to /api/todo.

jQuery ajax 関数は、AJAX 要求を API に送信します。この API はオブジェクトまたは配列を表す JSON を返します。The jQuery ajax function sends an AJAX request to the API, which returns JSON representing an object or array. この関数では、HTTP 要求を指定した url に送信して、HTTP の対話式操作のすべてのフォームを処理できます。This function can handle all forms of HTTP interaction, sending an HTTP request to the specified url. GETtype として使用されます。GET is used as the type. 要求が成功した場合、success コールバック関数が呼び出されます。The success callback function is invoked if the request succeeds. コールバックでは、DOM は To Do 情報で更新されます。In the callback, the DOM is updated with the to-do information.

$(document).ready(function () {
    getData();
});

function getData() {
    $.ajax({
        type: 'GET',
        url: uri,
        success: function (data) {
            $('#todos').empty();
            getCount(data.length);
            $.each(data, function (key, item) {
                const checked = item.isComplete ? 'checked' : '';

                $('<tr><td><input disabled="true" type="checkbox" ' + checked + '></td>' +
                    '<td>' + item.name + '</td>' +
                    '<td><button onclick="editItem(' + item.id + ')">Edit</button></td>' +
                    '<td><button onclick="deleteItem(' + item.id + ')">Delete</button></td>' +
                    '</tr>').appendTo($('#todos'));
            });

            todos = data;
        }
    });
}

To Do アイテムの追加Add a to-do item

To Do アイテムを追加するには、HTTP POST 要求を /api/todo/ に送信します。To add a to-do item, send an HTTP POST request to /api/todo/. 要求本文に To Do オブジェクトを含める必要があります。The request body should contain a to-do object. ajax 関数は、POST を使用して API を呼び出しています。The ajax function is using POST to call the API. POSTPUT の要求では、要求本文は API に送信されたデータを表します。For POST and PUT requests, the request body represents the data sent to the API. API は JSON 要求本文を必要としています。The API is expecting a JSON request body. acceptscontentType オプションは application/json に設定され、それぞれ送受信されるメディアの種類を分類します。The accepts and contentType options are set to application/json to classify the media type being received and sent, respectively. このデータは、JSON.stringify を使用して、JSON オブジェクトに変換されます。The data is converted to a JSON object using JSON.stringify. API で正常な状況コードが返された場合、getData 関数が呼び出され、HTML テーブルを更新します。When the API returns a successful status code, the getData function is invoked to update the HTML table.

function addItem() {
    const item = {
        'name': $('#add-name').val(),
        'isComplete': false
    };

    $.ajax({
        type: 'POST',
        accepts: 'application/json',
        url: uri,
        contentType: 'application/json',
        data: JSON.stringify(item),
        error: function (jqXHR, textStatus, errorThrown) {
            alert('here');
        },
        success: function (result) {
            getData();
            $('#add-name').val('');
        }
    });
}

To Do アイテムの更新Update a to-do item

To Do アイテムの更新も追加も要求本文に依存するため、この 2 つはよく似ています。Updating a to-do item is very similar to adding one, since both rely on a request body. この場合の更新と追加の唯一の違いは、url がアイテムの一意識別子を追加するために変更され、typePUT になるということです。The only real difference between the two in this case is that the url changes to add the unique identifier of the item, and the type is PUT.

$.ajax({
    url: uri + '/' + $('#edit-id').val(),
    type: 'PUT',
    accepts: 'application/json',
    contentType: 'application/json',
    data: JSON.stringify(item),
    success: function (result) {
        getData();
    }
});

To Do アイテムの削除Delete a to-do item

To Do アイテムを削除するには、DELETE への AJAX 呼び出しで type を設定して、URL でアイテムの一意識別子を指定します。Deleting a to-do item is accomplished by setting the type on the AJAX call to DELETE and specifing the item's unique identifier in the URL.

$.ajax({
    url: uri + '/' + id,
    type: 'DELETE',
    success: function (result) {
        getData();
    }
});

その他の CRUD 操作の実装Implement the other CRUD operations

次のセクションでは、CreateUpdateDelete の各メソッドをコントローラーに追加します。In the following sections, Create, Update, and Delete methods are added to the controller.

作成Create

次の Create メソッドを追加します。Add the following Create method:

[HttpPost]
public IActionResult Create([FromBody] TodoItem item)
{
    if (item == null)
    {
        return BadRequest();
    }

    _context.TodoItems.Add(item);
    _context.SaveChanges();

    return CreatedAtRoute("GetTodo", new { id = item.Id }, item);
}

上記のコードは、[HttpPost] 属性で示されるように、HTTP POST メソッドです。The preceding code is an HTTP POST method, as indicated by the [HttpPost] attribute. MVC は、[FromBody] 属性により、HTTP 要求の本文から to-do 項目の値を取得するよう指示されます。The [FromBody] attribute tells MVC to get the value of the to-do item from the body of the HTTP request.

[HttpPost]
public IActionResult Create(TodoItem item)
{
    _context.TodoItems.Add(item);
    _context.SaveChanges();

    return CreatedAtRoute("GetTodo", new { id = item.Id }, item);
}

上記のコードは、[HttpPost] 属性で示されるように、HTTP POST メソッドです。The preceding code is an HTTP POST method, as indicated by the [HttpPost] attribute. MVC は、HTTP 要求の本文から to-do 項目の値を取得します。MVC gets the value of the to-do item from the body of the HTTP request.

CreatedAtRoute メソッド:The CreatedAtRoute method:

  • 201 応答を返します。Returns a 201 response. HTTP 201 は、サーバーに新しいリソースを作成する HTTP POST メソッドに対する標準の応答です。HTTP 201 is the standard response for an HTTP POST method that creates a new resource on the server.
  • 応答に場所ヘッダーを追加します。Adds a Location header to the response. 場所ヘッダーでは、新しく作成された To Do アイテムの URI を指定します。The Location header specifies the URI of the newly created to-do item. 10.2.2 201 Created」 (10.2.2 201 生成) を参照してください。See 10.2.2 201 Created.
  • "GetTodo" という名前のルートを使用して、URL を作成します。Uses the "GetTodo" named route to create the URL. "GetTodo" という名前のルートは GetById で定義します。The "GetTodo" named route is defined in GetById:
[HttpGet("{id}", Name = "GetTodo")]
public IActionResult GetById(long id)
{
    var item = _context.TodoItems.Find(id);
    if (item == null)
    {
        return NotFound();
    }
    return Ok(item);
}
[HttpGet("{id}", Name = "GetTodo")]
public ActionResult<TodoItem> GetById(long id)
{
    var item = _context.TodoItems.Find(id);
    if (item == null)
    {
        return NotFound();
    }
    return item;
}

Postman を使用した作成要求の送信Use Postman to send a Create request

  • アプリを起動します。Start the app.
  • Postman を開きます。Open Postman.

Postman コンソール

  • localhost URL のポート番号を更新します。Update the port number in the localhost URL.
  • HTTP メソッドを POST に設定します。Set the HTTP method to POST.
  • [Body] タブをクリックします。Click the Body tab.
  • [raw] ラジオ ボタンを選択します。Select the raw radio button.
  • 型を [JSON (application/json)] に設定します。Set the type to JSON (application/json).
  • 次の JSON のような、to-do 項目を含む要求本文を入力します。Enter a request body with a to-do item resembling the following JSON:
{
  "name":"walk dog",
  "isComplete":true
}
  • [Send] ボタンをクリックします。Click the Send button.

ヒント

[Send] をクリックしても応答が表示されない場合、[SSL certification verification] オプションを無効にします。If no response displays after clicking Send, disable the SSL certification verification option. これは、[File][Settings] の下にあります。This is found under File > Settings. 設定を無効にした後にもう一度 [Send] ボタンをクリックします。Click the Send button again after disabling the setting.

次のように、[Response] ウィンドウの [Headers] タブをクリックして、[Location] ヘッダー値をコピーします。Click the Headers tab in the Response pane and copy the Location header value:

Postman コンソールの [Headers] タブ

場所ヘッダー URI を使用して新しいアイテムにアクセスできます。The Location header URI can be used to access the new item.

更新Update

次の Update メソッドを追加します。Add the following Update method:

[HttpPut("{id}")]
public IActionResult Update(long id, [FromBody] TodoItem item)
{
    if (item == null || item.Id != id)
    {
        return BadRequest();
    }

    var todo = _context.TodoItems.Find(id);
    if (todo == null)
    {
        return NotFound();
    }

    todo.IsComplete = item.IsComplete;
    todo.Name = item.Name;

    _context.TodoItems.Update(todo);
    _context.SaveChanges();
    return NoContent();
}
[HttpPut("{id}")]
public IActionResult Update(long id, TodoItem item)
{
    var todo = _context.TodoItems.Find(id);
    if (todo == null)
    {
        return NotFound();
    }

    todo.IsComplete = item.IsComplete;
    todo.Name = item.Name;

    _context.TodoItems.Update(todo);
    _context.SaveChanges();
    return NoContent();
}

UpdateCreate と似ていますが、HTTP PUT を使用します。Update is similar to Create, except it uses HTTP PUT. 応答は 204 (No Content) となります。The response is 204 (No Content). HTTP 仕様に従って、PUT 要求では、デルタのみでなく、更新されたエンティティ全体を送信するようクライアントに求めます。According to the HTTP specification, a PUT request requires the client to send the entire updated entity, not just the deltas. 部分的な更新をサポートするには、HTTP PATCH を使用します。To support partial updates, use HTTP PATCH.

Postman を使用し、to-do 項目の名前を "walk cat" に更新します。Use Postman to update the to-do item's name to "walk cat":

204 (No Content) の応答を示す Postman コンソール

削除Delete

次の Delete メソッドを追加します。Add the following Delete method:

[HttpDelete("{id}")]
public IActionResult Delete(long id)
{
    var todo = _context.TodoItems.Find(id);
    if (todo == null)
    {
        return NotFound();
    }

    _context.TodoItems.Remove(todo);
    _context.SaveChanges();
    return NoContent();
}

Delete の応答は 204 (No Content) となります。The Delete response is 204 (No Content).

Postman を使用し、to-do 項目を削除します。Use Postman to delete the to-do item:

204 (No Content) の応答を示す Postman コンソール

Visual Studio Code ヘルプVisual Studio Code help

次の手順Next steps