SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ASP.NET 3.5 Extensions + ASP.NET MVCフレームワーク

ADO.NET Data ServicesでRESTfulなサービスを実現する

ASP.NET 3.5 Extensions + ASP.NET MVCフレームワーク(4)


  • X ポスト
  • このエントリーをはてなブックマークに追加

JavaScriptファイルからADO.NET Data Servicesにアクセスする

 続いて、JavaScriptファイルからData Servicesにアクセスする方法について解説します。DataServicesHostプロジェクト上のDefault.aspxファイルはまだ未着手状態なので、そこにScriptManagerコントロールを配置します。コントロールの配備はこれだけです。

 Data ServicesにアクセスするためのJavaScriptファイルとしてCodePlexに、AJAX Client Library for ADO.NET Data Servicesというライブラリが公開されています。こちらをダウンロードし、展開したフォルダ内に格納されている「DataService.js/DataService.debug.js」をプロジェクト内に追加します。

 ここで、簡単にですが、AJAX Client Library for ADO.NET Data Services(以下、AJAXクライアント ライブラリ)について解説します。AJAXクライアント ライブラリはクライアントページとData Servicesに対する橋渡しの機能が詰まったクラスが提供されています。大別すると以下の4つのクラスがあります。

AJAX Client Library for ADO.NET Data Servicesのクラスと概要
クラス 概要
ActionResult Data Servicesに対する操作結果の表示
ActionSequence Data Servicesに対する複数の操作を行うためのオブジェクトを生成
DataService Data Servicesに対する操作を行うためのオブジェクトを生成
DataServiceError Data Servicesからのエラーを渡す

 通常利用する場合には、DataServiceクラスの利用が多くなると思います。DataServiceクラスは次のメソッドを持っています。

DataServiceクラスのメソッドと機能
メソッド 機能
query Data Servicesのデータを取得
update Data Servicesのデータを更新
insert Data Servicesのデータを作成
remove Data Servicesのデータを削除

 AJAXクライアント ライブラリは、現在はCodePlex上でのみの配布となっていますが、どうやらASP.NET AJAX 4.0からは標準搭載となるようです。現在CodePlex上で配布されているASP.NET AJAX 4.0 Preview 3では''ASP.NET Library for ADO.NET Data Services''という名称で格納されています。また、ASP.NET AJAX 4.0のDataViewコントロールという新コントロールにJavaScriptファイルから直接バインディングもできるようになるようです。つまり、今後ASP.NETとData Servicesは、より密な連携ができるようになるでしょう。

 サンプルの作成に戻ります。一通りの準備が完了しているので、実際にJavaScriptファイルからData Servicesにアクセスしてみましょう。実行結果は図11のようになります。

図11 実行直後の画面
図11 実行直後の画面

 また、実行時にロギングツールWeb Development Helperを利用してロギングしたHTTPヘッダーは図12に、レスポンスコンテキストは図13になります。

図12 Data Servicesへのアクセス時のロギング結果画面1
図12 Data Servicesへのアクセス時のロギング結果画面1
図13 Data Servicesへのアクセス時のロギング結果画面2
図13 Data Servicesへのアクセス時のロギング結果画面2
AJAXクライアント ライブラリのリクエスト

 AJAXクライアント ライブラリはサーバへのHTTPリクエスト時に、Content-Typeヘッダを''application/json''を指定しているので、通信はJSON形式で行われています。

    <script type="text/javascript">
        // (1)
        // ページロード時のイベント
        function pageLoad() {
            // アドレスを設定してDataServiceオブジェクトの生成
            pubsService = new Sys.Data.DataService("/PubsAstoria.svc");
            // titlesエンティティの読み込みと成功/失敗時のイベント設定
            pubsService.query("titles", OnSuccess, OnFailure);
        }
        
        // (2)
        // titlesエンティティ読み込み成功時イベント
        function OnSuccess(result, context, operation) {
        // StringBuilderクラスを使ってテーブルを生成
        var Builder = new Sys.StringBuilder(); 
        Builder.append("<table cellpadding=3 cellspacing =2 border =2>");
        Builder.append("<th>TitleID</th>");
        Builder.append("<th>Title</th>");
        Builder.append("<th>Type</th>");
        Builder.append("<th>Price</th>");
        Builder.append("<th>Notes</th>");
        // 取得したレコード分テーブル行を出力
        for (num in result) {
            var titles = result[num]; 
            Builder.append("<tr><td>");
            Builder.append(titles.title_id);
            Builder.append("</td><td>");
            Builder.append(titles.title);
            Builder.append("</td><td>");
            Builder.append(titles.type);
            Builder.append("</td><td>");
            Builder.append(titles.price);
            Builder.append("</td><td>");
            Builder.append(titles.notes);
            Builder.append("</td></tr>");
        }
        Builder.append("</table>");
        // divタグに生成したテーブルを注入する
        $get("titlestable").innerHTML = Builder.toString(); 
    }

    // (3)
    // titlesエンティティ読み込み失敗時イベント
    function OnFailure(error, context, operation) {
            // エラー表示Spanタグの取得
            var span = $get("ErrorMessage");
            // エラーメッセージにサーバー側から渡された情報を設定
            span.innerHTML = BuildErrorString(operation);
            // Spanタグを表示設定に変更
            span.style.display = "inline";
        }
    </script>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/DataService.js"   />
        </Scripts>
    </asp:ScriptManager>
      <div id="titlestable"></div>
      <span id="ErrorMessage" style="display:none;"></span>
      </form>

 HTMLフォーム側では、ScriptManagerコントロールに、DataService.jsを参照設定している他、divタグ、spanタグにそれぞれIDを設定し、spanタグは非表示設定にしています。

 JavaScript側の設定は長いので、コメント欄に記述した番号順に解説します。

 (1)では、ページロード時に呼ばれるイベントとして、Data Servicesのアドレスを設定してオブジェクトを生成しています。そして、queryメソッドを使い、第一パラメータに設定した''titles''エンティティの取得を行い、第二・三パラメータで、それぞれ成功時、失敗時のイベントを設定しています。

 (2)では、titlesエンティティの取得が成功した場合のイベント処理が記述されています。成功時の戻り値はJSON形式となっています。そこで、文字列整形にMicrosoft AJAX LibraryのSys.StringBuilderクラスのappendメソッドを使い、文字列を追加していくことでテーブルを成形しています。今回は全ての項目ではなく、TitleID/Title/Type/Price/Notes5つの項目を表示するテーブルです。ポイントはヘッダー以外のデータが含まれている行をfor文で繰り返し出力している点です。最後は整形したテーブルを挿入しています。

 (3)では、titlesエンティティの取得が失敗した場合のイベント処理の記述ですが、第三戻り値にサーバー側のエラーメッセージが渡されるので、それをSpanタグに設定し、表示を非表示から表示似変更しています。

 .NETのクライアント ライブラリ程簡単ではありませんが、JavaScriptからもData Servicesにアクセスすることが確認できたかと思います。

まとめ

 Data Servicesは.NET開発者の大半が利用していたSOAP形式のサービスから、REST形式なサービスへと変換させる大きなテクノロジであることがお分かり頂けたかと思います。

 サービス自体はシンプルに作成できます。アクセス権、公開するテーブルなどはアプリケーションによって設定が変わりますが、それでも従来のSOAP形式のサービスよりも簡単に作成できます。

 つまりData Servicesは、いかにしてそのサービスを利用するのかがポイントになってくるかと思いますが、多分Data Servicesの利用者のほとんどが.NETアプリケーションと連携して利用すると思うので、本稿が参考になれば幸いです。

 また、クライアント ライブラリと、LINQ to ADO.NET Data Servicesを利用したデータの検索・追加・更新・削除は、結局のところはData Servicesを経由してEDMに対してクエリを行っていることを確認できました。Dynamic Dataもそうですが、SP1で追加された機能は基本的にEntity Frameworkに深く依存しています。V2.0では大きく改良されるかと思いますが、PDC 2008で公開されたサービスの一部もData Servicesを利用しているので将来を見据えて早い段階からData Servicesを活用することをお勧めします。

 次回で本連載はひとまず終了です。最終回はVS2008 SP1で追加されたScriptManagerコントロールの新機能と、11月にリリースされたASP.NET for Silverlightコントロールについて解説します。お楽しみに。

参考文献

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ASP.NET 3.5 Extensions + ASP.NET MVCフレームワーク連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト ナオキ(ナオキ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3463 2009/06/23 10:42

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング