Share via

ASP.NET Web API を使ってみよう: MVC 4 新機能シリーズ

  • 02/24/2012

ASP.NET MVC 4 Beta では、ASP.NET Web API という新しいフレームワークが追加されました。この ASP.NET Web API (以後 Web API と記します) は、ブラウザーやモバイルデバイスを含むさまざまなクライアントに対して RESTful なサービスを提供するのに適した HTTP サービス構築用のフレームワークです。まずは以下に ASP.NET MVC 4 Beta リリース ノート の ASP.NET Web API 項目の簡約を記載します。

  • 最新の HTTP プログラミングモデル
    Web API では、新しい強く型付けされた HTTP オブジェクトモデルを使って HTTP リクエストとレスポンスを直接操作できます。
  • ルーティングのフルサポート
    Web API は、ルートパラメーターや制約などの URL ルーティングの全機能をサポートします。加えて、規約によるアクションへのマッピングをサポートします。したがって、[HttpPost] などの属性をクラスやメソッドに付加する必要がありません。
  • Content negotiation
    クライアントとサーバーは、API から返されるデータの最適なフォーマットを決定して協調動作します。デフォルトでは、XML, JSON, Form URL encoded formats をサポートし、カスタムフォーマッタ―を追加して拡張も可能です。また、デフォルトの Content negotiation strategy を置き換えることさえ可能です。
  • モデルバインディングと検証
    モデルバインダーは HTTP リクエストのメッセージデータを Web API アクションで使われる .NET オブジェクトに簡単にバインドすることができます。
  • アクションフィルター
    Web API は [Authorize] 属性などのアクションフィルターをサポートします。また、カスタムアクションフィルターも作成して使用することができます。
  • Query composition
    Web API は、IQueryable<T> を返すことで簡単に OData の URL 規約によるクエリーをサポートできます。
  • Improved testability of HTTP details
    Web API アクションは HttpRequestMessage と HttpResponseMessage のインスタンスと共に動作します。また、これらのオブジェクトのジェネリック版を使うことで、HTTP タイプにカスタムタイプを追加することもできます。
  • Improved Inversion of Control (IoC) via DependencyResolver
    Web API は MVC の dependency resolver で用いられる Service locator pattern を使います。
  • Code-based configuration
    Web API の設定はコードでのみ行います。config ファイルは用いません。
  • Self-host
    Web API はルーティングやその他の Web API の機能を使いながら、IIS に加えて独自プロセスでもホストさせることができます。

 

ASP.NET Web API を使った HTTP サービスの作成

それではここで、ASP.NET Web API を使ってシンプルな HTTP サービスを作成してみます。

1. 新しい Web API プロジェクトの作成

Visual Studio 2010 のメニュー [新しいプロジェクト] で “ASP.NET MVC 4 Web Application” を選び、プロジェクト名を入力します。今回も こちらのブログ記事 "Web API を始めてみよう" に合わせて “SuperHero2” としてプロジェクトを作成しました。

NewProject

続いて表示される [New ASP.NET MVC 4 Project] ダイアログで、”Web API” を選択します。

SelectWebAPI

プロジェクトが作成されると、Web API 用のコントローラー ValuesController.cs がデフォルトで生成されます。この ValuesController では、GET, POST, PUT, DELETE に対応したアクションメソッドが用意されていると共に、ApiController クラスの派生クラスとなっていることが分かります。通常の ASP.NET MVC のコントローラーでは Controller クラスからの派生クラスとなりますので、まずはここが大きく異なるところになります (下記コード参照) 。

    1: namespace SuperHero2.Controllers
    2: {
    3:     public class ValuesController : ApiController
    4:     {
    5:         // GET /api/values
    6:         public IEnumerable<string> Get()
    7:         {
    8:             return new string[] { "value1", "value2" };
    9:         }
   10:  
   11:         // GET /api/values/5
   12:         public string Get(int id)
   13:         {
   14:             return "value";
   15:         }
   16:  
   17:         // POST /api/values
   18:         public void Post(string value)
   19:         {
   20:         }
   21:  
   22:         // PUT /api/values/5
   23:         public void Put(int id, string value)
   24:         {
   25:         }
   26:  
   27:         // DELETE /api/values/5
   28:         public void Delete(int id)
   29:         {
   30:         }
   31:     }
   32: }

2. モデルの追加

続いて、API を通して提供するデータを表した POCO (Plain-old CLR Object) クラスを作ります。このクラスのオブジェクトがモデルとして、Web API で JSON や XML などのフォーマットにシリアライズされクライアントサイドに提供されるデータとなります。

ソリューションエクスプローラーの Models フォルダー上で右クリックして、[追加] - [クラス] から Hero.cs を作り、下記のコードを記述します。

AddModel 

    1: namespace SuperHero2.Models
    2: {
    3:     public class Hero
    4:     {
    5:         public int Id { get; set; }
    6:         public string Name { get; set; }
    7:     }
    8: }

3. コントローラ Get アクションの実装

ここで、デフォルトで生成された ValuesController.cs の名前をモデル名に合わせて HeroesController.cs にリネームしておきます。「ファイルの名前を変更しようとしています。このプロジェクトのコード要素 ‘ValuesController’ への参照をすべて変更しますか?」のメッセージボックスが表示されたら [はい] をクリックします。ファイル名を変更するだけで、コード内のクラス名も HeroesController に変更されます。

Rename2

    1: namespace SuperHero2.Controllers
    2: {
    3:     public class HeroesController : ApiController
    4:     {
    5:         ...
    6:     }
    7: }

続いて、HeroesController.cs に下記の参照を追加します。

    1: using SuperHero2.Models;

そして、1 つ目の Get アクション メソッドを下記に書き換えます。

    1: // GET /api/values
    2: public IEnumerable<Hero> Get()
    3: {
    4:     var heroes = new List<Hero>
    5:     {
    6:         new Hero {Id = 1, Name = "スーパーマン"},
    7:         new Hero {Id = 2, Name = "バットマン"},
    8:         new Hero {Id = 3, Name = "ウェブマトリクスマン"},
    9:         new Hero {Id = 4, Name = "チャッカマン"},
   10:         new Hero {Id = 5, Name = "スライムマン"}
   11:     };
   12:  
   13:     return heroes;
   14: }

ここでは、実装サンプルをシンプルにするために、Get アクション メソッド内にデータをハードコーディングしていますが、実際はここで何かしらのデータ アクセスをおこなってモデルデータを取得することになるでしょう。

4. 実行

ひとまずは、これで Hero モデルのリストデータを取得する Web API が実装できましたので、実行してデータが取得できるか確認してみます。F5 または Ctrl + F5 で実行すると、Web API プロジェクトテンプレートで作成された ASP.NET MVC の Index ページが表示されます。

startPage

こちらのブログ記事で紹介した WCF Web API 拡張パッケージで提供されていたようなテスト用クライアントは、現状 ASP.NET Web API では使用できませんので、ここでは IE9 の F12 開発者ツール のネットワークキャプチャ機能を使って Web API からのレスポンスデータを確認します。(Fiddler などの HTTP キャプチャツールを使用してもかまいません)

IE9 で F12 キーを押して F12 開発者ツールを開き、[ネットワーク] タブを開きます。そして、[キャプチャの開始] ボタンを押して、HTTP のキャプチャを開始します。この状態で、IE9 のアドレスバーに https://localhost:XXXX/api/heroes と入力して、リクエストとレスポンスをキャプチャします（XXXX にはスタートページのポート番号を入力します）。

F12_capture1

キャプチャ データをダブルクリックするか、選択してから [詳細ビューに移動] をクリックすると、リクエスト ヘッダーやレスポンス ヘッダーなどを確認することができます。ここで [応答本文] を見ると JSON 形式で Hero データが取得出来ていることが確認できます。

F12_capture2

5. jQuery による JSON データの取得と表示

最後に、Index.cshtml で、api/heroes から JSON 形式でヒーロー データを取得し、ページ上に表示してみます。Index.cshtml ページを開き、<div id=”body”> 内部の要素を全て削除してから、下記のスクリプトやマークアップを記述します。

    1: <!DOCTYPE html>
    2: <html lang="en">
    3: <head>
    4:     <meta charset="utf-8" />
    5:     <title>ASP.NET Web API</title>
    6:     <link href="@Url.Content("~/Content/Site.css")" 
    7:         rel="stylesheet" type="text/css" />
    8:     <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" 
    9:         type="text/javascript"></script>
   10:     <meta name="viewport" content="width=device-width" />
   11:  
   12:     <style type="text/css">
   13:         #heroes
   14:         {
   15:             font-family: Meiryo;
   16:             font-size: 1.2em;
   17:         }
   18:     </style>
   19:  
   20:     <script type="text/javascript">
   21:         $(function () {
   22:             // Send an AJAX request
   23:             $.getJSON("api/heroes/",
   24:                 function (data) {
   25:                     // On success, 'data' contains a list of products.
   26:                     $.each(data, function (key, val) {
   27:                         // Format the text to display.
   28:                         var str = val.Id + ': ' + val.Name;
   29:                         // Add a list item for the product.
   30:                         $('<li/>', { html: str }).appendTo($('#heroes'));
   31:                     });
   32:                 });
   33:         });
   34:     </script>
   35:  
   36: </head>
   37: <body>
   38:     <header>
   39:         <div class="content-wrapper">
   40:             <div class="float-left">
   41:                 <p class="site-title">
   42:                     <a href="/">ASP.NET Web API</a></p>
   43:             </div>
   44:         </div>
   45:     </header>
   46:     <div id="body">
   47:         <ul id="heroes"></ul>
   48:     </div>
   49: </body>
   50: </html>

jQuery は、もともとプロジェクトに追加されているバージョン 1.6.2 をそのまま使用していますが、NuGet を通して最新版にアップデートしても構いません。Web API の呼び出しには、jQuery の getJSON メソッドを利用して非同期にデータを取得し、<ul id=”heroes”> の子要素として追加しています。

実行結果は下記の通りです。Web API として用意した api/heroes から取得した JSON データが Index.cshtml ページに表示されていることが確認できます。

image

おわりに

ASP.NET MVC 4 Beta で追加された新しいフレームワーク ASP.NET Web API の概要をご紹介しました。より詳しい情報は下記の ASP.NET オフィシャルページ (英語) をご参照いただければと思います。また随時、こちらのブログなどでも機能紹介していきたいと思います。

Getting Started with ASP.NET Web API

（赤シャツ男こと ScottGu’s Blog でも ASP.NET Web API シリーズ が始まりました！）