TreeViewコントロールを使ってASP.NETの階層データをツリー構造で表示する方法
公開日時:

プロジェクトが大きくなってくると、それを構成しているファイル群の場所が分かりづらくなることがあります。そのような場合に便利なのが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は、そのようなときにファイルの階層をいち早く確認できる便利なツールといえます。
Search キーワード検索
Popular 人気の記事
-
【VB.NET入門】DataGridViewの使い方まとめ
公開: 更新:
reccomended おすすめ記事
-
【.NETが統合】.NET 5の概要と今後のリリース予定
公開: 更新:
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
Web受注システム運用保守/VB.NET/東京都港区/【WEB面談可】
月給50万~60万円東京都港区(品川駅) -
Web受注システム開発のテスター/VB.NET/東京都港区/【WEB面談可】
月給25万~35万円東京都港区(品川駅) -
営業フロントシステム運用保守/ASP.NET/東京都江東区/【WEB面談可】
月給50万~60万円東京都江東区(木場駅) -
営業フロントシステム開発のテスター/ASP.NET/東京都江東区/【WEB面談可】
月給25万~35万円東京都江東区(木場駅) -
営業フロントシステム開発/ASP.NET/東京都江東区/【WEB面談可】
月給35万~41万円東京都江東区(木場駅) -
Web受注システム開発/VB.NET/東京都港区/【WEB面談可】
月給45万~60万円東京都港区(品川駅)