.NET開発者のためのブログメディア
TreeViewコントロールを使ってASP.NETの階層データをツリー構造で表示する方法
2020年03月24日
プロジェクトが大きくなってくると、それを構成しているファイル群の場所が分かりづらくなることがあります。そのような場合に便利なのがTreeViewという階層構造を表示する機能です。ASP.NETでは、標準で使えるTreeViewクラスが用意されているので、それを使った利用方法を見ていきます。
- SE
- プロジェクトのファイルが多くなりすぎて、どこに何があるか分かりづらくなってしまいました。
- PM
- そのような場合には、TreeViewを使って一覧化するのが良いですね。表示方法を見ていきましょうか。
目次
ASP.NETのデータ構造
ASP.NETにおけるデータ構造は、ビュー、モデル、コントロールの構成であるMVCが一般的です。それぞれの構成においては、さらに下層に至るユーザーによるフォルダの追加なども含まれるため、より複雑な構成になっていくでしょう。これを一覧化して表示できるようにすれば、一元管理をする上での労力も減ります。それを実現する方法として挙げられるのが、TreeViewクラスを利用した表示方法です。
ツリー構造の表示方法
TreeViewを使った階層構造の表示方法は、基本的にはXMLを利用したものになります。決まったフォーマットに対して、構成する要素を追加していくだけですので、簡単に作ることができるでしょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>TreeView Test</title> </head> <body> <form id="form1" runat="server"> <h3>TreeView Test</h3> <asp:TreeView id="TreeViewTest" runat="server"> <Nodes> <asp:TreeNode Value="1" NavigateUrl="Top.aspx" Text="TOP" Target="Content" Expanded="True"> <asp:TreeNode Value="2-1" NavigateUrl="sec1.aspx" Text="sec1" Target="Content"> <asp:TreeNode Value="3-1" NavigateUrl="thr1.aspx" Text="thr1" Target="Content"/> </asp:TreeNode> <asp:TreeNode Value="2-2" NavigateUrl="sec2.aspx" Text="sec2" Target="Content"> <asp:TreeNode Value="3-2" NavigateUrl="thr2.aspx" Text="thr1" Target="Content"/> </asp:TreeNode> </asp:TreeNode> </Nodes> </asp:TreeView> </form> </body> </html> |
実行結果
このコードでは、XMLタグにより定義されたツリーの各階層を表示します。サンプルではブラウザによる表示を行っていますが、TreeViewコントロールを利用したフォームアプリケーションで行うことも可能です。
- SE
- ツリー構造にすると、プロジェクト全体のファイル構成がすごく見やすくなりますね！分かりやすいのでこれからの仕事に活用します。
- PM
- 作り方も簡単なので、プロジェクト管理をする上では特に重要になってきます。大規模プロジェクトほどファイル構成が複雑ですからね。
ファイル構成を把握する上では特に重要なツール
構成ファイル数が多くなるにつれて、管理しなければならないフォルダ数も増えていきます。そうなると、どこに何があるのかが分かりづらくなってくることもあるでしょう。TreeViewは、そのようなときにファイルの階層をいち早く確認できる便利なツールといえます。
