特集：Visual Studio 2008 SP1新機能解説（3）

RESTスタイルのWebサービスを手軽に公開する
「ADO.NET Data Services」

WINGSプロジェクト　土井 毅 著／山田 祥寛 監修
2008/12/12
Page1 Page2 Page3

［4］ASP.NET AJAX環境のデータを取得／追加する

　前項のようにWebブラウザでアドレスを指定するだけでは、Atom形式のデータ参照しか取り扱うことができない。やはりADO.NET Data Servicesの本領は、AJAXクライアントやSilverlight 2などとの連動で発揮されるといえるだろう。

　そこで次に、ASP.NET AJAXを使って、データの取得、追加を行うサンプルを作成してみよう。

　まずは準備として、前述の「AJAX Client Library for ADO.NET Data Services」をダウンロードし、解凍してできた「DataService.js」「DataService.debug.js」の2つのファイルをプロジェクトに追加する。

　次に、メニューの［プロジェクト］−［新しい項目の追加］から、テンプレートとして「AJAX Webフォーム」を選択して［追加］ボタンをクリックする。ファイル名は「NorthwindClient.aspx」とする。

　続いて、ページ内に配置されたScriptManagerコントロールのScriptsプロパティに「DataService.js」を登録する（ScriptManagerコントロールについては「ASP.NETアプリ開発者のためのVisual Studio 2008新機能 Part I」を参照のこと）。

　最後に、生成されたNorthwindClient.aspxの<html>要素以降を以下のように書き換える。

<html xmlns="http://www.w3.org/1999/xhtml" >
 <head id="Head2" runat="server">
  <title></title>
</head>
<body>
  <form id="form2" runat="server">
    <asp:ScriptManager ID="ScriptManager2" runat="server">
        <Scripts>
    <asp:ScriptReference Path="DataService.js" ScriptMode="Auto" />
    </Scripts>
</asp:ScriptManager>
  <div id="results"><%--クエリ結果表示用div要素--%>
  </div>
  <div><%-- 追加データ入力ボックス＆追加ボタン --%>
    <input type="text" id="CategoryName" /><br />
    <textarea id="Description" cols="20" rows="5"></textarea>
    <input id="btnInsert" type="button" value="カテゴリ追加"
                  onclick="return btnInsert_onclick()" /><br />
  </div>
  </form>
<script language="javascript" type="text/javascript">
// <!CDATA[


  var northwindService;

  function pageLoad() { // ページロード・イベント
     // DataServiceオブジェクトの生成
     northwindService = new Sys.Data.DataService("/Northwind.svc");
    query(); // ページロード後、サーバからデータ取得
   }


  function query() { // データ取得関数
     // Categoriesテーブルをクエリ。
     // コールバックとしてcbQueryComplete関数を指定
     northwindService.query("/Categories", cbQueryComplete);
  }

  function cbQueryComplete(result) {

    // 文字列編集用のStringBuilderオブジェクト
     var sb = new Sys.StringBuilder();

    sb.append("<table border=1>"); // テーブルヘッダを出力
     sb.append("<th>CategoryID</th>");
    sb.append("<th>CategoryName</th>");
    sb.append("<th>Description</th>");
    sb.append("</tr>");


    for (idx in result) { // 取得したレコードごとに行を出力
      var category = result[idx]; // レコードを取得
      sb.append("<td>");
      sb.append(category.CategoryID); // フィールドを取得
       sb.append("</td>");
      sb.append("<td>");
      sb.append(category.CategoryName);
      sb.append("</td>");
      sb.append("<td>");
      sb.append(category.Description);
      sb.append("</td>");
      sb.append("</tr>");
    }
    sb.append("</table>");

    // divタグに生成したテーブルをセットする
     $get("results").innerHTML = sb.toString();

  }


  // ボタンクリックのイベントハンドラ
   function btnInsert_onclick() {
    // 入力されたカテゴリ名・説明で新しいレコードを作成
     var category = {
       CategoryName: $get("CategoryName").value,
      Description: $get("Description").value
    };

    // ADO.NET Data Serviceと通信してレコードを追加。
     // コールバックとしてcbInsertComplete関数を指定
     northwindService.insert(
      category, "/Categories", cbInsertComplete);
  }

  function cbInsertComplete() {
    query(); // 追加完了後はデータ取得
   }

// ]]>
 </script>
</body>
</html>
リスト6　NorthwindClient.aspxのソース

　データの参照、追加を1画面で併せ持っているため、やや複雑なスクリプトとなっている。順を追って説明する。

DataServiceオブジェクトの生成

　ページロード時には、ADO.NET Data ServiceにアクセスするためのDataServiceオブジェクトを生成する。引数にはADO.NET Data Serviceのエントリ・ポイント（ここではNorthwind.svc）へのパスを指定する。ページロード後、Categoriesテーブルの現在の内容を表示するため、後述のquery関数を呼ぶ。

　なお、AJAX Client Library for ADO.NET Data Servicesでは、以下のクラスが提供されている。

クラス名 機能
ActionResult ADO.NET Data Serviceへの操作の結果を表す
ActionSequence ADO.NET Data Serviceへの複数の操作を表す
DataService ADO.NET Data Serviceへの操作を提供する
DataServiceError ADO.NET Data Serviceからのエラーを表す
表6　AJAX Client Library for ADO.NET Data Servicesのクラス

　AJAX Client Library for ADO.NET Data Servicesのクラスの中では、ADO.NET Data Serviceへの操作を提供するDataServiceクラスが最も重要なものといえる。このDataServiceクラスは以下のようなメソッドを持っている。

メソッド・プロパティ名 機能
createActionSequence 複数の操作をまとめて実行するためのActionSequenceオブジェクトを作成する
insert ADO.NET Data Serviceに新しいレコードを追加する
query ADO.NET Data Serviceからデータを取得する
remove ADO.NET Data Serviceのレコードを削除する
update ADO.NET Data Serviceのレコードを更新する
表7　DataServiceクラスのメソッド

データ取得処理

　query関数では、 で作成したDataServiceオブジェクトのqueryメソッドを使い、ADO.NET Data Serviceを呼び出している。DataService.queryの第1引数はクエリ内容（この場合はCategoriesテーブル一覧取得）、第2引数は呼び出し成功時のコールバック関数の指定である。

データ変換処理

　DataServiceオブジェクトのqueryメソッド成功時のコールバック関数cbQueryCompleteは、パラメータresultにサーバから取得したデータを受け取る。

　その後のコードでは、サーバから取得した結果をHTMLテーブル形式の文字列に変換して「results」というIDを持つ<div>要素に結果を出力している。取得したresultオブジェクトをfor文で列挙してレコードを取得し、レコード内容を取得するコードは、データ参照時に使われるパターンである。

新しいレコードの作成

　ADO.NET Data Serviceに対し、HTMLフォーム上で入力されたCategoryName、Descriptionをフィールド内容とする新しいCategoriesレコードの挿入を行っている。DataServiceオブジェクトのinsertメソッドがADO.NET Data Serviceを呼び出し、データの挿入が行われる。

　以上の実装を行った後に、ソリューション・エクスプローラでNorthwind.aspxを右クリックし、［スタート ページに設定］を選択してから、［F5］キーを押してアプリケーションを実行してみよう。


図4　Categoriesテーブル内容の一覧表示

　2つの入力欄にカテゴリ名、説明を入力し、［カテゴリ追加］ボタンを押すと、以下のようにデータベースにレコードが追加される。


図5　変更後のCategoriesテーブル内容の一覧表示
図4での操作により「NewCategory」という行が追加されている。

　なお、AJAX Client Library for ADO.NET Data Servicesでは、サーバへのHTTPリクエストを行う際に、HTTPのContent-Typeヘッダに「application／json」が指定されているため、サーバとの通信内容はすべてJSON形式で行われている。以下は各通信の実際の内容である。

{ "d" : [{
"__metadata": {"uri": "http://localhost:4651/Northwind.svc/Categories(1)", "type": "NORTHWNDModel.Categories"},
 "CategoryID": 1, "CategoryName": "Beverages", "Description": "Soft drinks, coffees, teas, beers, and ales", "Picture": null, "Products": {"__deferred": {"uri": "http://localhost:4651/Northwind.svc/Categories(1)/Products"}}}
……中略 ……
] }
リスト7　データ参照時にサーバから受信するJSONデータの例

{"CategoryName":"NewCategory","Description":"Test Content"}
リスト8　データ追加時にサーバに送信するJSONデータの例

{ "d" : {
"__metadata": {"uri": "http://localhost:4651/Northwind.svc/Categories(24)", "type": "NORTHWNDModel.Categories"
}, "CategoryID": 24, "CategoryName": "NewCategory", "Description": "Test Content", "Picture": null, "Products": {
"__deferred": {"uri": "http://localhost:4651/Northwind.svc/Categories(24)/Products"
}}} }
リスト9　データ追加時にサーバから受信するJSONデータの例

［コラム］データの更新／削除

　本稿ではデータの取得／追加までを扱ったが、DataServiceオブジェクトのupdate／removeメソッドを使うことで、データの更新／削除も行うことができる。以下にコードの例を示す。

// Categoriesテーブルの主キーが1であるレコードを削除する。
 // コールバック関数としてcbRemoveCompleteを指定する
 northwindService.remove(null, "/Categories(1)", cbRemoveComplete);

var category = {
  CategoryName: "Modified category",
  Description: "Modified description"
};

// Categoriesテーブルの主キーが2であるレコードを
 // categoryオブジェクトで更新する。
 // コールバック関数としてcbUpdateCompleteを指定する
 northwindService.update(category, "/Categories(2)", cbUpdateComplete);
リスト10　データの更新／削除サンプル

　以上のように、AJAX Client Library for ADO.NET Data Servicesを使うことで、通信の際のHTTP動詞やデータ形式などを意識することなく、ADO.NET Data Servicesとのスムーズな連動を行うことができる。

まとめ

　ADO.NET Data Servicesを使うことで、わずかなサーバサイドのソース・コードで、データベースをRESTスタイルのWebサービスとして公開することができる。本稿のサンプルにおいても、サーバサイドのソース・コードはほとんどなく、書き換えたのは実質2行程度である。

　もちろん実際のサービスを作成する際には、どのテーブルを公開するか、アクセス権はどうするか、などを適切に設計、実装する必要がある。それでも一からWebサービスを実装する場合に比べ、コード量は格段に少なく、ソート、フィルタ、データのページングなどを持つ多機能なサービスを実現することができる。

　また、AJAXやSilverlight 2からのアクセスが容易な点も魅力的である。特にSilverlight 2については、LINQのデータソースとして使用可能であるため、ADO.NET Data Servicesで構築されたサービスをシームレスにクライアントで使用することができる。サーバサイドの.NET開発者がRIA開発に進んでいく流れにおいて、Silverlight 2 ＋ ADO.NET Data Servicesという組み合わせは強力な道具となり得るだろう。

　さて、以下の3つについて解説してきたVisual Studio 2008 SP1の新機能解説シリーズは本稿が最終回となる。

　いずれもService Packの域を超えるといってもよい、.NET Frameworkの魅力的な新機能といえるだろう。本シリーズが、これらの新機能に触れるうえでの参考となれば幸いである。End of Article

　

　INDEX
　 Visual Studio 2008 SP1新機能解説（1）
　 DBアプリをコーディングレスで構築する「ASP.NET Dynamic Data」
　   1．Dynamic Dataアプリケーションの基本
　   2．データ・モデルの作成／Global.asaxの編集
　   3．メタデータ編集によるDynamic Dataアプリケーションのカスタマイズ
　   4．自作ユーザー・コントロールの利用／ページ・テンプレートのカスタマイズ
　
　 Visual Studio 2008 SP1新機能解説（2）
　 .NETの新データアクセス・テクノロジ「ADO.NET Entity Framework」
　   1．ADO.NET Entity Framework概要
　   2．Entity Data Model（EDM）の作成と利用
　   3．EDMに対するクエリの利用方法（Entity SQL）
　   4．EDMに対するクエリの利用方法（Object Services／LINQ to Entities）
　
　 Visual Studio 2008 SP1新機能解説（3）
　 RESTスタイルのWebサービスを手軽に公開する「ADO.NET Data Services」
　   1．ADO.NET Data Services概要／対応するクライアント
　   2．サンプル − ADO.NET Data Servicesの公開
  3．ASP.NET AJAX環境のデータを取得／追加する


Insider.NET フォーラム 新着記事
  • 第2回　簡潔なコーディングのために （2017/7/26）
    　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
    　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回　明瞭なコーディングのために （2017/7/19）
    　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator （2017/7/18）
    　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日 月間
＠IT