ASP.NET AJAX 4.0を予習する（後編）

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

DataContextを利用したデータ詳細表示と更新

　次にデータの詳細画面を表示する機能を追加していきます。

詳細表示を行うDataViewコントロールの追加

　詳細画面の行が選択された際に、その詳細情報を別のパネルに表示させ詳細情報パネルで修正された情報を一覧に書き戻す処理を追加していきます。

　リスト4は詳細情報を表示するためのテンプレート定義です。

リスト4　詳細を表示するテンプレートの定義

<table id="address-template" class="sys-template">
    <tr><td>郵便番号</td><td>{binding 郵便番号}</td></tr>
    <tr><td>都道府県名</td>
        <td><input type="text" value="{binding 都道府県名}" /></td></tr>
    <tr><td>市区町村名</td>
        <td><input type="text" value="{binding 市区町村名}" /></td></tr>
    <tr><td>町域名</td>
        <td><input type="text" value="{binding 町域名}" /></td></tr>
</table>

　次にリスト5で一覧の行が選択された際に詳細側に一覧で選択されたデータを表示させるため、一覧テンプレートの選択行を詳細行にデータバインドしています。

リスト5　詳細テンプレートと一覧テンプレートを関連付ける定義

var addressTemplate = $create(Sys.UI.DataView,
                              null,　null,
                              null,　$get("address-template"));
$create(Sys.Binding, 
        { source: addressesTemplate, path: "selectedData",
          target: addressTemplate, targetProperty: "data"});

　詳細については後述しますが、一覧と詳細の項目同士が{binding ...}構文でつながっている点に注意してください。リスト5を実行し詳細画面側に表示された都道府県名などを修正すると、図4のようにテキストボックスからフォーカスが移動するタイミングで詳細とバインドされている一覧の表示が即座に切り替わり、次いで一覧とバインドされているDataContextの内容にも反映されます。ただしこの段階ではまだサーバ側のデータソースには変更がないことに注意してください。

図4　バインドされた項目同士の変化

　$createメソッドはASP.NET AJAXのクライアントコントロールを作成する関数です。

　リスト5の例では、Sys.UI.DataViewコントロールのインスタンスを作成し、その対象をaddress-templateとして定義されたtableタグに割り当てます。

　次に、Sys.Bindingクラスのインスタンスを作成し、一覧で選択されたデータ（addressTemplateのselectedDataプロパティ）と詳細に表示するデータ（addressTemplateのdataプロパティ）を関連づけています。

ライブバインディング

　ライブバインディングは、リスト1の住所の選択された一列と、リスト4の詳細の各項目のようにコントロール同士をバインドすることで、コンロール同士の値を同期する機能です。前編も少し触れましたが、ASP.NET AJAX 4.0ではWPFやSilverlightと同様に、One-Time（一度だけ）、One-Way（片方向）、Two-Way（双方向）の3つのバインディングモードが提供されています。

　表2はASP.NET AJAXで利用可能なデータバインドの種類を表します。

表2　ASP.NET AJAXで利用可能なデータバインドの種類

バインディングモード	説明
oneWay（片方向）	元となるデータの内容を自らのデータとして書き出します。元となるデータが変更された場合は再描画されます。ラベルなどの読み取り専用なタグにバインドする場合は規定のバインディングモードになります。
twoWay（双方向）	元となるデータの内容を自らのデータとして書き出します。元となるデータが変更された場合は再描画され、自らの変更を元となるデータに反映します。テキストなどの入力可能なタグとコンポーネントにバインドする場合は規定のバインディングモードになります。
oneTime（一度だけ）	初期化時に一度だけ元となるデータの内容を自らのデータとして書き出します。

　表2のようにASP.NET AJAXのデータバインドでは、バインドする先のタグやコンポーネントによってバインドモードの初期値が変化します。表3にバインディング時にバインディングモードを指定しない場合に識別されるタグの例を示します。

表3　バインディング時に識別されるタグの例

タグの種類	タグの例
読み取り専用なタグ	span, div, label ... etc
入力可能なタグ	input, select ... etc
コンポーネント	DataView