A. DataContextコントロールの定義
DataContextコントロールは、WCFやASP.NET DataServiceで提供されているサービスを利用し、データの検索、トラッキング、更新を効率よく行うための機能を提供するコントロールです。
DataContextコントロールを図2のようなモデルでデータの管理を行うことになり、Javascriptだけの場合よりもデータの変更管理が単純化されます。
例えば、DataContextを使わずにDataViewにデータをバインドした場合、バインドしたうちどのデータに対して変更が行われたかは、プログラマが管理する必要があります。DataContextを利用する場合は、DataContextが持つデータトラッキングの機能を利用し、どのデータが変更されたかを簡単に確認できます。
また、宣言的にデータの管理を行えるようになるためコードの見通しもよくなります。
リスト1の例では、データソースとなるWebサービスのアドレスを指定しているだけですが、DataContextでは取得したデータはそれぞれが自分がオリジナルのデータなのか変更されたデータなのかといった情報や、新たなアイテムに対しGUIDを採番したりといった機能があらかじめ組み込まれているので、Javascriptでのデータ管理がかなり軽減されます。
詳しくはMSDNのDataContextコントロールを参照ください。
B. DataViewコントロールの定義
DataViewコントロールはDataContextやJavascriptのオブジェクトを元にテンプレートとなるオブジェクトにデータの表示を行ったり、画面で発生したイベントの処理を行ったりする機能を持ちます。
図2で示したように、DataViewコントロールはDataContextコントロールやAdoNetDataContextなどのIDataProviderインターフェースを実装したクラスからデータをfetchDataメソッドを利用してDataプロパティに供給したり、JSONやArrayといった一般的なJavascriptのオブジェクトを直にDataプロパティに設定することでテンプレートを構築できます。
リスト1の例では、DataProviderにどのDataContextを利用するか、初期化後のコントロールの見た目、行が選択された場合にどんなイベントやスタイルを適用するかなどを設定しています。表1にDataViewコントロールの代表的なプロパティとメソッドをあげます。詳しくは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メソッドを呼び出します。
[OperationContract] public List<SampleTableModel.住所> 住所検索(string 郵便番号)
今回はfetchDataメソッドには何の引数も指定していませんが、サービスへのフェッチ要求が成功した場合と失敗した場合のコールバックを指定することもできます。リスト3はfetchDataメソッドが失敗した場合には失敗した原因を表示し、成功した場合には取得した件数を表示する例です。詳しくはMSDNの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イベントハンドラーでサーバへの更新処理を実装するといったコーディングを行うこともできます。
