ASP.NET AJAX 4.0について
2009/08/14 23:59 | 0 Comments
現在.NET Framework 4.0と、Visual Studio 2010について調べている。（これを見て「ははぁ、またどっかに記事書くんやな」と思っても、ダマっておくのが大人ってもんです）
個人的な印象としては、WPFとかLINQ、あるいはASP.NET AJAXとかラムダ式とか、そういう新機軸が目白押しだった2008に比べると、それらをさらに洗練させるという方向性かな、と思う。（F#が正式に追加されたのはちょっとオドロキだけど）
いろいろ調べてみたところ、ASP.NET AJAXのクライアントサイドのレンダリングが強化されているのが、なかなか面白い。細かい説明は今度記事が出たときに読んでもらえればいいかなと思うので、ここでは要点だけピックアップしてみる。ポイントは、XHRで取得したデータのレンダリングを行う際に、HTMLで記述したテンプレートが使える、という点だ。
さすがに今日びテンプレートエンジンを使わずにWebアプリを書こうとするツワモノはいないだろう。PHPでもJavaでも、当たり前のようにテンプレートの仕組みが使えるようになっている。ただし、それらのテンプレートはすべてサーバサイドでのレンダリングをに使用されるだけで、クライアントサイドでは、jsを使ってDOMを自分で組み立てるやり方が今でも主流になっている。jqueryなどを使えば、自前でDOMを組み立てたりするコードも割と簡単に書ける。たとえば、appendとかappendToを使って、メソッドチェーンで流れるようにDOMを組み立てたりできるので、やっぱりjquery素敵だわウフフとか、そういう感じだ。
しかし、よく考えると本当はそういうコードはあまり書くべきではないことに気づく。というのは、そうやって組み立てているのはDOM、言ってみればHTMLなわけだ。そもそも「HTMLごときを組み立てるのにコードをバリバリ書くのは効率が悪い」という理由でテンプレートエンジンを使うようになったのであれば、XHRで取得したデータをビューに変換するのも、やはりテンプレートの仕組みを使った方がよいわけである。
で、そういった「XHRでサーバーから動的に取得したデータを、HTMLベースのテンプレートを使ってクライアントサイドで描画する」という仕組みが、ASP.NET AJAX 4.0で追加されたというわけだ。このテンプレートエンジンであれば、jsonをHTMLのコードに簡単に変換することができる。さらに、Observerという仕組みを使えば、js上での特定の変数をビューにバインドさせることもできる。つまりjs上で変数の値を変更すると、それが自動的にDOMに反映されるというわけだ。
このObserverの方だけ、少し具体例を出して説明しよう。たとえば、HTMLでのテンプレートというのはこういう感じになる。
名前:{{ Name }}<br />
年齢:{{ Age }}
<hr />
</div>
まずsys-templateというクラスを適用することで、テンプレートとして活用できるようになる。で、あとは「dataview:data="{{ imagesArray }}」という箇所で、js上のimagesArrayという変数と関連づけている。それから、テンプレートの中で{{Name}}や{{Age}}となっている箇所に、渡された変数の値が入る。つまりこのテンプレートは、NameとAgeというプロパティを持つオブジェクトが渡されることを期待しているわけだ。
次にjsの方を見てみる。まずグローバルなスコープのところで、次のようなコードを書く。
Sys.Observer.makeObservable(imagesArray);
これで、imagesArrayをobserveするようになったので、あとはimagesArrayの要素を追加したり削除したりすることで、先ほどのテンプレートに当たるDOMの箇所が、自動的に更新されるようになる。もちろんimagesArrayに入れる要素は、NameとAgeというプロパティを持つオブジェクトでなければならない。だから、たとえばこんな感じのコードになる。
これだけでもそれなりに便利な仕組みなのだが、これとASP.NET AJAXのWebサービス（Web API）を作成する仕組みと組み合わせると、XHRでサーバーサイドからデータを受け取り、それを元にクライアントサイドでレンダリングをする、ということがものすごく簡単にできる。（ちなみにWebサービスを作成する自体はVS 2008の頃からあった。）
たとえば、NameとAgeというプロパティを持つPersonクラスのインスタンスの配列を、XMLやJSONで返すWebサービスを作るのであればこんなコードになる。
{
public string Name { get; set; }
public int Age { get; set; }
}
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
[WebMethod]
[ScriptMethod(UseHttpGet=true)]
public List<Employee> GetEmployees()
{
return new List<Employee> {
new Employee { Name = "鈴木", Age = 30 },
new Employee { Name = "田中", Age = 35 }
};
}
}
この辺りは4.0でなくても使える機能だ。ちなみに、返すデータのフォーマットはXMLでもJSONでも、どちらでも選べる（ScriptMethod属性で指定するだけ）。
で、すごいのはここから。今作ったWebサービスからEmployeeのデータを複数取得して、先ほどのテンプレートに流し込む場合、そのコードがたったこれだけで済んでしまうのだ。
for (var i = 0; i < result.length; i++) {
imagesArray.add(result[i]);
}
});
要するに、サーバーからデータ（JSON or XML）を取得→そのデータをテンプレートとバインドしている変数に代入→自動的にDOMが更新される、という仕組みになっているわけだ。Webサービスからデータを取得するロジックと、取得したデータをどうレンダリングするか、という箇所が、明確に分離できているのが分かると思う。たとえば、レンダリングの仕方を変えたい場合でも、jsにコードは一切触る必要がない。
あと、このテンプレートの仕組み自体は、ASP.NETとは独立させて動かすこともできそうに見える。用はサーバーサイドでDBのデータをJSONに変換してやればいいわけだから。ASP.NET AJAXのjsファイルはMs-PLになっていて確か商用利用もできたと思うので（これは要確認）、ASP.NET以外のフレームワークでもそのまま使えるかもしれない。
