ASP.NET Web API 2 の概要 (C#)

作成者: Mike Wasson

完了したプロジェクトのダウンロード

このチュートリアルでは、ASP.NET Web APIを使用して、製品の一覧を返す Web API を作成します。

HTTP は、Web ページを提供するためのものではありません。 HTTP は、サービスとデータを公開する API を構築するための強力なプラットフォームでもあります。 HTTP はシンプルで柔軟で、ユビキタスです。 考えることができるほぼすべてのプラットフォームには HTTP ライブラリがあるため、HTTP サービスはブラウザー、モバイル デバイス、従来のデスクトップ アプリケーションなど、幅広いクライアントに到達できます。

ASP.NET Web APIは、.NET Framework上に Web API を構築するためのフレームワークです。

チュートリアルで使用するソフトウェアのバージョン

• Visual Studio 2017
• Web API 2

このチュートリアルの新しいバージョンについては、「ASP.NET Coreと Visual Studio for Windows を使用して Web API を作成する」を参照してください。

Web API プロジェクトを作成する

このチュートリアルでは、ASP.NET Web APIを使用して、製品の一覧を返す Web API を作成します。 フロントエンド Web ページでは、jQuery を使用して結果が表示されます。

Visual Studio を起動し、[スタート] ページから [新しいプロジェクト ] を選択 します 。 または、[ ファイル ] メニューの [ 新規 ] を選択し、[プロジェクト] を選択 します。

[ テンプレート ] ペインで、[ インストールされているテンプレート ] を選択し、[ Visual C# ] ノードを展開します。 [ Visual C#] で、[Web] を選択 します。 プロジェクト テンプレートの一覧で、[ ASP.NET Web アプリケーション] を選択します。 プロジェクトに「ProductsApp」という名前を付け、[OK] をクリック します。

[ 新しい ASP.NET プロジェクト ] ダイアログで、 空 のテンプレートを選択します。 [フォルダーとコア参照の追加] で、Web API をチェックします。 [OK] をクリックします。

Note

"Web API" テンプレートを使用して Web API プロジェクトを作成することもできます。 Web API テンプレートは、ASP.NET MVC を使用して API ヘルプ ページを提供します。 MVC を使用せずに Web API を表示するため、このチュートリアルでは空のテンプレートを使用しています。 一般に、Web API を使用するために MVC ASP.NET 知る必要はありません。

モデルの追加

"モデル" は、アプリケーションでデータを表すオブジェクトです。 ASP.NET Web APIは、モデルを JSON、XML、またはその他の形式に自動的にシリアル化し、シリアル化されたデータを HTTP 応答メッセージの本文に書き込むことができます。 クライアントがシリアル化形式を読み取ることができる限り、オブジェクトを逆シリアル化できます。 ほとんどのクライアントは、XML または JSON を解析できます。 さらに、クライアントは、HTTP 要求メッセージで Accept ヘッダーを設定することで、必要な形式を指定できます。

まず、製品を表す単純なモデルを作成します。

ソリューション エクスプローラーが表示されていない場合は、[表示]メニューをクリックし、[ソリューション エクスプローラー] を選択します。 ソリューション エクスプローラーで、[モデル] フォルダーを右クリックします。 コンテキスト メニューの [追加] を選択し、[クラス] を選択します。

クラスに「Product」という名前を付けます。 クラスに次のプロパティを Product 追加します。

namespace ProductsApp.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public decimal Price { get; set; }
    }
}

コントローラーを追加する

Web API では、"コントローラー" は、HTTP 要求を処理するオブジェクトです。 製品の一覧または ID で指定された 1 つの製品を返すことができるコントローラーを追加します。

Note

MVC ASP.NET 使用している場合は、既にコントローラーに精通しています。 Web API コントローラーは MVC コントローラーに似ていますが、Controller クラスではなく ApiController クラスを継承します。

ソリューション エクスプローラーで、[コントローラー] フォルダーを右クリックします。 [追加]、[コントローラー] の順に選択します。

[スキャフォールディングの追加] ダイアログで [Web API コントローラー - 空] を選択します。 [追加] をクリックします。

[ コントローラーの追加] ダイアログで、コントローラーに "ProductsController" という名前を付けます。 [追加] をクリックします。

スキャフォールディングにより、Controllers フォルダーに ProductsController.cs という名前のファイルが作成されます。

Note

コントローラーを Controllers という名前のフォルダーに配置する必要はありません。 フォルダー名は、ソース ファイルを整理するための便利な方法にすぎません。

このファイルがまだ開かれていない場合は、ファイルをダブルクリックして開きます。 このファイルのコードを次のように置き換えます。

using ProductsApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web.Http;

namespace ProductsApp.Controllers
{
    public class ProductsController : ApiController
    {
        Product[] products = new Product[] 
        { 
            new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M } 
        };

        public IEnumerable<Product> GetAllProducts()
        {
            return products;
        }

        public IHttpActionResult GetProduct(int id)
        {
            var product = products.FirstOrDefault((p) => p.Id == id);
            if (product == null)
            {
                return NotFound();
            }
            return Ok(product);
        }
    }
}

この例をシンプルにするために、製品はコントローラー クラス内の固定配列に格納されます。 もちろん、実際のアプリケーションでは、データベースに対してクエリを実行するか、他の外部データ ソースを使用します。

コントローラーは、製品を返す 2 つのメソッドを定義します。

• メソッドは GetAllProducts 、製品のリスト全体を IEnumerable<Product> 型として返します。
• メソッドは GetProduct 、ID で 1 つの製品を検索します。

これで完了です。 Web API が動作しています。 コントローラーの各メソッドは、1 つ以上の URI に対応しています。

Controller メソッド	URI
GetAllProducts	/api/products
GetProduct	/api/products/id

メソッドの GetProduct 場合、URI の ID はプレースホルダーです。 たとえば、ID が 5 の製品を取得するには、URI は です api/products/5。

Web API が HTTP 要求をコントローラー メソッドにルーティングする方法の詳細については、「ASP.NET Web APIでのルーティング」を参照してください。

Javascript と jQuery を使用した Web API の呼び出し

このセクションでは、AJAX を使用して Web API を呼び出す HTML ページを追加します。 jQuery を使用して AJAX 呼び出しを行い、結果でページを更新します。

ソリューション エクスプローラーでプロジェクトを右クリックし、[追加] を選択し、[新しい項目] を選択します。

[新しい項目の追加] ダイアログで、[Visual C#] の下にある [Web] ノードを選択し、[HTML ページ] 項目を選択します。 ページに「index.html」という名前を付けます。

このファイル内のすべてのものを次のように置き換えます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Product App</title>
</head>
<body>

  <div>
    <h2>All Products</h2>
    <ul id="products" />
  </div>
  <div>
    <h2>Search by ID</h2>
    <input type="text" id="prodId" size="5" />
    <input type="button" value="Search" onclick="find();" />
    <p id="product" />
  </div>

  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
  <script>
    var uri = 'api/products';

    $(document).ready(function () {
      // Send an AJAX request
      $.getJSON(uri)
          .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
              // Add a list item for the product.
              $('<li>', { text: formatItem(item) }).appendTo($('#products'));
            });
          });
    });

    function formatItem(item) {
      return item.Name + ': $' + item.Price;
    }

    function find() {
      var id = $('#prodId').val();
      $.getJSON(uri + '/' + id)
          .done(function (data) {
            $('#product').text(formatItem(data));
          })
          .fail(function (jqXHR, textStatus, err) {
            $('#product').text('Error: ' + err);
          });
    }
  </script>
</body>
</html>

jQuery を取得するには、いくつかの方法があります。 この例では、 Microsoft Ajax CDN を使用しました。 からダウンロード http://jquery.com/することもできます。また、ASP.NET "Web API" プロジェクト テンプレートにも jQuery が含まれています。

製品の一覧を取得する

製品の一覧を取得するには、HTTP GET 要求を "/api/products" に送信します。

jQuery getJSON 関数は AJAX 要求を送信します。 応答には、JSON オブジェクトの配列が含まれています。 関数は done 、要求が成功した場合に呼び出されるコールバックを指定します。 コールバックでは、DOM を製品情報で更新します。

$(document).ready(function () {
    // Send an AJAX request
    $.getJSON(apiUrl)
        .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
                // Add a list item for the product.
                $('<li>', { text: formatItem(item) }).appendTo($('#products'));
            });
        });
});

ID による製品の取得

ID で製品を取得するには、HTTP GET 要求を "/api/products/id" に送信します。 ここで、id は製品 ID です。

function find() {
    var id = $('#prodId').val();
    $.getJSON(apiUrl + '/' + id)
        .done(function (data) {
            $('#product').text(formatItem(data));
        })
        .fail(function (jqXHR, textStatus, err) {
            $('#product').text('Error: ' + err);
        });
}

引き続き を呼び出 getJSON して AJAX 要求を送信しますが、今回は要求 URI に ID を配置します。 この要求からの応答は、1 つの製品の JSON 表現です。

アプリケーションの実行

F5 キーを押してアプリケーションのデバッグを開始します。 Web ページは次のようになります。

ID で製品を取得するには、ID を入力し、[検索] をクリックします。

無効な ID を入力すると、サーバーは HTTP エラーを返します。

F12 を使用して HTTP 要求と応答を表示する

HTTP サービスを使用している場合は、HTTP 要求と応答メッセージを確認すると非常に便利です。 これを行うには、インターネット エクスプローラー 9 の F12 開発者ツールを使用します。 インターネット エクスプローラー 9 から F12 キーを押してツールを開きます。 [ ネットワーク ] タブをクリックし、[ キャプチャの開始] を押します。 次に、Web ページに戻り、 F5 キーを押して Web ページを再読み込みします。 インターネット エクスプローラーは、ブラウザーと Web サーバーの間の HTTP トラフィックをキャプチャします。 概要ビューには、ページのすべてのネットワーク トラフィックが表示されます。

相対 URI "api/products/" のエントリを見つけます。 このエントリを選択し、[ 詳細ビューに移動] をクリックします。 詳細ビューには、要求ヘッダーと応答ヘッダーと本文を表示するためのタブがあります。 たとえば、[ 要求ヘッダー ] タブをクリックすると、クライアントが Accept ヘッダーで "application/json" を要求していることがわかります。

[応答本文] タブをクリックすると、製品リストが JSON にシリアル化された方法を確認できます。 他のブラウザーにも同様の機能があります。 もう 1 つの便利なツールは、Web デバッグ プロキシである Fiddler です。 Fiddler を使用して HTTP トラフィックを表示したり、HTTP 要求を作成したりすることもできます。これにより、要求内の HTTP ヘッダーを完全に制御できます。

Azure で実行されているこのアプリを参照してください

完成したサイトがライブ Web アプリとして実行されていることを確認しますか? 完全なバージョンのアプリを Azure アカウントにデプロイできます。

このソリューションを Azure にデプロイするには、Azure アカウントが必要です。 アカウントをまだ持っていない場合は、次のオプションがあります。

• Azure アカウントを無料で開く - 有料の Azure サービスを試すために使用できるクレジットを受け取ります。使用した後でも、アカウントを保持し、無料の Azure サービスを使用できます。
• MSDN サブスクライバー特典をアクティブ化 する - MSDN サブスクリプションでは、有料の Azure サービスに使用できるクレジットが毎月提供されます。

次の手順

• POST、PUT、DELETE アクションをサポートし、データベースへの書き込みをサポートする HTTP サービスのより完全な例については、「 Entity Framework 6 での Web API 2 の使用」を参照してください。
• HTTP サービスの上に滑らかで応答性の高い Web アプリケーションを作成する方法の詳細については、「 ASP.NET シングル ページ アプリケーション」を参照してください。
• Visual Studio Web プロジェクトをAzure App Serviceに配置する方法については、「Azure App Serviceで ASP.NET Web アプリを作成する」を参照してください。