Beta版で試す! VS 2010と.NET 4.0の新機能(1) - ASP.NET Ajaxにおけるクライアントサイドレンダリング

テンプレート機能の簡単なサンプル

最初は、サーバー連携を考えずに、JavaScript上で保持しているデータを、HTMLのテンプレートと組み合わせて描画する仕組みを見てみることにする(本サンプルのソースコードはこちらからダウンロードできる)。

作り方の手順としては、まず「ASP.NET Webアプリケーション」のプロジェクトを作成する。プロジェクトの作成ができたら、Default.aspxに必要なコードを記述していくことになる。

まずは、ScriptManagerを追加し、そこに「MicrosoftAjaxTemplates.js」を追加しよう。

名前を見れば分かるように、これがテンプレートを利用したクライアントサイドのレンダリングを行うためのクラスが定義されているJavaScriptライブラリになる。

次に、HTMLでテンプレートを記述しよう。と言っても、ここで使用するのはごく普通のHTMLである。ただ違うのは、変数とバインドする箇所に「{{変数名}}」というコードを記述することだけだ。これらをまとめると、テンプレート全体はたとえば次のようなコードになる。

<div id="myTemplate" style="display:none">
    <div>名前:{{ Name }} 年齢:{{Age}}</div>
</div>

このテンプレートはNameとAgeというプロパティを持つオブジェクトが渡されることを想定しているというわけだ。テンプレートのHTML自体が表示されないように、CSSで非表示にしておく。

それから、テンプレートを使用して生成したHTMLを記述するためのdiv要素も記述しておこう。これはid属性だけを指定した、空の要素でよい。とりあえずidは「targetContainer」としておく。

また、テンプレートとオブジェクトを組み合わせて記述する処理を、JavaScriptで記述しよう。とりあえずInsert関数を定義して、その中に処理を記述していくことにする。まず最初に、テンプレートに流し込むオブジェクトを用意する。NameとAgeを持つオブジェクトをJSONで記述するのであれば、次のようになる。

var person = {Name: "田中",Age: 30};

次に、テンプレートして記述したHTMLを元に、テンプレートオブジェクトを生成する。テンプレートのdiv要素のidは「myTemplate」であることを踏まえると、コードは次のようになる。

var t = new Sys.UI.Template($get("myTemplate"));

そして、テンプレートオブジェクトとpersonオブジェクトを組み合わせてHTMLを生成するコードは、HTMLを描画するdiv要素のid属性が「targetContainer」であることを踏まえると、次のようになる。

t.instantiateIn($get("targetContainer"),person);

最後に、ボタンを配置して、クリック時にInsert関数が呼び出されるようにすればよい(本来はaddHandler関数などを使うべきだが、とりあえずここではonclick属性を使用して、クリック時にInsert関数が呼び出されるようにしている)。

コードが記述できたら、ビルドして実行してみよう。ボタンをクリックするたびに、JavaScriptのオブジェクトを元にしたHTMLが動的に生成できていることが確認できる。一度動作させた後は、HTMLのテンプレート部分をいろいろ変更してみれば、ボタンをクリック時に生成されるHTMLもそれに応じて変更されることも確認できる。