Procédure pas à pas : affichage de données hiérarchiques dans un contrôle TreeView
Mise à jour : novembre 2007
Le contrôle ASP.NET TreeView est conçu pour présenter des utilisateurs avec des données dans une structure hiérarchique. Les utilisateurs peuvent ouvrir des nœuds individuels qui peuvent contenir à leur tour des nœuds enfants. Le contrôle TreeView convient à l'affichage des données XML, mais peut être utilisé pour les données qui peuvent être représentées dans une hiérarchie. Cette procédure pas à pas vous indique l'essentiel de l'utilisation du contrôle TreeView et les différentes manières d'afficher des données hiérarchiques.
Cette procédure pas à pas illustre les tâches suivantes :
Utilisation du contrôle TreeView pour afficher les données XML.
Personnalisation de l'affichage du contrôle TreeView.
Affichage des enregistrements de tables de base de données connexes dans le contrôle TreeView.
Composants requis
Pour exécuter cette procédure pas à pas, vous avez besoin de :
Microsoft Visual Web Developer (Visual Studio).
Microsoft Data Access Components (MDAC) version 2.7 ou ultérieure.
Si vous utilisez Microsoft Windows XP ou Windows Server 2003, MDAC 2.7 est déjà installé. Toutefois, si vous utilisez Microsoft Windows 2000, vous devrez peut-être mettre à niveau les composants MDAC déjà installés sur votre ordinateur. Pour plus d'informations, consultez « Microsoft Data Access Components (MDAC) Installation » dans MSDN Library (en anglais).
Accéder à la base de données Northwind SQL Server. Pour plus d'informations sur le téléchargement et l'installation de l'exemple de base de données Northwind SQL Server, consultez Installation d'exemples de bases de données sur le site Web Microsoft SQL Server.
.gif "Remarque")
Remarque :Si vous avez besoin d'informations sur la façon de se connecter à un ordinateur qui exécute SQL Server, contactez l'administrateur du serveur.
Nom d'utilisateur et mot de passe d'un compte SQL Server qui a accès à la base de données Northwind, si la base de données SQL Server n'est pas sur le même ordinateur que le serveur Web.
Création du site Web
Créez un site et une page Web en suivant ces étapes.
Pour créer un site Web de système de fichiers
Ouvrez Visual Web Developer.
Dans le menu Fichier, cliquez sur Nouveau, puis sur Site Web. Si vous utilisez Visual Web Developer Express, dans le menu Fichier, cliquez sur Nouveausite Web.
La boîte de dialogue Nouveau site Web s'affiche.
Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
Dans la zone Emplacement, sélectionnez Système de fichiers et entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.
Par exemple, tapez le nom de dossier C:\SitesWeb\HierarchicalData.
Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.
Cliquez sur OK.
Visual Web Developer crée le dossier et une page nommée Default.aspx.
Création d'un fichier XML pour des données
Créez un fichier XML en suivant ces étapes.
Pour créer le fichier XML
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le site Web, puis cliquez sur Ajouter un nouvel élément.
Dans la boîte de dialogue Ajouter un nouvel élément, sous Modèles Visual Studio installés, cliquez sur Fichier XML.
Dans la zone Nom, tapez Bookstore.xml, puis cliquez sur Ajouter.
Visual Web Developer crée le nouveau fichier Bookstore.xml et ouvre l'éditeur de code.
Copiez les données XML suivantes, puis collez-les dans le fichier Bookstore.xml en écrasant le contenu existant.
<?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>Le fichier XML contient des informations sur des livres qui peuvent être disponibles dans une librairie en ligne.
Enregistrez le fichier Bookstore.xml et fermez-le.
Affichage de données XML dans le contrôle TreeView
Dans cette section, vous utiliserez le contrôle TreeView pour afficher les données XML. Pour commencer, vous pouvez afficher les informations XML sans configuration spéciale.
Pour afficher les données XML
Ouvrez la page Default.aspx et basculez en mode Design.
Dans la Boîte à outils, à partir du groupe Navigation, faites glisser un contrôle TreeView sur la page.
Cliquez avec le bouton droit sur le contrôle TreeView, puis cliquez sur Afficher la balise active.
Dans le menu Tâches TreeView, dans la liste déroulante Choisir la source de données, sélectionnez Nouvelle source de données. L'Assistant Configuration de source de données s'affiche.
Dans la fenêtre À partir d'où l'application obtiendra-t-elle les données ?, sélectionnez Fichier XML. Laissez l'ID par défaut de la source de données. Cliquez sur OK.
Dans la boîte de dialogue Configurer la source de données, dans la zone Fichier de données, entrez ~/Bookstore.xml, puis cliquez sur OK.
Vous pouvez à présent tester la page.
Pour tester la page
Appuyez sur CTRL+F5 pour exécuter la page.
Réduisez, puis développez les nœuds dans le contrôle.
Par défaut, les nœuds affichent uniquement les noms de balises des éléments dans le fichier Bookstore.xml.
Vous pouvez personnaliser les informations affichées dans le contrôle TreeView en créant des liaisons personnalisées qui vous permettent de spécifier quelles informations du fichier XML afficher pour chaque nœud.
Pour créer des liaisons personnalisées
Sur la page Default.aspx, cliquez avec le bouton droit sur le contrôle TreeView, puis cliquez sur Afficher la balise active.
Dans le menu Tâches TreeView, cliquez sur Modifier les Databindings TreeNode.
La boîte de dialogue Éditeur de DataBindings TreeView s'affiche.
Désactivez la case à cocher Générer automatiquement les liaisons de données, parce que vous définissez vous-même les liaisons de données.
Cliquez sur Ajouter pour créer une nouvelle liaison, puis, sous Propriétés de la liaison de données, affectez bookstore à DataMember et Informations sur la librairie à Text.
Vous configurez la liaison pour afficher une valeur statique, parce que le nœud Bookstore est le nœud supérieur dans le fichier .xml et apparaît seulement une fois dans le contrôle TreeView.
Cliquez sur Ajouter pour créer une deuxième liaison, puis, sous Propriétés de liaison de données, affectez genre à DataMember et name à Textfield.
Cela spécifie que le nœud lira l'élément <genre> dans le fichier .xml et assignera son attribut name à la propriété TextField.
Cliquez sur Ajouter pour créer une troisième liaison pour les livres, puis, sous Propriétés DataBinding, affectez book à DataMember et ISBN à Textfield.
Cliquez sur OK.
Vous pouvez à présent tester la page.
Pour tester la page
Appuyez sur CTRL+F5 pour exécuter la page.
Cette fois-ci, le contrôle TreeView affiche les trois niveaux correspondant aux liaisons que vous avez définies. Les trois niveaux sont le nœud racine, doté d'une étiquette Information sur le livre, les groupes genre et les détails ISBN.
Vous pouvez créer une liaison de données pour tout élément contenu dans un fichier XML, mais vous pouvez créer uniquement une liaison avec les attributs de l'élément, le texte interne, le nom de l'élément ou la valeur de l'élément. Vous ne pouvez pas créer de liaison avec un élément imbriqué. Pour afficher des valeurs dans les éléments imbriqués, vous créez des liaisons séparées à ces éléments. Une méthode autre consiste à transformer le fichier XML à l'aide de XSLT, afin que les éléments internes soient convertis en attributs. Pour plus d'informations et un exemple, consultez la propriété XmlDataSource.TransformFile.
Affichage de données relationnelles dans le contrôle TreeView
Le contrôle TreeView peut afficher tout type de données hiérarchiques, même si la hiérarchie de données est logique, comme dans une base de données, et non physique, comme dans un fichier XML. Dans cette section, vous utiliserez le contrôle TreeView pour afficher des données de tables connexes dans la base de données Northwind.
Pour démarrer, vous devez créer une connexion à l'ordinateur exécutant SQL Server sur lequel vous avez accès à la base de données Northwind.
Pour créer une connexion au SQL Server
Dans l'Explorateur de serveurs, cliquez avec le bouton droit sur Connexions de données, puis cliquez sur Ajouter une connexion. Si vous utilisez Visual Web Developer Express, utilisez l'Explorateur de bases de données.
La boîte de dialogue Ajouter une connexion s'affiche.
Si la liste Source de données n'affiche pas Microsoft SQL Server (SqlClient), cliquez sur Modifier puis, dans la boîte de dialogue Modifier la source de données, sélectionnez Microsoft SQL Server.
Si la page Choisir la source de données s'affiche, dans la liste Source de données, sélectionnez le type de source de données que vous utiliserez. Pour cette procédure pas à pas, le type de source de données est Microsoft SQL Server. Dans la liste Fournisseur de données, cliquez sur Fournisseur de données .NET Framework pour SQL Server, puis sur Continuer.
Remarque :Si l'onglet Explorateur de serveurs n'est pas visible dans Visual Web Developer, dans le menu Affichage, cliquez sur Explorateur de serveurs. Si l'onglet Explorateur de bases de données n'est pas visible, dans le menu Affichage, cliquez sur Explorateur de bases de données.
Dans la zone Ajouter une connexion, entrez le nom de votre serveur dans la zone Nom du serveur.
Pour la section Connexion au serveur, sélectionnez l'option appropriée pour accéder à la base de données SQL Server en cours d'exécution (sécurité intégrée ou ID spécifique et mot de passe) et, si besoin est, entrez un nom d'utilisateur et un mot de passe.
Activez la case à cocher Enregistrer mon mot de passe.
Remarque :Dans les applications de production, n'utilisez pas Enregistrer mon mot de passe, car cela incorpore le nom d'utilisateur et le mot de passe dans les fichiers d'application.
Sous Sélectionner ou entrer un nom de base de données, entrez Northwind.
Cliquez sur Tester la connexion et, lorsque vous êtes sûr que la connexion fonctionne, cliquez sur OK.
Votre nouvelle connexion a été créée sous Connexions de données dans l'Explorateur de serveurs (ou l'Explorateur de bases de données).
Configuration d'un contrôle TreeView pour afficher des données de base de données
Dans cette section, vous remplirez dynamiquement des nœuds avec les données. Les nœuds de premier niveau représenteront les données maîtres — dans ce cas, les catégories. Lorsque les utilisateurs cliquent sur un nœud, les nœuds enfants de la catégorie seront créés en faisant une requête à la base de données qui récupère les produits de cette catégorie. Pour récupérer les données, vous pouvez utiliser un contrôle de source de données. Toutefois, dans cette procédure pas à pas, vous créerez et exécuterez une requête par programme.
Pour commencer, créez une page et un contrôle TreeView.
Pour créer la page et le contrôle TreeView
Ajoutez une page Web ASP.NET (page Web Form) nommée TreeViewDynamic.aspx à votre site Web.
Ouvrez la page TreeViewDynamic.aspx, basculez en mode Design, puis dans la Toolbox, à partir du groupe Standard, faites glisser un contrôle Label sur la page et nommez-le labelStatus.
Le contrôle labelStatus est utilisé uniquement pour le rapport d'erreur.
Dans la Boîte à outils, à partir du groupe Navigation, faites glisser un contrôle TreeView sur la page.
Cliquez avec le bouton droit sur le contrôle TreeView, cliquez sur Propriétés, puis affectez 2 à MaxDataBindDepth.
Cliquez avec le bouton droit sur le contrôle TreeView, cliquez sur Afficher la balise active, puis dans le menu Tâches TreeView, cliquez sur Modifier les nœuds.
Dans la boîte de dialogue Éditeur de nœuds TreeView, cliquez sur l'icône dotée de l'étiquette Ajouter un nœud racine, puis, sous Propriétés, affectez Liste de produits à Text et true à PopulateOnDemand.
Cliquez sur OK.
Vous créez le nœud le plus haut de l'arborescence qui contient uniquement du texte statique.
Pour configurer le fichier Web.config
À partir du groupe Data de la Boîte à outils, faites glisser un contrôle SqlDataSource sur la page.
Sélectionnez le contrôle SqlDataSource, puis cliquez sur Afficher la balise active.
Dans le menu Tâches SqlDataSource, cliquez sur Configurer la source de données.
L'Assistant Configurer la source de données - SqlDataSource1 affiche une page dans laquelle vous pouvez choisir une connexion.
Dans la zone Quelle connexion de données votre application doit-elle utiliser pour établir une connexion à la base de données ?, entrez la connexion que vous avez créée dans « Pour créer une connexion au SQL Server », puis cliquez sur Suivant.
L'Assistant affiche une page dans laquelle vous pouvez choisir de stocker la chaîne de connexion dans le fichier de configuration. Le stockage de la chaîne de connexion dans le fichier de configuration présente deux avantages :
Le stockage dans la page est plus sécurisé.
Vous pouvez utiliser la même chaîne de connexion dans plusieurs pages.
Activez la case à cocher Oui, enregistrer cette connexion en tant que, puis cliquez sur Suivant.
L'Assistant affiche une page dans laquelle vous pouvez spécifier les données à récupérer à partir de la base de données.
Sous Spécifiez les colonnes d'une table ou d'une vue, dans la zone Nom, cliquez sur Catégories.
Sous Colonnes, sélectionnez les zones CategoryID et CategoryName.
Cliquez sur Suivant.
Cliquez sur Terminer.
Vous utiliserez la chaîne de connexion créée ultérieurement dans le fichier Web.config, dans la méthode RunQuery définie dans une étape ultérieure de cette procédure. Vous n'utiliserez pas le contrôle SqlDataSource.
Maintenant, vous devez ajouter le code pour remplir les nœuds enfants du contrôle lorsque les utilisateurs cliquent sur le nœud. Pour ajouter des nœuds dynamiquement, vous créez un gestionnaire d'événements pour l'événement TreeNodePopulate.
Pour créer le gestionnaire d'événements
Cliquez avec le bouton droit sur le contrôle TreeView, puis dans Propriétés, cliquez sur l'icône Événements.
Double-cliquez sur la zone de l'événement TreeNodePopulate.
Visual Web Developer passe en mode Source.
Ajoutez le code en surbrillance suivant au gestionnaire.
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 Subprotected 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; } } }Ce code est appelé lorsqu'un utilisateur clique sur un nœud pour l'ouvrir. Étant donné que vous souhaitez afficher différentes données à des niveaux différents de l'arborescence, vous devez déterminer sur quelle profondeur de nœud l'utilisateur a cliqué, puis remplissez convenablement les nœuds à ce niveau. Dans cette procédure pas à pas, la méthode PopulateCategories est appelée si l'utilisateur clique sur le nœud racine (profondeur 0). La méthode PopulateProducts est appelée si l'utilisateur clique sur un nom de catégorie (profondeur 1). Les méthodes sont affichées dans la section suivante.
L'objet TreeNodeEventArgs fournit l'accès par programme au nœud actuel. Pour remplir le nœud, vous devez lui ajouter des éléments. Dans l'exemple de code, le nœud est passé à la méthode qui ajoutera les nœuds enfants.
Lecture des données du nœud à partir de la base de données
Les informations à afficher dans chaque nœud proviennent de la base de données. Vous devez écrire le code qui exécute la requête de base de données, lire les enregistrements et créer un nœud pour chaque enregistrement. Cette procédure pas à pas suppose que vous utilisez la base de données d'exemple SQL Server Northwind, vous devez donc utiliser des objets ADO.NET à partir de l'espace de noms System.Data.SqlClient.
Pour le premier niveau de nœuds (niveau 0), vous devez afficher une liste de toutes les catégories disponibles. Le code que vous créez appelle une méthode RunQuery que vous créerez ultérieurement dans la procédure pas à pas.
Pour ajouter des nœuds pour toutes les catégories
Basculez en mode Source.
Si vous utilisez une page à fichier unique, ajoutez les directives suivantes en haut de la page de code.
<%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %>L'importation des espaces de noms simplifiera l'écriture de code dont vous avez besoin.
Si vous utilisez une page code-behind, basculez sur la page code-behind (TreeViewDynamic.aspx.vb ou TreeViewDynamic.aspx.cs) et ajoutez les lignes suivantes en haut du fichier de code, à l'extérieur de la déclaration de classe.
Imports System.Data Imports System.Data.SqlClientusing System.Data; using System.Data.SqlClient;Assurez-vous que la page est encore en mode Source.
Ajoutez la méthode suivante à la page de code :
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 Subvoid 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); } } }Le code crée un objet SqlCommand qui encapsule le texte de la requête. Il passe l'objet à une méthode (que vous allez écrire) qui exécute la requête de base de données et retourne un objet DataSet. Le code fait ensuite une boucle sur les enregistrements de l'objet DataSet et crée un nœud pour chaque enregistrement en définissant le texte et la valeur du nœud avec les informations sur la base de données. Puis, le code affecte true à la propriété PopulateOnDemand de chaque nœud afin qu'il déclenche son événement TreeNodePopulate lorsque l'utilisateur clique dessus. La propriété SelectAction est définie afin que les nœuds soient développés par défaut.
Le deuxième niveau de nœuds affichera les produits pour chaque catégorie. Pour cette raison, le remplissage des nœuds de produits requiert une requête paramétrée afin que vous puissiez récupérer les produits de la catégorie actuelle et remplir correctement les nœuds enfants.
Pour ajouter des nœuds aux produits
Ajoutez la méthode suivante à la page de code :
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 Subvoid 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); } } }Ce code est semblable au code utilisé pour remplir le nœud de catégories. Une différence est que l'objet SqlCommand est configuré avec un paramètre défini au moment de l'exécution avec la valeur du nœud sur lequel l'utilisateur a cliqué ; c'est-à-dire de la catégorie sélectionnée. Une autre différence est que la propriété PopulateOnDemand a la valeur false. Ainsi, les nœuds de produits sont affichés sans bouton de développement, ce qui est nécessaire, car il n'y a plus de nœud sous les produits.
L'étape définitive consiste à créer la méthode qui exécute la requête et retourne le groupe de données.
Pour effectuer la requête
Ajoutez la sous-routine suivante à la page.
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 Functionprivate 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; }Ce code crée un adaptateur de données basé sur l'objet SqlCommand passé. Puis, il crée et remplit un groupe de données avec l'adaptateur.
Vous pouvez à présent tester la page.
Pour tester la page
Appuyez sur CTRL+F5 pour exécuter la page.
Le contrôle TreeView est affiché avec une liste de catégories et de produits.
Cliquez sur une catégorie pour confirmer qu'elle réduit et se développe pour afficher une liste de produits pour chaque catégorie.
Étapes suivantes
Cette procédure pas à pas a utilisé à la fois des données XML hiérarchiques et une base de données relationnelle pour remplir un contrôle TreeView. Vous pouvez utiliser le contrôle TreeView pour utiliser les informations de navigation de site et les données XML comme les données sous forme de tableau (liste).
Pour plus d'informations sur la navigation de site, consultez Procédure pas à pas : ajout de la navigation de site à un site Web.
Pour plus d'informations sur une utilisation plus fréquente des données XML, consultez Procédure pas à pas : création d'une page Web pour afficher des données XML.
Voir aussi
Tâches
Procédure pas à pas : création d'une page Web pour afficher des données XML
Autres ressources
Comment : sécuriser des chaînes de connexion lors de l'utilisation de contrôles de source de données