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の部分で 行われています。
ツリーの横に表示されている + - の画像も、同じようにリソースから読み込まれています。

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