Getting Started with ASP.NET Web API 2


 [Home]

原文(英語)はこちら (By Mike Wasson|last updated May 28, 2015)


Web API を作成する

このチュートリアルにおいて、製品リストを返すウェブ API を作成するために ASP.NET Web API を利用する。結果を表示するためのウェブページのフロントエンドには jQuery を利用する。


Visual Studio を起動してスタートページで「新しいプロジェクト」を選ぶ。あるいは、ファイルメニューから「新しいプロジェクト」を選ぶ。

テンプレート一覧から、ウェブを選び「ASP.NET Web アプリケーション」(C# または VB) を選んで "ProductsApp" という名前にして OK をクリックする。


新規 ASP.NET プロジェクトダイアログにおいて、"Empty"テンプレートを選ぶ。「以下のフォルダーにコア参照を追加:」のところで、"Web API" をチェックして、OK をクリックする。


モデルの追加

モデルは、アプリケーションでデータを表すオブジェクトである。ASP.NET Web API はモデルを JSON, XML, その他のフォーマットに自動的にシリアル化できる。そして、そのシリアル化されたデータを HTTP のレスポンスメッセージの本体に書き込む。クライアントはそのシリアル化されたフォーマットを逆シリアル化してオブジェクトを作成する。たいていのクライアントは、XML や JSON を分析可能である。さらに、クライアントは、HTTP リクエストメッセージにおいて Accept ヘッダをセットすることにより、それが求めるフォーマットがどちらかを指示できる。

製品を表す簡単なモデルの作成を始めよう。

Solution Explorer が表示されてない場合は、表示メニューをクリックして Solution Explorer をクリックする。Solution Explorer において、Models フォルダを右クリックし、コンテキストメニューからクラス "Class" を追加する。


"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 によって特定されるある製品を取得できるコントローラを追加する。

もし、ASP.NET MVC を使ったことがあるなら、すでにコントローラは既知のはずである。Web API は MVC コントローラに似ているが、Controller クラスの代わりに ApiController を継承している。

Solution Explorer で Controllers を右クリックし、Controller を選んで追加する。


Add Scaffold ダイアログで、Web API Controller - Empty を選択して追加する。


Add Controller でコントローラの名前を "ProductsController" にして Add をクリックする。


Controllers フォルダに ProductsController.cs というファイルが作成される。


このファイルを開いて、コードを次のように修正する。

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 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つのメソッドを定義している。

それぞれのメソッドは、次のような URI でコールされる。

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

GetProduct メソッドで id はプレースホルダである。例えば、ID 5 であるプロダクトを得るには、URI は api/products/5 となる。


Web API を JavaScript と jQuery で呼び出す

ここでは、Web API を呼び出すために AJAX を使う HTML ページを追加する。jQuery で AJAX コールを行いその結果でページを更新する。

Solution Explorer でプロジェクトを右クリックし、新しい項目を追加する。


新しい項目ダイアログで Web ノードを選び、HTML ページを選択する。ページの名前は "index.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="http://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 を使った。jQuery をダウンロードして組み込んでもよい。


Product の一覧を取得するには

Product の一覧を取得するには、HTTP GET リクエストを "/api/products" に送る。

jQuery getJSON 関数は、AJAX リクエストを送る。レスポンスは、JSON オブジェクトの配列を含む。成功時には終了コールバック関数がコールされる。コールバックにおいて、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" に送る。

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

ID を付加した getJSON で AJAX リクエストを送る。結果は1つのプロダクト情報の JSON が返される。


アプリケーションの実行

F5 でアプリケーションを実行すると、下のような画面が表示されるはずである。


ID でプロダクトを得るには、ID を入力し、Search をクリックする。


不正な ID を入力すると、HTTP エラーが返される。


F12 で HTTP リクエストとレスポンスを見る

HTTP サービスを使う場合、HTTP リクエストとリクエスト・メッセージを見ることは非常に有益である。これは、Internet Explorer で F12 を押して開発者ツールを使うとよい。

Network タブで Start Capturing を押す。ウェブページへ戻り、F5 を押してページをリロードする。Internet Explorer は ブラウザとウェブサーバ間の HTTP トラフィックをキャプチャする。そのサマリーを下に示す。


URI "api/products/" へ移動し、詳細表示をクリックする。リクエストとレスポンスヘッダとレスポンス本体のビュータブがある。ここでリクエストヘッダをクリックすると、Accept ヘッダにおけるリクエストされた "application/json" を見ることができる。


 

このページのトップへ