« ASP.NETのClientCallback | トップページ | XMLHttpRequestを使わずにデータを受信する »

2006年9月14日 (木)

ClientCallback機能を使ったTreeViewの展開

ASP.NET 2.0から追加されたTreeViewコントロールですが、ClientCallbackを使ってポストバックなしでデータを動的にバインドする機能があります。

まず、ページにTreeViewを配置し、TreeViewノードエディタでノードを追加します。
追加したノードのプロパティで、下図のようにExpandedをFalseに、PopulateOnDemandをTrueに設定します。
また、TreeView自体のPopulateNodesFromClientプロパティもTrueにします。




次に、TreeViewを配置したページに TreeNodePopulate イベントハンドラを作成します。
ツリーを展開すると、このイベントハンドラが呼び出されます。




ここでは、子ノードを10個追加するコードを記述してみます。
protected void TreeView1_TreeNodePopulate(object sender, TreeNodeEventArgs e)
{
    for (int i = 0; i < 10; i++)
    {
        TreeNode node = new TreeNode("Node" + i);
        e.Node.ChildNodes.Add(node);
    }
}
これで終わりです。
JavaScriptを1行も書くことなく、ClientCallbackを使ってポストバックなしにノードを追加出来るようになりました。




HTMLソースを見ると、JavaScriptはWebResource.axdというファイルをインクルードするscriptタグが出力されていることがわかると思います。
これにより、JavaScriptをまったく書かずに実現できたわけですね。
興味のある方は、どんなスクリプトが出力されているか覗いてみたら面白いと思います。


なお、このファイルは実際に存在しているものではなく、WebResource.axd?d=xxxxxx&t=xxxxxxにリクエストするとAssemblyResourceLoaderクラスにより アセンブリに埋め込まれているリソース(スクリプトや画像ファイルなど)をレスポンスとして返す仕組みになっていて、ファイルの識別はd=xxxxxxの部分で 行われています。
ツリーの横に表示されている + - の画像も、同じようにリソースから読み込まれています。

リソースの埋め込み、読み出しについては、また後日サンプルを書いてみたいと思います。

|

« ASP.NETのClientCallback | トップページ | XMLHttpRequestを使わずにデータを受信する »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/11886885

この記事へのトラックバック一覧です: ClientCallback機能を使ったTreeViewの展開:

« ASP.NETのClientCallback | トップページ | XMLHttpRequestを使わずにデータを受信する »