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

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

このチュートリアルでは、"to-do" 項目の一覧を管理する Web API を構築します。This tutorial builds a web API for managing a list of "to-do" items. ユーザー インターフェイス (UI) は作成されません。A user interface (UI) isn't created.

このチュートリアルには 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

以下のワークロードで Visual Studio 2017 バージョン 15.7.3 以降:Visual Studio 2017 version 15.7.3 or later with the following workloads:

  • ASP.NET と Web 開発ASP.NET and web development
  • .NET Core クロスプラットフォームの開発.NET Core cross-platform development

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

Visual Studio で次の手順を実行します。Follow these steps in Visual Studio:

  • [ファイル] メニューで、[新規作成]、 > [プロジェクト] の順に作成します。From the File menu, select New > Project.
  • [ASP.NET Core Web アプリケーション] テンプレートを選択します。Select the ASP.NET Core Web Application template. プロジェクトに「TodoApi」という名前を付け、[OK] をクリックます。Name the project TodoApi and click OK.
  • [New ASP.NET Core Web Application - TodoApi](新しい ASP.NET Core Web アプリケーション - TodoApi) ダイアログで、ASP.NET Core のバージョンを選択します。In the New ASP.NET Core Web Application - TodoApi dialog, choose the ASP.NET Core version. API テンプレートを選択し、[OK] をクリックします。Select the API template and click OK. [Enable Docker Support](Docker サポートを有効にする)選択しないでください。Do not select Enable Docker Support.

アプリの起動Launch the app

Visual Studio で、CTRL を押しながら F5 を押し、アプリを起動します。In Visual Studio, press CTRL+F5 to launch the app. Visual Studio でブラウザーが起動し、http://localhost:<port>/api/values にアクセスします。ここで、<port> はランダムに選択されたポート番号になります。Visual Studio launches a browser and navigates to http://localhost:<port>/api/values, where <port> is a randomly chosen port number. Chrome、Microsoft Edge、Firefox では次の出力が表示されます。Chrome, Microsoft Edge, and Firefox display the following output:

["value1","value2"]

Internet Explorer を使っている場合、values.json ファイルを保存するように求められます。If using Internet Explorer, you'll be prompted to save a values.json file.

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

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

ソリューション エクスプローラーで、プロジェクトを右クリックします。In Solution Explorer, right-click the project. [追加] > [新しいフォルダー] の順に選択します。Select Add > New Folder. フォルダーに Models という名前を付けます。Name the folder Models.

注意

モデル クラスはプロジェクト内のどこでも使用できます。The model classes can go anywhere in the project. 通例として、モデル クラス用に Models フォルダーを使用しています。The Models folder is used by convention for model classes.

ソリューション エクスプローラーで、[Models] フォルダーを右クリックし、[追加]、 > [クラス] の順に選択します。In Solution Explorer, right-click the Models folder and select Add > Class. クラスに「TodoItem」という名前を付け、[追加] をクリックします。Name the class TodoItem and click Add.

TodoItem クラスを次のコードで更新します。Update the 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 クラスから派生させて作成します。This class is created by deriving from the Microsoft.EntityFrameworkCore.DbContext class.

ソリューション エクスプローラーで、[Models] フォルダーを右クリックし、[追加]、 > [クラス] の順に選択します。In Solution Explorer, right-click the Models folder and select Add > Class. クラスに「TodoContext」という名前を付け、[追加] をクリックします。Name the class TodoContext and click Add.

このクラスを次のコードで置き換えます。Replace the class with the following code:

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 フォルダーを右クリックします。In Solution Explorer, right-click the Controllers folder. [追加] > [新しい項目] の順に選択します。Select Add > New Item. [新しい項目の追加] ダイアログで、[API コントローラー クラス] テンプレートを選択します。In the Add New Item dialog, select the API Controller Class template. クラスに「TodoController」という名前を付け、[追加] をクリックします。Name the class TodoController, and click Add.

[新しい項目の追加] ダイアログ。検索ボックスに「controller」と入力されています。Web API コントローラーが選択されています。

このクラスを次のコードで置き換えます。Replace the class 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

Visual Studio で、CTRL を押しながら F5 を押し、アプリを起動します。In Visual Studio, press CTRL+F5 to launch the app. Visual Studio でブラウザーが起動し、http://localhost:<port>/api/values にアクセスします。ここで、<port> はランダムに選択されたポート番号になります。Visual Studio launches a browser and navigates to http://localhost:<port>/api/values, where <port> is a randomly chosen port number. http://localhost:<port>/api/todoTodo コントローラーに移動します。Navigate to the Todo controller at http://localhost:<port>/api/todo.

その他の 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 コンソール

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

次の手順Next steps