チュートリアル : TreeView コントロールでの階層データの表示
更新 : 2007 年 11 月
ASP.NET の TreeView コントロールは、ユーザーに階層構造のデータを表示するように設計されています。ユーザーは、子ノードを格納できる個別のノードを開くことができます。TreeView コントロールは XML データの表示に適していますが、階層で表示できるすべてのデータに使用できます。このチュートリアルでは、TreeView コントロールを使用する際の基本事項、および階層データを表示するさまざまな方法を示します。
このチュートリアルでは、以下のタスクを行います。
TreeView コントロールを使用した XML データの表示
TreeView コントロールの表示のカスタマイズ
TreeView コントロール内の関連するデータベース テーブルからのレコードの表示
前提条件
このチュートリアルを実行するための要件は次のとおりです。
Microsoft Visual Web Developer (Visual Studio)。
MDAC (Microsoft Data Access Components ) Version 2.7 以降。
Microsoft Windows XP または Windows Server 2003 を使用している場合、MDAC 2.7 は既に存在します。ただし、Microsoft Windows 2000 を使用している場合は、コンピュータに既にインストールされている MDAC のアップグレードが必要になる場合があります。詳細については、MSDN ライブラリのトピック「Microsoft Data Access Components (MDAC) Installation」を参照してください。
SQL Server Northwind データベースへのアクセス。SQL Server の Northwind サンプル データベースをダウンロードし、インストールする方法については、Microsoft SQL Server の Web サイトの「サンプル データベースのインストール」を参照してください。
メモ : SQL Server が実行されているコンピュータにログオンする方法については、サーバー管理者にお問い合わせください。
Web サーバーと同じコンピュータ上に SQL Server データベースが存在しない場合は、Northwind データベースへのアクセス権を持つ SQL Server アカウントのユーザー名とパスワード。
Web サイトの作成
次の手順に従って、新しい Web サイトおよびページを作成します。
ファイル システム Web サイトを作成するには
Visual Web Developer を開きます。
[ファイル] メニューの [新規作成] をポイントし、[Web サイト] をクリックします。Visual Web Developer Express を使用している場合は、[ファイル] メニューの [新しい Web サイト] をクリックします。
[新しい Web サイト] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[場所] ボックスで、[ファイル システム] をクリックし、Web サイトを格納するフォルダの名前を入力します。
たとえば、フォルダ名を「C:\WebSites\HierarchicalData」と入力します。
[言語] ボックスで、作業に使用する言語をクリックします。
[OK] をクリックします。
Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。
データの XML ファイルの作成
次の手順に従って、新しい XML ファイルを作成します。
XML ファイルを作成するには
ソリューション エクスプローラで、Web サイトを右クリックし、[新しい項目の追加] をクリックします。
[新しい項目の追加] ダイアログ ボックスの、[標準テンプレート] の下の [XML ファイル] をクリックします。
[ファイル名] ボックスに「Bookstore.xml」と入力し、[追加] をクリックします。
Visual Web Developer により新しい Bookstore.xml ファイルが作成され、コード エディタが開きます。
次の XML データをコピーして、Bookstore.xml ファイルに貼り付け、ファイルの内容を上書きします。
<?xml version="1.0" standalone="yes"?> <bookstore> <genre name="fiction"> <book ISBN="10-000000-001"> <title>The Iliad and The Odyssey</title> <price>12.95</price> <comments> <userComment rating="4"> Best translation I've read. </userComment> <userComment rating="2"> I like other versions better. </userComment> </comments> </book> <book ISBN="10-000000-999"> <title>Anthology of World Literature</title> <price>24.95</price> <comments> <userComment rating="3"> Needs more modern literature. </userComment> <userComment rating="4"> Excellent overview of world literature. </userComment> </comments> </book> </genre> <genre name="nonfiction"> <book ISBN="11-000000-002"> <title>Computer Dictionary</title> <price>24.95</price> <comments> <userComment rating="3">A valuable resource.</userComment> </comments> </book> <book ISBN="11-000000-003"> <title>Cooking on a Budget</title> <price>23.95</price> <comments> <userComment rating="4">Delicious!</userComment> </comments> </book> </genre> </bookstore>
XML ファイルには、オンライン書店から入手できる書籍に関する情報が格納されます。
Bookstore.xml ファイルを保存して閉じます。
TreeView コントロールにおける XML データの表示
ここでは、TreeView コントロールを使用して XML データを表示します。まず、特殊な構成を使用せずに XML 情報を表示します。
XML データを表示するには
Default.aspx ページを開いて、デザイン ビューに切り替えます。
ツールボックスの [ナビゲーション] グループから、TreeView コントロールをページにドラッグします。
TreeView コントロールを右クリックし、[スマート タグの表示] をクリックします。
[TreeView タスク] メニューの [データ ソースの選択] をポイントし、[新しいデータ ソース] をクリックします。データ ソース構成ウィザードが表示されます。
[アプリケーションがデータを取得する場所] ウィンドウの [XML ファイル] をクリックします。データ ソースの ID は既定のままにします。[OK] をクリックします。
[データ ソースの構成] ダイアログ ボックスの [データ ファイル] ボックスに「~/Bookstore.xml」と入力して、[OK] をクリックします。
ここでページをテストできます。
ページをテストするには
Ctrl キーを押しながら F5 キーを押してページを実行します。
コントロール内のノードを折りたたんでから、展開します。
既定では、ノードには Bookstore.xml ファイル内の要素のタグ名のみが表示されます。
カスタム バインディングを作成して、TreeView コントロールに表示される情報をカスタマイズできます。カスタム バインディングを使用すると、ノードごとに XML ファイルから表示される情報を指定できます。
カスタム バインディングを作成するには
Default.aspx ページで TreeView コントロールを右クリックし、[スマート タグの表示] をクリックします。
[TreeView タスク] メニューの [TreeNode Databindings の編集] をクリックします。
[TreeView DataBindings エディタ] ダイアログ ボックスが表示されます。
データ バインディングを定義するため、[自動生成データ バインド] チェック ボックスをオフにします。
[追加] をクリックして新しいバインディングを作成し、[データ バインドのプロパティ] の [DataMember] を「bookstore」に設定して、[テキスト] を「Book Information」に設定します。
これにより、静的な値を表示するためのバインディングが設定されます。これは、[Bookstore] ノードは .xml ファイル内の最上位ノードであり、TreeView コントロールに 1 回のみ表示されるためです。
[追加] をクリックして 2 番目のバインディングを作成し、[データ バインドのプロパティ] の [DataMember] を「genre」に設定して、[textfield] を「name」に設定します。
これは、ノードが .xml ファイル内の <genre> 要素を読み取って、その name 属性を TextField プロパティに割り当てるように指定します。
[追加] をクリックして書籍の 3 番目のバインディングを作成し、[データ バインドのプロパティ] の [DataMember] を「book」に設定して、[textfield] を「ISBN」に設定します。
[OK] をクリックします。
ここでページをテストできます。
ページをテストするには
Ctrl キーを押しながら F5 キーを押してページを実行します。
このテストでは、TreeView コントロールには、定義したバインディングに対応する 3 つのレベルが表示されます。3 つのレベルとは、Book Information というラベルが付いたルート ノード、ジャンル グループ、および ISBN 詳細です。
XML ファイル内のすべての要素のデータ バインディングを作成できますが、バインド先は、要素の属性、内部テキスト、要素の名前、または要素の値のみです。入れ子になった要素にバインドすることはできません。入れ子になった要素の値を表示するには、その要素への個別のバインディングを作成します。または、内部要素が属性に変換されるように、XSLT を使用して XML ファイルを変換します。詳細および例については、XmlDataSource.TransformFile プロパティに関するトピックを参照してください。
TreeView コントロールにおけるリレーショナル データの表示
TreeView コントロールは、データ階層がデータベース内のように論理的であっても、XML ファイル内のように物理的ではなくても、すべての種類の階層データを表示できます。ここでは、TreeView コントロールを使用して、Northwind データベース内の関連テーブルからデータを表示します。
まず、Northwind データベースを配置し、SQL Server を実行しているコンピュータへの接続を作成します。
SQL Server への接続を作成するには
サーバー エクスプローラの [データ接続] を右クリックし、[接続の追加] をクリックします。Visual Web Developer Express を使用している場合は、データベース エクスプローラを使用します。
[接続の追加] ダイアログ ボックスが表示されます。
[データ ソース] ボックスに [Microsoft SQL Server (SqlClient)] が表示されない場合は、[変更] をクリックし、[データ ソースの変更] ダイアログ ボックスの [Microsoft SQL Server] を選択します。
[データ ソースの選択] ページが表示されたら、[データ ソース] ボックスで、使用するデータ ソースの種類を選択します。このチュートリアルでは、データ ソースの種類は [Microsoft SQL Server] です。[データ プロバイダ] ボックスの [.NET Framework SQL Server 用データ プロバイダ] をクリックして、[続行] をクリックします。
メモ : Visual Web Developer にサーバー エクスプローラ タブが表示されない場合は、[表示] メニューの [サーバー エクスプローラ] をクリックします。[データベース エクスプローラ] タブが表示されない場合は、[表示] メニューの [データベース エクスプローラ] をクリックします。
[接続の追加] ボックスで、[サーバー名] ボックスにサーバー名を入力します。
[サーバーにログオンする] セクションでは、実行中の SQL Server データベースにアクセスするためのオプション (統合セキュリティまたは個別の ID とパスワード) を選択し、必要に応じてユーザー名とパスワードを入力します。
[パスワードの保存] チェック ボックスをオンにします。
メモ : 実際のアプリケーションでは、[パスワードの保存] は使用しないでください。これにより、アプリケーション ファイルにユーザー名とパスワードが埋め込まれるためです。
[データベースの選択または入力] に、「Northwind」と入力します。
[接続の確認] をクリックし、接続を確認できたら [OK] をクリックします。
サーバー エクスプローラ (またはデータベース エクスプローラ) の [データ接続] に新しい接続が作成されます。
データベース データを表示するための TreeView コントロールの設定
ここでは、ノードにデータを動的に読み込みます。最初のレベルのノードは、マスター データ (この場合はカテゴリ) を表します。ユーザーがノードをクリックすると、カテゴリの製品を取得するデータベースへのクエリが作成され、そのカテゴリの子ノードが作成されます。データを取得するには、データ ソース コントロールを使用します。ただし、このチュートリアルでは、プログラムによってクエリを作成して実行します。
まず、新しいページと新しい TreeView コントロールを作成します。
新しいページと TreeView コントロールを作成するには
TreeViewDynamic.aspx という名前の ASP.NET Web ページ (Web フォーム ページ) を Web サイトに追加します。
TreeViewDynamic.aspx ページを開いてデザイン ビューに切り替え、Toolbox の [標準] グループから Label コントロールをページにドラッグし、labelStatus という名前を付けます。
labelStatus コントロールは、エラー レポートにのみ使用されます。
ツールボックスの [ナビゲーション] グループから、TreeView コントロールをページにドラッグします。
TreeView コントロールを右クリックして [プロパティ] をクリックし、[MaxDataBindDepth] を 2 に設定します。
TreeView コントロールを右クリックして [スマート タグの表示] をクリックし、[TreeView タスク] メニューの [ノードの編集] をクリックします。
[TreeView ノード エディタ] ダイアログ ボックスで、[ルート ノードの追加] というラベルが付いたアイコンをクリックし、[プロパティ] の [テキスト] を Product List に設定して、[PopulateOnDemand] を true に設定します。
[OK] をクリックします。
静的テキストのみを格納する、ツリーの最上位ノードが作成されます。
Web.config ファイルを設定するには
ツールボックスの [データ] グループから、SqlDataSource コントロールをページにドラッグします。
SqlDataSource コントロールを選択し、[スマート タグの表示] をクリックします。
[SqlDataSource タスク] メニューの [データ ソースの構成] をクリックします。
データ ソースの構成 - SqlDataSource1 ウィザードに、接続を選択できるページが表示されます。
[アプリケーションがデータベースへの接続に使用するデータ接続] ボックスで、「SQL Server に対する接続を作成するには」で作成した接続名を入力し、[次へ] をクリックします。
ウィザードに、接続文字列を構成ファイルに保存するためのページが表示されます。接続文字列を構成ファイルに格納すると、次の 2 つの利点があります。
この方がページ内に格納するよりも安全です。
同じ接続文字列を複数のページで使用できます。
[はい、この接続を次の名前で保存します] チェック ボックスをオンにし、[次へ] をクリックします。
ウィザードに、データベースから取得するデータを指定するためのページが表示されます。
[テーブルまたは表示から列を指定します] の [コンピュータ] ボックスで、[カテゴリ] をクリックします。
[列] で、[CategoryID] ボックスと [CategoryName] ボックスをオンにします。
[次へ] をクリックします。
[完了] をクリックします。
このチュートリアルで後で定義する RunQuery メソッドでは、後で Web.config ファイルで作成する接続文字列を使用します。SqlDataSource コントロールは使用しません。
ここで、ユーザーがノードをクリックしたときにコントロールの子ノードを設定するコードを追加します。ノードを動的に追加するには、TreeNodePopulate イベントのイベント ハンドラを作成します。
イベント ハンドラを作成するには
TreeView コントロールを右クリックし、[プロパティ] の [イベント] アイコンをクリックします。
TreeNodePopulate イベントのボックスをダブルクリックします。
Visual Web Developer がソース ビューに切り替わります。
次の強調表示されたコードをハンドラに追加します。
Protected Sub TreeView1_TreeNodePopulate(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.TreeNodeEventArgs) _ Handles TreeView1.TreeNodePopulate If e.Node.ChildNodes.Count = 0 Then Select Case e.Node.Depth Case 0 PopulateCategories(e.Node) Case 1 PopulateProducts(e.Node) End Select End If End Sub
protected void TreeView1_TreeNodePopulate( object sender, TreeNodeEventArgs e) { if (e.Node.ChildNodes.Count == 0) { switch (e.Node.Depth) { case 0: PopulateCategories(e.Node); break; case 1: PopulateProducts(e.Node); break; } } }
このコードは、ユーザーがノードをクリックして開いたときに呼び出されます。ツリーの異なるレベルで異なるデータを表示するため、ユーザーがクリックしたノードの深さを判断して、そのレベルにノードを適切に設定する必要があります。このチュートリアルでは、ユーザーがルート ノード (深さ 0) をクリックした場合、PopulateCategories メソッドが呼び出されます。ユーザーがカテゴリ名 (深さ 1) をクリックした場合は、PopulateProducts メソッドが呼び出されます。次のセクションでメソッドを示します。
TreeNodeEventArgs オブジェクトを使用すると、現在のノードにプログラムでアクセスできます。ノードを設定するには、ノードに要素を追加します。プログラム例では、ノードは子ノードを追加するメソッドに渡されます。
データベースからのノード データの読み取り
各ノードに表示される情報は、データベースから読み込まれます。データベース クエリを実行し、レコードを読み込んで、各レコードのノードを作成するコードを作成する必要があります。このチュートリアルでは、SQL Server の Northwind サンプル データベースを使用していることを前提としているため、System.Data.SqlClient 名前空間から ADO.NET オブジェクトを使用する必要があります。
ノードの最初のレベル (レベル 0) の場合、存在するすべてのカテゴリの一覧が表示されます。作成したコードにより、後でチュートリアルで作成する RunQuery メソッドが呼び出されます。
すべてのカテゴリのノードを追加するには
ソース ビューに切り替えます。
単一ファイル ページを使用している場合は、次のディレクティブをコード ページの先頭に追加します。
<%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %>
名前空間をインポートすると、必要なコードの作成が簡単になります。
分離コード ページを使用している場合は、分離コード ページ (TreeViewDynamic.aspx.vb または TreeViewDynamic.aspx.cs) に切り替えて、次の行をコード ファイルの先頭 (クラス宣言の外部) に追加します。
Imports System.Data Imports System.Data.SqlClient
using System.Data; using System.Data.SqlClient;
ページがソース ビューにあることを確認します。
ページ コードに次のメソッドを追加します。
Sub PopulateCategories(ByVal node As TreeNode) Dim sqlQuery As New SqlCommand( _ "Select CategoryName, CategoryID From Categories") Dim ResultSet As DataSet ResultSet = RunQuery(sqlQuery) If ResultSet.Tables.Count > 0 Then Dim row As DataRow For Each row In ResultSet.Tables(0).Rows Dim NewNode As TreeNode = New _ TreeNode(row("CategoryName").ToString(), _ row("CategoryID").ToString()) NewNode.PopulateOnDemand = True NewNode.SelectAction = TreeNodeSelectAction.Expand node.ChildNodes.Add(NewNode) Next End If End Sub
void PopulateCategories(TreeNode node) { SqlCommand sqlQuery = new SqlCommand( "Select CategoryName, CategoryID From Categories"); DataSet resultSet; resultSet = RunQuery(sqlQuery); if (resultSet.Tables.Count > 0) { foreach (DataRow row in resultSet.Tables[0].Rows) { TreeNode NewNode = new TreeNode(row["CategoryName"].ToString(), row["CategoryID"].ToString()); NewNode.PopulateOnDemand = true; NewNode.SelectAction = TreeNodeSelectAction.Expand; node.ChildNodes.Add(NewNode); } } }
このコードにより、クエリのテキストをカプセル化する SqlCommand オブジェクトが作成されます。このコードでは、データベース クエリを実行して DataSet オブジェクトを返す (ユーザーが作成する) メソッドにオブジェクトが渡されます。コードは DataSet オブジェクト内のレコードを反復処理して、各レコードの新しいノードを作成し、データベース情報を使用してテキストとノードの値を設定します。次に、コードは各ノードの PopulateOnDemand プロパティを true に設定して、ノードがクリックされたときに TreeNodePopulate イベントが発生するようにします。SelectAction プロパティは、ノードが既定で展開されているように設定されます。
ノードの 2 番目のレベルには、各カテゴリの製品が表示されます。このため、製品ノードを設定するには、現在のカテゴリの製品を取得して、子ノードを適切に設定できるパラメータ付きのクエリが必要です。
製品のノードを追加するには
ページ コードに次のメソッドを追加します。
Sub PopulateProducts(ByVal node As TreeNode) Dim sqlQuery As New SqlCommand sqlQuery.CommandText = "Select ProductName From Products " & _ " Where CategoryID = @categoryid" sqlQuery.Parameters.Add("@categoryid", SqlDbType.Int).Value = _ node.Value Dim ResultSet As DataSet = RunQuery(sqlQuery) If ResultSet.Tables.Count > 0 Then Dim row As DataRow For Each row In ResultSet.Tables(0).Rows Dim NewNode As TreeNode = New _ TreeNode(row("ProductName").ToString()) NewNode.PopulateOnDemand = False NewNode.SelectAction = TreeNodeSelectAction.None node.ChildNodes.Add(NewNode) Next End If End Sub
void PopulateProducts(TreeNode node) { SqlCommand sqlQuery = new SqlCommand(); sqlQuery.CommandText = "Select ProductName From Products " + " Where CategoryID = @categoryid"; sqlQuery.Parameters.Add("@categoryid", SqlDbType.Int).Value = node.Value; DataSet ResultSet = RunQuery(sqlQuery); if (ResultSet.Tables.Count > 0) { foreach (DataRow row in ResultSet.Tables[0].Rows) { TreeNode NewNode = new TreeNode(row["ProductName"].ToString()); NewNode.PopulateOnDemand = false; NewNode.SelectAction = TreeNodeSelectAction.None; node.ChildNodes.Add(NewNode); } } }
このコードは、カテゴリ ノードの設定に使用したコードに似ています。ただし、SqlCommand オブジェクトには、ユーザーがクリックしたノード (つまり、選択したカテゴリ) の値を使用して実行時に設定されたパラメータが設定されている点が異なります。また、PopulateOnDemand プロパティが false に設定されている点も異なります。これにより、製品ノードは拡張ボタンなしで表示されます。製品の下にはノードがないため、このように表示される必要があります。
最後の手順では、クエリを実行してデータセットを返すメソッドを作成します。
クエリを実行するには
ページに次のサブルーチンを追加します。
Function RunQuery(ByVal sqlQuery As SqlCommand) As DataSet Dim connectionString As String connectionString = _ ConfigurationManager.ConnectionStrings _ ("NorthwindConnectionString").ConnectionString Dim dbConnection As New SqlConnection dbConnection.ConnectionString = connectionString Dim dbAdapter As New SqlDataAdapter dbAdapter.SelectCommand = sqlQuery sqlQuery.Connection = dbConnection Dim resultsDataSet As DataSet = New DataSet Try dbAdapter.Fill(resultsDataSet) Catch ex As Exception labelStatus.Text = "Unable to connect to SQL Server." End Try Return resultsDataSet End Function
private DataSet RunQuery(SqlCommand sqlQuery) { string connectionString = ConfigurationManager.ConnectionStrings ["NorthwindConnectionString"].ConnectionString; SqlConnection DBConnection = new SqlConnection(connectionString); SqlDataAdapter dbAdapter = new SqlDataAdapter(); dbAdapter.SelectCommand = sqlQuery; sqlQuery.Connection = DBConnection; DataSet resultsDataSet = new DataSet(); try { dbAdapter.Fill(resultsDataSet); } catch { labelStatus.Text = "Unable to connect to SQL Server."; } return resultsDataSet; }
このコードにより、渡される SqlCommand オブジェクトに基づいてデータ アダプタが作成されます。次に、そのアダプタを使用してデータセットが作成され、設定されます。
ここでページをテストできます。
ページをテストするには
Ctrl キーを押しながら F5 キーを押してページを実行します。
TreeView コントロールが、カテゴリおよび製品の一覧と共に表示されます。
カテゴリをクリックしてカテゴリを折りたたんだり展開できるかを確認し、各カテゴリの製品の一覧を表示します。
次の手順
このチュートリアルでは、階層的な XML データとリレーショナル データベースの両方を使用して、TreeView コントロールを設定しました。TreeView コントロールを使用すると、サイト ナビゲーション情報と XML データを表形式 (リスト) データとして使用できます。
サイト ナビゲーションの詳細については、「チュートリアル : Web サイトへのサイト ナビゲーションの追加」を参照してください。
XML データの使用方法の詳細については、「チュートリアル : XML データを表示する Web ページの作成」を参照してください。
参照
処理手順
チュートリアル : XML データを表示する Web ページの作成