CodeZine(コードジン)

特集ページ一覧

ASP.NET AJAX 4.0を予習する(後編)

強化されたASP.NET対応のクライアントAJAXフレームワーク

  • LINEで送る
  • このエントリーをはてなブックマークに追加

目次

A. DataContextコントロールの定義

 DataContextコントロールは、WCFやASP.NET DataServiceで提供されているサービスを利用し、データの検索、トラッキング、更新を効率よく行うための機能を提供するコントロールです。

 DataContextコントロールを図2のようなモデルでデータの管理を行うことになり、Javascriptだけの場合よりもデータの変更管理が単純化されます。

 例えば、DataContextを使わずにDataViewにデータをバインドした場合、バインドしたうちどのデータに対して変更が行われたかは、プログラマが管理する必要があります。DataContextを利用する場合は、DataContextが持つデータトラッキングの機能を利用し、どのデータが変更されたかを簡単に確認できます。

 また、宣言的にデータの管理を行えるようになるためコードの見通しもよくなります。

図2 DataContextを利用したデータの表示
図2 DataContextを利用したデータの表示

 リスト1の例では、データソースとなるWebサービスのアドレスを指定しているだけですが、DataContextでは取得したデータはそれぞれが自分がオリジナルのデータなのか変更されたデータなのかといった情報や、新たなアイテムに対しGUIDを採番したりといった機能があらかじめ組み込まれているので、Javascriptでのデータ管理がかなり軽減されます。

 詳しくはMSDNのDataContextコントロールを参照ください。

B. DataViewコントロールの定義

 DataViewコントロールはDataContextやJavascriptのオブジェクトを元にテンプレートとなるオブジェクトにデータの表示を行ったり、画面で発生したイベントの処理を行ったりする機能を持ちます。

 図2で示したように、DataViewコントロールはDataContextコントロールやAdoNetDataContextなどのIDataProviderインターフェースを実装したクラスからデータをfetchDataメソッドを利用してDataプロパティに供給したり、JSONやArrayといった一般的なJavascriptのオブジェクトを直にDataプロパティに設定することでテンプレートを構築できます。

図3 DataViewのテンプレートに対する処理
図3 DataViewのテンプレートに対する処理

 リスト1の例では、DataProviderにどのDataContextを利用するか、初期化後のコントロールの見た目、行が選択された場合にどんなイベントやスタイルを適用するかなどを設定しています。表1にDataViewコントロールの代表的なプロパティとメソッドをあげます。詳しくはDataViewコントロールを参照ください。

表1 DataViewコントロールの概要(抜粋)
分類 プロパティ/メソッド名 説明
取得系 fetchOperation DataProviderプロパティに設定したプロバイダーを利用して、データの取得を行うためのメソッド名を設定します。
fetchParameters fetchOperationプロパティに設定したメソッドに与えるパラメータの一覧を設定します。
fetchData() データソースに対し、fetchOperationプロパティに設定したメソッドを実行してデータの取得を行います。
更新系 saveOperation DataProviderプロパティに設定したプロバイダーを利用して、データの更新を行うためのメソッド名を設定します。
saveParameters saveOperationプロパティに設定したメソッドに与えるパラメータの一覧を設定します。
saveData() データソースに対し、saveOperationプロパティに設定したメソッドを実行してデータの更新を行います。
表示の管理 autoFetch 画面の読み込み時に自動的にデータを取得する場合にTrueを設定します。
dataProvider データを操作するデータプロバイダーを設定します。
selectedData 現在選択中のデータアイテムを取得、または設定します。
selectedIndex 現在選択中のデータインデックスを取得、または設定します。

C. 検索ボタンクリック時の動作を定義

 ボタンがクリックされた際に、テキストボックスに入力された郵便番号を元に検索を行います。

 WebServiceは検索用にリスト2のインターフェースを公開しているため、fetchOperationにメソッド名を、fetchParametersに引数の一覧を渡すように定義し、WebServiceに問い合わせをするためにfetchDataメソッドを呼び出します。

リスト2 WebServiceが公開している検索メソッド
[OperationContract]
public List<SampleTableModel.住所> 住所検索(string 郵便番号)

 今回はfetchDataメソッドには何の引数も指定していませんが、サービスへのフェッチ要求が成功した場合と失敗した場合のコールバックを指定することもできます。リスト3はfetchDataメソッドが失敗した場合には失敗した原因を表示し、成功した場合には取得した件数を表示する例です。詳しくはMSDNのfetchDataメソッドを確認してください。

リスト3 fetchData時に成功時と失敗時のイベントハンドラーを設定した例
t.fetchData(
function(result) { 
  // データ取得成功時のイベントハンドラー
  alert(String.format("取得件数={0}", result.length));
},
function(result) {
  // データ取得失敗時のイベントハンドラー
  alert(result.get_message());
});   

イベントバブリング

 リスト1の例で行を選択した際のイベントがDataViewで処理されることを不思議に思いませんでしたか? これは、ASP.NET AJAX 4.0のコマンドバブリングを利用して実現しています。

 イベントバブリングはDOM階層を下から上にイベントが浮き上がっていく機能です。

 ASP.NET AJAXのコマンドバブリングを利用すると、どんなコマンド名でイベントが発生したのか、実際に処理を行っているオブジェクトは何なのかなどの情報が簡単に取れるため通常のJavascriptのイベントバブリングよりも扱いやすくなっています。

 リストの中の子要素の処理を親要素側で処理させたい時などに利用すると便利です。

 DataViewコントロールは標準で"select"コマンドに対する処理が定義されているため少し動きが分かりにくいかもしれませんが、例えばcommand="update"のようなコマンドを用意し、DataViewコントロールのonCommandイベントハンドラーでサーバへの更新処理を実装するといったコーディングを行うこともできます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ASP.NET AJAX 4.0 プレビュー

著者プロフィール

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト かるあ (杉山 洋一)(カルア(スギヤマ ヨウイチ))

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

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5