Cutting Edge

[アーティクル]
06/12/2015

ASP.NET AJAX 4.0 におけるデータバインド

Dino Esposito

単刀直入に言いましょう。AJAX が機能するのは、強力な JavaScript エンジンがあり、このエンジンがクライアントブラウザー内で実行されていて、高度な非同期機能の基盤が提供されている場合だけです。現在 ASP.NET 3.5 Service Pack 1 に組み込まれている JavaScript ライブラリは、このようなライブラリを提供する試みとして必要ですが、まだまだ不十分です。もっと強力な ASP.NET AJAX プラットフォームが必要です。この強力なプラットフォームが、まもなく ASP.NET AJAX 4.0 の一部として導入されます。

抽象的に表現すると、AJAX ベースのフロントエンドとは、豊富な UI 機能となんらかのアプリケーションロジックの実装とを組み合わせたプレゼンテーション層です。このアプリケーションロジックは、実質的には、設計段階や分析段階に考案されたユースケース図をすべて実現する分離コードです。アプリケーションロジックでは、アプリケーションの動作と、ユーザーがシステム全体を操作する方法を想定して表現します。

少なくとも従来の Web フロントエンドやスマートクライアントフロントエンドと比べて AJAX フロントエンドが独特なのは、豊富な機能を実現するユーザーエクスペリエンス要素と低レベルのプログラミングツールを組み合わせて使用しなければならないというニーズに応える必要がある点です。AJAX フロントエンドはクライアントのブラウザー内部で実行されるため、ユーザーインターフェイスの生成は HTML に依存するしかありません。さらに、特殊効果、ドラッグアンドドロップ、非同期データ取得、部分更新などにより表示要素に工夫を加えるには JavaScript に頼るしかありません。

このようなニーズを満たすため、最新の効果的な AJAX プラットフォームには 2 つの重要な機能が備わっている必要があります。まず、開発者は、アドホックなサーバーモジュールの HTTP ファサードへの非同期呼び出しを実行できなければなりません。次に、受け取ったデータをそのまま既存のページのドキュメントオブジェクトモデル (DOM) に組み込めなければなりません。しかし、どちらの機能も、実装方法が難しく、効率が悪ければ、本来の魅力の大半が失われてしまいます。

ASP.NET 3.5 Service Pack 1 には、HTTP ベースの Web サービス層に非同期接続するための強力かつ信頼性の高い API が備わっています。ASP.NET AJAX 3.5 を使用すると、おおむね簡単に、クライアントページから Web サービスを参照できます。Web サービスを参照するときに、サービスコントラクトを正確に反映する JavaScript プロキシクラスもフレームワークによって自動的に生成されます。既存の AJAX フレームワークの機能により、サーバーでもクライアントでも、開発者がデータのシリアル化について細かく意識する必要がありません。JavaScript 開発者から見れば、(生成元が同じ既知のポリシーに従っている) リモート Web サービスは、メソッドを通じて動作を公開しているローカル JavaScript オブジェクトと変わりありません。

ASP.NET 3.5 Service Pack 1 では、ユーザーインターフェイスの構築に関する限り、データのシリアル化ほどのメリットはありません。サーバーからデータをそのまま取得するのは非常に簡単ですが、この未加工のデータをユーザーインターフェイスに表示する優れたインターフェイスはほとんどありません。ASP.NET 3.5 Service Pack 1 の AJAX サポートの主な弱点は、クライアント側のデータバインド用の効果的なツールと HTML テンプレートが不足していることです。だからこそ、クライアント側のテンプレートレンダリング用エンジンとカスタムデータバインド構文は、ASP.NET AJAX 4.0 の最も魅力的な機能だと言えます。

今回のコラムでは、ASP.NET AJAX 4.0 でのサポートに基づいて、実際の AJAX 開発における重要な概念について説明します。ここでは、主にクライアント側のテンプレートとデータバインドに重点を置いて説明しますが、ADO.NET Data Services プロキシクラスやプログラミング機能など、その他の長所についても触れます。

実際の AJAX 開発における重要な概念

実際の AJAX 開発は、Web 上に豊富な機能を備えたユーザーインターフェイスを構築することが目的です。そのため、アプリケーションの新しい設計パターンが必要になり、新しいプログラミングツールを採用する必要があります。

Web ユーザーインターフェイスは、長い間、操作性や応答性の点で、デスクトップユーザーインターフェイスに完全に遅れを取っていました。Web 開発者はこれまで、予測フェッチ、キャッシュ、リモートタスクの監視、状況依存の詳細表示、サブビュー、UI の部分的な無効化、モダリティなど、多くの UI パターンやプログラミング機能を (Web 開発者の仕事には無関係なものとして) ただ無視するしかありませんでした。

従来の Web 開発では、ユーザーインターフェイスの構築は完全にサーバー側に委任され、事実上、サーバー側のデータバインドとアドホックなコントロールを使用して実装されてきました。しかし、AJAX パラダイムの登場により、この手法は時代遅れになり、増え続けるアプリケーションにとっては魅力的なものではなくなりました。

とは言え、データバインドは、AJAX プログラミングモデルでも見過ごせないほど強力な機能です。また、コードの複雑さがあるしきい値を超えると、オブジェクト指向も避けて通ることはできなくなります。同時に、Web アプリケーションには、少ないフットプリント、キャッシュ可能なダウンロード、豊富な機能といった非常に独特な組み合せも依然として必要です。

実際の AJAX 開発の過程では、JavaScript ライブラリがプログラミング機能を強化するための唯一コストがかからない方法です。JavaScript ライブラリを使えば、非オブジェクト指向言語でのオブジェクト指向の基盤や、機能豊富な市販の UI ウィジェットを提供でき、事実上、クライアント側だけでデータバインドのコードを作成できるプログラミングツールを提供できます。

クライアント側でのデータバインド向けの強力なモデルがなければ、実際の AJAX 開発向けの強力なプラットフォームは実現できません。

クライアント側でのデータバインドの要件

データバインド機能の実装には、2 つの基本パターンがあります。1 つは HTML メッセージパターンで、もう 1 つはブラウザー側テンプレートパターンです。HTML メッセージパターンでは、すぐに表示できる構成済みの HTML マークアップを返すコンポーネントに対してリモートサービス呼び出しを行います。ブラウザー側テンプレートパターンでは、データをそのままダウンロードし、クライアントでのレンダリング方法を決定するようにシステムを設定するだけです。

HTML メッセージパターンは、洗練された部分レンダリングに似ていますが、ビューステートを必要としない点、および同じアプリケーションで行われる他のポストバック操作に制限されない自立した操作として構成できる点が異なります。HTML メッセージパターンの実装では、すべての操作がサーバーで実行されます。つまり、すべてのデータバインドは基本的に従来のサーバー側データバインドの一種であり、DataGrid、ListView などのコントロールや、取得したデータのマネージコンテナーが関与します。

HTML メッセージパターンは、ASP.NET 3.5 で提供されているツールで簡単に実装できます。クライアントで必要なのは、返されたマークアップをページの DOM にバインドすることだけです。次のコードは、コーディングの観点から見て実際に必要なことを示しています。

grid.innerHTML = markup;

この例の grid は、マークアップ (通常は DIV タグ) を含む HTML 要素を示しています。一方、markup という変数は、サービスメソッド呼び出しの応答として返される、任意の HTML ブロックを示します。

もちろん、HTML メッセージパターンの実装に使用するサービスには、返されるデータを取得または計算するロジックと、データの形式を HTML に変換するために必要なすべてのロジックを両方組み込む必要があります。

一般に、HTML メッセージパターンに基づくソリューションでは、リモートメソッド呼び出しごとの応答の平均サイズが増加するにつれて、必要な帯域幅も増加します。

ブラウザー側テンプレート (BST) パターンでは、クライアント側でのコーディング量が増えますが、柔軟性と帯域幅の最適化の両方について適切な成果が得られる可能性があります。BST パターンでは、データを取得するためにリモート呼び出しを行う、という考え方に基づきます。その呼び出しの結果として、JavaScript で操作可能な形式で、データがクライアントにダウンロードされます。最後に、データが既存のページの DOM と結合され、必要とする複雑なインターフェイスが生成されます。

AJAX パラダイムの威力は、ユーザーインターフェイスのごく一部を非同期に更新できることだと表現されているのを数多く目にしますが、これは誤りです。(銀行口座の現在残高などの) スカラー値を非同期に取得し、既存のページの DOM にその値を挿入することもその威力の 1 つです。これは、データが頻繁に変更され、そのデータの表示にグリッド状のインフラストラクチャを必要とするようなデータの配列を非同期に更新することとはまったく別の処理です。

次に示すように、サーバー側の処理はサーバーコントロールを使えば簡単です。

Collection<StockInfo> stocks = GetLatestQuotes(...);
DataGrid1.DataSource = stocks;
DataGrid1.DataBind();

このコードと同じ処理をクライアント側のコードで実現するにはどのようにすればよいでしょう。最初の部分は、ASP.NET 3.5 の機能に簡単に対応付けることができます。次のように、最新の値を取得できるリモートサービスのクライアントプロキシのインスタンスを作成して使用するだけです。

var service = new Samples.Services.FinanceService();
var stocks = service.GetLatestQuotes(...);

stocks 変数は、オブジェクトの JavaScript 配列で、受信したデータを表します。この未加工データのブロックを既存の HTML レイアウトに収めるにはどうすればよいでしょう。ここで役立つのが BST パターンです。BST パターンでは、HTML テンプレートと関連データのプレースホルダーに関する独自の構文、実際のデータをプレースホルダーにバインドする独自の構文、テンプレートとデータを受け取り、更新されたマークアップを作成する HTML ファクトリ、および管理しやすいプログラミングインターフェイスを提供しながらすべてを結合するグルーコードを規定する必要があります。

ASP.NET AJAX 4.0 には、BST パターンの実装が既定で付属しています。ASP.NET AJAX テンプレートの基盤は、MicrosoftAjaxTemplates.js ファイルで定義されています。ScriptManager コントロール (マスターページを使用している場合は ScriptManagerProxy コントロール) を使用して、このファイルを参照する必要があります。ASP.NET MVC を使用している場合や、従来の <script> タグを使用してスクリプトファイルを参照する場合は、事前に MicrosoftAjax.js への参照も追加しておく必要があります。

HTML テンプレートの構文

数年にわたる ASP.NET プログラミングの結果として、HTML テンプレートは、データから Web ユーザーインターフェイスを作成するための優れた手段であることが、合理的疑いの余地なく実証されています。HTML テンプレートとは、リテラル、ASP.NET コントロール、およびデータをバインドするためのプレースホルダーを含む HTML です。HTML テンプレートは、アドホックエンジンによって未加工のデータがバインドされ、処理されることで、ブラウザー向けのプレーンな HTML に変換されてレンダリングされます。テンプレートは、データをバインドし、表示するマークアップのブロックを生成するために存在し、バインドが行われるまで表示されません。

説明すると比較的簡単ですが、HTML テンプレートを実際の AJAX フレームワークに実装するのはかなり困難です。Prototype.js など、おなじみのライブラリを使用して、HTML テンプレートを形式化する試みがいくつか行われています。HTML テンプレートに求める機能については共通の合意が得られていますが、ブラウザーでの HTML テンプレートの定義に関する共通モデルはまだ存在しません。

テンプレートでは、XHTML 準拠のマークアップを表示できなければなりません。基盤となるレンダリングエンジンでは、できる限り迅速にテンプレートを処理する必要があり、アプリケーションの応答が遅れているとユーザーが感じないうちに、マークアップの大部分をレンダリングできなければなりません。テンプレートでは、読みやすく非常に簡単なバインド構文をサポートする必要がありますが、単純さだけを求めないことも必要です。テンプレートではマークアップとコードを混在できるべきです。テンプレートのレンダリングのトリガーとなるコードは宣言型で、あまり煩雑ではないのが理想です。

では、ASP.NET AJAX 4.0 でサポートされる HTML テンプレートモデルの特徴を確認しましょう。

ASP.NET AJAX 4.0 では、HTML テンプレートは DIV タグ (つまり、任意のコンテナータグ) で、以下のように sys-template クラス属性で修飾されます。

<div>
<ul id="MyItem" class="sys-template">
       <li>
         {{ Symbol }}, {{ Quote }}, {{ Change }}
       </li>
</ul>
</div>

sys-template CSS クラスは、要素とそのコンテンツが最初は表示されないことを示す規約です。sys-template は、マスターページまたはすべてのページで、次のように明示的に定義する必要があります。

<style type="text/css">
.sys-template { display:none; visibility:hidden; }
</style>

テンプレートがレンダリングされるときに、データコンテキストが提供されるため、テンプレートの本文では、データコンテキストオブジェクトのパブリックフィールドとプロパティへのバインドをホストできます。同様に、テンプレートの任意の要素で、文字列に評価される任意の JavaScript 式を参照できます。

データバインドの構文

テンプレートのプレースホルダーと外部データとのバインドを表記する構文は、次のとおりです。

{{ expression }}

前述のとおり、この expression にはデータコンテキストオブジェクトのパブリックメンバー名、または文字列を返す JavaScript 式を使用できます。このような表記は、テンプレートの任意の箇所に記述でき、以下に示すように属性への値の代入に使用することもできます。

<div>
  <ul id="MyItem" class="sys-template">
     <li>
       <asp:Label runat="server"
            Text="{{CompanyName}}" />
     </li>
  </ul>
</div>

HTML テンプレートは、プレーンな HTML リテラルだけで構成しなくてもかまいません。ASP.NET のマークアップも使用できます。上記のコードであれば、Label コントロールから出力されるマークアップは以下のようになります。

<span>{{ CompanyName }}</span>

このように、サーバーコントロールをページのソースコードで使用しても、テンプレートのクライアント側でのレンダリング機能は低下しません。

クライアントイベントは、おなじみの onXXX 構文を使用するか、Microsoft AJAX Library の $addHandler 関数を使用して、テンプレート内で定義できます。

DataView コントロールとテンプレートインスタンスの作成

データを表示するには、テンプレートのインスタンスを作成し、データにバインドして、コンテナー内でレンダリングする必要があります。Sys.UI.DataView コントロールを使用すると、このような処理全体を自動化し、簡略化できます。

基本的に DataView コントロールは、入力データと ASP.NET AJAX テンプレートを受け取って、ページ内に表示される HTML マークアップを作成するコンポーネントです。DataView は、ビヘイビアコンポーネントとも呼ばれます。一般に、ビヘイビアとは、スクリプトベースのコンポーネントで、DOM 要素にアタッチされると、クライアントブラウザーでの HTML 要素の機能方法を変化させます。ビヘイビアを操作する方法は、2 とおりあります。宣言によってビヘイビアを目的の DOM 要素にアタッチする方法と、ビヘイビアのインスタンスを作成してプログラムから構成する方法です。プログラムから構成する場合、ビヘイビアとテンプレートの関連付けは構成の一部にすぎません。では、まず宣言型の方法から見ていきましょう。

ただし、説明を続ける前に、DataView はビヘイビアコンポーネントの 1 つでしかないことをはっきりさせておきましょう。宣言型のインスタンス作成とアタッチに関してこれから説明する内容は、ASP.NET AJAX で実行する可能性のあるすべてのビヘイビアに適用されます。

図 1 実行中の DataView ビヘイビア

宣言によるビヘイビアのアタッチ

ビヘイビアを DOM 要素にアタッチするには、sys:attach カスタム属性を使用します。ご覧のように、属性は名前空間 URI に関連付けられ、この URI によって XHTML に準拠になります。sys プレフィックスは、次のように <body> 要素内で宣言します。

<body xmlns:sys="javascript:Sys" ...>

sys プレフィックスは、Microsoft AJAX Library で定義されている javascript:Sys 名前空間 URI にマップされます。sys:attach 属性を使用することには、既存のビヘイビアと HTML 要素の関連付けを確立する目的しかありません。ビヘイビアコンポーネントのインスタンスは、依然として作成する必要があります。インスタンスを作成するには、<body> 要素内で別のカスタム名前空間付きの属性を定義します。属性の値では、インスタンス作成対象の JavaScript オブジェクトを参照します。

<body xmlns:sys="javascript:Sys"
      xmlns:dataview="javascript:Sys.UI.DataView" ...>

属性名 (上記のコードでは dataview) は、任意の値に設定でき、どのような値に変更してもかまいません。ただし、どのような名前を付けたとしても、残りのコードでは同じ名前でビヘイビアを参照しなければなりません。

アタッチされたスクリプトビヘイビアのインスタンスが事実上作成されるのは、ページが読み込まれて DOM 要素が処理されるときです。ページを読み込むブラウザーには、このようなライブラリで定義されたビヘイビアの処理方法がまったく認識されないことがあります。こうした独自のビヘイビアのインスタンスを作成するのは、最終的には ASP.NET AJAX フレームワークです。ただし、そのためには、ASP.NET AJAX フレームワークにアドホックな指示を出す必要があります。具体的には、DOM の解析処理中にフレームワークを開始し、フレームワークが解析対象の要素のコンテンツを参照して sys:attach 属性を処理します。

図 2 DataView オブジェクトのプログラムによる制御

<script type="text/javascript">

// Define a global instance of the DataView
var theDataView = null;

// This function can be called from anywhere in the page to
// fill the template with passed data and update the page.
function renderTemplate(dataSource) 
{
    // Ensure we have just one copy of the DataView.
    // The DataView's constructor gets a DOM reference to the template.
    if (theDataView === null)
        theDataView = new Sys.UI.DataView($get("MyTemplate"));

    // Bind data to the template associated with the DataView
    theDataView.set_data(dataSource);

    // Force the template to render 
    theDataView.refresh();
}

</script>

パフォーマンス上の理由から、ASP.NET AJAX フレームワークは、ブラウザーでの解析中に見つかった DOM 要素を自動的に処理するようには設計されていません。したがって、アタッチされているビヘイビアのうち、宣言型のインスタンス作成をサポートするビヘイビアをスキャンする必要がある DOM 要素を明示的に示すのは開発者の役割です。宣言型のインスタンス作成を行うビヘイビアを保持できる DOM 要素を示すには、sys:activate 属性を使用します。次のように <body> 要素内でこの属性を使用して、要素 ID のコンマ区切りのリストを設定します。

<body xmlns:sys="javascript:Sys"
      xmlns:dataview="javascript:Sys.UI.DataView"
      sys:activate="customerList">

上記のコードでは、customerList DOM 要素にアタッチされる可能性があるすべてのビヘイビアのインスタンスを自動作成するよう、フレームワークに指示しています。

また、ドキュメント全体を対象にする場合は、ワイルドカード記号 (*) も使用できます。このオプションを使用すると、レンダリングに遅延が生じることがあるため、大規模なページでは特に注意が必要です。DataViewビヘイビアを <body> 要素内で完全に構成したら、残りの作業は次のように最新のデータをテンプレートにバインドすることだけです。

<div id="customerList">
    <ul class="sys-template"
        sys:attach="dataview"
        dataview:data="{{ theCustomers }}">
        <li>
            <span ><b>{{ ID }}</b></span>
            <asp:label runat="server"
                 Text="{{ CompanyName }}"></asp:label>
        </li>
    </ul>
</div>

DataView コンポーネントには、豊富なプログラミングインターフェイスが用意されています。中でも data プロパティが有用です。data プロパティは、バインドされるテンプレートのデータコンテキストを表します。data プロパティは、宣言型でもプログラムからでも設定できます。次のコードでは、宣言によって data プロパティを theCustomers というグローバル配列のコンテンツに設定しています。

<ul class="sys-template"
    sys:attach="dataview"
    dataview:data="{{ theCustomers }}">
...
</ul>

一般に、バインド可能なオブジェクトまたはオブジェクトの配列に評価される JavaScript 式であれば、すべて data プロパティに設定できます。テンプレートをグローバルデータにバインドする場合は宣言型の方法を使用します。

"A Sample Page Using Declarative Binding" (宣言型のバインドを使用したサンプルページ) というコードダウンロードサンプルは、サンプルページのコード全体を示しています。図 1 に、動作中のサンプルページを示します。

プログラムからバインドするには、DataView オブジェクトへの参照を取得して、data プロパティの setter メソッドを呼び出す必要があります。DataView のインスタンスは、Microsoft AJAX Library で定義されている $find ヘルパーを使用して取得します。DataView コンポーネントの ID は、アタッチ先の DOM 要素の ID に一致します。次のコードについて考えてみましょう。

<ul class="sys-template"
    sys:attach="dataview"
    id="DataView1">
...
</ul>
<input type="button"
       value="Perform binding"
       onclick="bind()" />

データバインドを実行できるのは、ユーザーが明示的にボタンをクリックしたときだけです。bind という JavaScript 関数に記述する必要があるコードを以下に示します。

<script type="text/javascript">
    function bind() {
        theDataView = $find("DataView1");
        theDataView.set_data(theCustomers);
    }
</script>

まず ID を使用して DataView のインスタンスを取得し、次に data プロパティに新しいコンテンツを割り当てます。

マスターページのヒント

マスターページを使用するときは、通常、ページテンプレートの <body> タグをマスターに残します。その後、マスターページを編集して、必要なビヘイビアをアタッチする必要があります。または、<body> タグをコンテンツプレースホルダー内に配置して、コンテンツページ内でこのタグを開発者に明示的に設定させます。

<body> タグは、DataView などのアタッチ可能なビヘイビアを登録し、sys:activate 属性を使用して DOM 要素がビヘイビアを認識してインスタンスを作成できるようにするうえで必要です。

<body> タグを編集する方法は他にもあります。次のように、ScriptManager コントロールの新しい ClientElementsToActivate プロパティを使用できます。

<asp:ScriptManager runat="server"
                   ID="ScriptManagerProxy1"
                   ClientElementsToActivate="*">
    <Scripts>
        <asp:ScriptReference Name="MicrosoftAjaxTemplates.js" />           
    </Scripts>
    ...
</asp:ScriptManager>

ScriptManagerProxy コントロールに正確に反映されるのは、ScriptManager コントロールで定義されているプロパティのごく一部だけです。ScriptManagerProxy コントロールは、コンテンツページで ScriptManager 機能を複製するために使用するラッパーコントロールです。ただし、ASP.NET 4.0 では、ClientElementsToActivate プロパティは両方のコントロールにアクセスできる数少ないプロパティの 1 つです。

ClientElementsToActivate のような文字列配列のプロパティが、どのようにして ASP.NET AJAX フレームワークなどの JavaScript フレームワークのビヘイビアに影響を与えるのか、疑問に思う方もいるでしょう。ClientElementsToActivate プロパティが設定されると、ScriptManager コントロールによってページ内に追加のスクリプト行が生成されます。このスクリプトでは、1 行以上のエントリを Microsoft AJAX Library にある Sys.Application オブジェクトの内部配列に追加します。

プログラムからの DataView コントロールの使用

ここまでは、HTML テンプレートを DataView のビヘイビアにアタッチして、レイアウトとデータを新しい HTML にまとめるシナリオを調べてきました。クライアント側のデータバインドを実行する方法は、これだけではありません。

プログラムから DataView コンポーネントのインスタンスを作成して、使用するテンプレートを引数として渡すこともできます。図 2 に、簡単ながらもわかりやすいコード例を示します。

DataView のコンストラクターは、テンプレートへの DOM 参照を受け取って、内部で使用します。data プロパティの setter メソッドは、最新のデータを取得してバインドします。最後に、refresh メソッドで、新しくバインドされたデータを表示する HTML テンプレートを更新します。

DataView のインスタンスを作成するには、次に示すように、$create ヘルパーメソッドを利用することもできます。

<script type="text/javascript">
function pageLoad() {
$create(
       Sys.UI.DataView,
       {},
       {},
       {},
       $get("MyTemplate")
);
}
</script>

DataView を使用すれば確実にプログラミング作業が円滑になるシナリオとして非常によく知られているのは、複雑な HTML テンプレートにリモート Web サービスから取得したデータを設定する方法です。この点についてもう少し詳しく調べてみましょう。

Web サービスからのデータの取得

DataView コンポーネントのプログラミングインターフェイスには、DataView コンポーネントのコンテンツをリモート URI から取得するシナリオに、特に役立つよう設計されたメンバーが多数用意されています。コードダウンロードには、Web サービスを操作する DataView のメンバーの一覧が含まれています。

"An Auto-Fetch DataView to Consume Data from a Remote URI" (リモート URI のデータを使用する自動取得型 DataView) というコードダウンロードサンプルのコンテンツを参照しても、DataView コンポーネントの API 全体を完全には理解できません。他のシナリオに役立つ多数のメンバーが他にも存在します。これらのシナリオについては、今後のコラムで詳しく説明する予定です。

"An Auto-Fetch DataView to Consume Data from a Remote URI" というコードダウンロードサンプルでは、ページの読み込み時に DataView を作成する JavaScript コードを示しています。DataView は、指定した Web サービスメソッドを呼び出すことでデータをすぐに取得するよう構成されています。

dataProvider プロパティはデータソースを表し、fetchOperation プロパティは呼び出すメソッドを設定します。最後に、fetchParameters プロパティは、メソッドのパラメーター情報が格納された辞書オブジェクトです。この情報を、メソッド定義の仮引数の名前と各プロパティが一致する JavaScript オブジェクトに設定します。具体的には、上記の例の GetQuotesFromConfig メソッドのプロトタイプは次のようになります。

[OperationContract(Name="GetQuotesFromConfig")]
StockInfo[] GetQuotes(bool isOffline);

DataView は HTML テンプレートを受け取り、$create ヘルパー関数を使用してテンプレートを設定し、データが正しく取得されたら、テンプレートのすべてのプレースホルダーに取得したデータを設定します。

図 3 AJAX と jQuery を使用してデータバインドされる機能豊富な Web ページ

サンプルコードには、テンプレートを簡単な jQuery アニメーションで定期的に更新するカスタムタイマーオブジェクトも含まれています。タイマーの実行中、[offline] (オフライン) チェックボックスの現在値を使用して新しい取得操作が指示されます。[offline] (オフライン) チェックボックスは、Web サービスから架空の株と株価を返すのか、実際の財務サービスに接続して実在する株の株価を取得するのかを指定します。サービスでは、財務サービスの URL と、株式の一覧を構成ファイルから取得します (詳細についてはソースコードを参照してください)。

来月の内容

図 3 は、アニメーションが表示され、データバインドされる、機能豊富な ASP.NET AJAX ページです。このページでは、クライアント側レンダリングを使用して、未加工のデータをかなり複雑な HTML テンプレートにバインドします。ASP.NET AJAX 4.0 には、このようなページのコーディングを、従来のサーバー側のデータバインドに劣らず簡単にする、強力なプログラミングツールが用意されています。

図 3 に示すページは、千里の道の第一歩、それも最も簡単な一歩にすぎません。来月は、機能豊富なテンプレートのその他の機能、および HTML テンプレートにロジックを配置する方法について説明します。また、ライブデータのバインドについても取り上げます。ぜひ、注目してください。

Dino Esposito は、IDesign 社のアーキテクトであり、『Microsoft .NET: Architecting Applications for the Enterprise』(Microsoft Press、2008 年) の共著者です。Esposito はイタリアに在住し、世界各国で開催される業界のイベントで頻繁に講演しています。ブログは weblogs.asp.net/despos で読むことができます。

次の方法で共有

Cutting Edge

ASP.NET AJAX 4.0 におけるデータバインド

Dino Esposito

実際の AJAX 開発における重要な概念

クライアント側でのデータバインドの要件

HTML テンプレートの構文

データバインドの構文

DataView コントロールとテンプレートインスタンスの作成

宣言によるビヘイビアのアタッチ

マスターページのヒント

プログラムからの DataView コントロールの使用

Web サービスからのデータの取得

来月の内容

その他のリソース

次の方法で共有

Cutting Edge

ASP.NET AJAX 4.0 におけるデータ バインド

Dino Esposito

実際の AJAX 開発における重要な概念

クライアント側でのデータ バインドの要件

HTML テンプレートの構文

データ バインドの構文

DataView コントロールとテンプレート インスタンスの作成

宣言によるビヘイビアのアタッチ

マスター ページのヒント

プログラムからの DataView コントロールの使用

Web サービスからのデータの取得

来月の内容

その他のリソース

ASP.NET AJAX 4.0 におけるデータバインド

クライアント側でのデータバインドの要件

データバインドの構文

DataView コントロールとテンプレートインスタンスの作成

マスターページのヒント