Tutorial: Mostrar datos jerárquicos en un control TreeView
Actualización: noviembre 2007
El control ASP.NET TreeView está diseñado para presentar a los usuarios con datos en una estructura jerárquica. Los usuarios pueden abrir nodos individuales que, a su vez, pueden contener nodos secundarios. El control TreeView es adecuado para mostrar datos XML, pero se puede utilizar para todos los datos que se puedan representar en una jerarquía. Este tutorial le muestra los fundamentos del uso del control TreeView y distintas maneras de mostrar datos jerárquicos.
Las tareas ilustradas en este tutorial incluyen:
Utilizar el control TreeView para mostrar datos XML.
Personalizar la presentación del control TreeView.
Mostrar registros de tablas de base de datos relacionadas en el control TreeView.
Requisitos previos
Para poder completar este tutorial, necesitará:
Microsoft Visual Web Developer (Visual Studio).
Microsoft Data Access Components (MDAC) versión 2.7 o posterior.
Si utiliza Microsoft Windows XP o Windows Server 2003, ya dispone de MDAC 2.7. Sin embargo, si utiliza Microsoft Windows 2000, quizá tenga que actualizar la versión de MDAC instalada en el equipo. Para obtener más información, vea "Microsoft Data Access Components (MDAC) Installation" en MSDN Library.
Obtener acceso a la base de datos Northwind de SQL Server. Para obtener información sobre cómo descargar e instalar la base de datos de ejemplo Northwind de SQL Server, vea Installing Sample Databases en el sitio Web de Microsoft SQL Server.
.gif "Nota")
Nota:Si necesita información sobre cómo iniciar sesión en el equipo en el que se ejecuta SQL Server, póngase en contacto con el administrador del servidor.
Un nombre de usuario y una contraseña para una cuenta de SQL Server que tenga acceso a la base de datos Northwind, si la base de datos de SQL Server no se encuentra en el mismo equipo que el servidor Web.
Crear el sitio Web
Cree un sitio Web y una página nuevos siguiendo estos pasos.
Para crear un sitio Web del sistema de archivos
Abra Visual Web Developer.
En el menú Archivo, haga clic en Nuevo y, a continuación, haga clic en Sitio Web. Si utiliza Visual Web Developer Express, en el menú Archivo, haga clic en NuevoSitio Web.
Aparece el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de ASP.NET.
En el cuadro Ubicación, seleccione Sistema de archivos y escriba el nombre de la carpeta en la que desea conservar las páginas de su sitio Web.
Por ejemplo, escriba el nombre de carpeta C:\WebSites\HierarchicalData.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
Haga clic en Aceptar.
Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.
Crear un archivo XML para datos
Cree un nuevo archivo XML siguiendo los pasos que se indican a continuación.
Para crear el archivo XML
En el Explorador de soluciones, haga clic con el botón secundario del mouse (ratón) en el sitio Web y, a continuación, haga clic en Agregar nuevo elemento.
En el cuadro de diálogo Agregar nuevo elemento, en Estándar, Plantillas, haga clic en Archivo XML.
En el cuadro Nombre, escriba Bookstore.xml y haga clic en Agregar.
Visual Web Developer crea el nuevo archivo Bookstore.xml y abre el editor de código.
Copie los siguientes datos XML y después péguelos en el archivo Bookstore.xml, de modo que se sobrescriba toda la información existente.
<?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>El archivo XML contiene información acerca de los libros que podrían estar disponibles en una librería en línea.
Guarde el archivo Bookstore.xml y ciérrelo.
Mostrar datos XML en el control TreeView
En esta sección utilizará el control TreeView para mostrar los datos XML. Para empezar, puede hacer que se muestre la información XML sin ninguna configuración especial.
Para mostrar los datos XML
Abra la página Default.aspx y, a continuación, cambie a la vista Diseño.
En el Cuadro de herramientas, arrastre un control TreeView desde el grupo Exploración hasta la página.
Haga clic con el botón secundario del mouse (ratón) en el control TreeView y, a continuación, seleccione Mostrar etiqueta inteligente.
En el menú Tareas de Treeview, en la lista desplegable Elegir origen de datos, seleccione Nuevo origen de datos. Aparece el Asistente para la configuración de orígenes de datos.
En la ventana ¿De dónde obtendrá la aplicación los datos?, seleccione Archivo XML. Deje el id. predeterminado para el origen de datos. Haga clic en Aceptar.
En el cuadro de diálogo Configurar origen de datos, en el cuadro Archivo de datos, escriba ~/Bookstore.xml y, a continuación, haga clic en Aceptar.
Ya puede probar la página.
Para probar la página
Presione CTRL+F5 para ejecutar la página.
Contraiga los nodos del control y, a continuación, expándalos.
De forma predeterminada, los nodos sólo muestran los nombres de etiqueta de los elementos que hay en el archivo Bookstore.xml.
Puede personalizar la información que se muestra en el control TreeView mediante la creación de enlaces personalizados, que le permiten especificar qué información del archivo XML debe mostrarse para cada nodo.
Para crear enlaces personalizados
En la página Default.aspx, haga clic con el botón secundario del mouse (ratón) en el control TreeView y, a continuación, haga clic en Mostrar etiqueta inteligente.
En el menú Tareas de Treeview, haga clic en Editar enlaces de datos de TreeNode.
Aparecerá el cuadro de diálogo Editor de DataBinding de TreeView.
Desactive la casilla de verificación Generar automáticamente enlaces de datos, porque definirá los enlaces de datos.
Haga clic en Agregar para crear un nuevo enlace, y a continuación, en Propiedades de enlace de datos, establezca DataMember como librería y establezca Text como Información de libros.
Va a configurar el enlace para que se muestre un valor estático, porque el nodo Librería es el que se encuentra en la parte superior del archivo .xml y sólo aparece una vez en el control TreeView.
Haga clic en Agregar para crear un segundo enlace, y a continuación, en Propiedades de enlace de datos, establezca DataMember como género y TextField como nombre.
Así se especifica que el nodo leerá el elemento <genre> en el archivo .xml y asignará su atributo name a la propiedad TextField.
Haga clic en Agregar para crear un tercer enlace para los libros, y a continuación, en Propiedades de DataBinding, establezca DataMember como libro y TextField como ISBN.
Haga clic en Aceptar.
Ya puede probar la página.
Para probar la página
Presione CTRL+F5 para ejecutar la página.
En esta ocasión, el control TreeView muestra los tres niveles que corresponden a los enlaces que ha definido. Los tres niveles son el nodo raíz, con la etiqueta Información de libros, los grupos de géneros y los datos de ISBN.
Puede crear un enlace de datos para cualquier elemento de un archivo XML, pero sólo puede enlazar con los atributos del elemento, el texto interior, el nombre del elemento o el valor del elemento. No se puede enlazar con ninguno de los elementos anidados. Para mostrar los valores en los elementos anidados, cree enlaces independientes a esos elementos. Un método alternativo consiste en transformar el archivo XML mediante XSLT, de modo que los elementos internos se conviertan en atributos. Para obtener más información y un ejemplo, vea la propiedad XmlDataSource.TransformFile.
Mostrar datos relacionales en el control TreeView
El control TreeView puede mostrar cualquier tipo de datos jerárquicos, incluso si la jerarquía de datos es lógica, como ocurre en una base de datos, y no física, como en un archivo XML. En esta sección utilizará el control TreeView para mostrar datos de las tablas relacionadas en la base de datos Northwind.
Para empezar, creará una conexión al equipo en el que se ejecuta SQL Server y se encuentra la base de datos Northwind.
Para crear una conexión con SQL Server
En el Explorador de servidores, haga clic con el botón secundario del mouse (ratón) en Conexiones de datos y, a continuación, en Agregar conexión. Si utiliza Visual Web Developer Express, use el Explorador de base de datos.
Aparecerá el cuadro de diálogo Agregar conexión.
Si en la lista Origen de datos no se muestra Microsoft SQL Server (SqlClient), haga clic en Cambiar y, en el cuadro de diálogo Cambiar origen de datos, seleccione Microsoft SQL Server.
Si aparece la página Elegir origen de datos, seleccione en la lista Origen de datos el tipo de origen de datos que va a utilizar. Para este tutorial, el tipo de origen de datos es Microsoft SQL Server. En la lista Proveedor de datos, haga clic en Proveedor de datos de .NET Framework para servidor SQL Server y después haga clic en Continuar.
Nota:Si la ficha Explorador de servidores no está visible en Visual Web Developer, en el menú Ver haga clic en Explorador de servidores. Si la ficha Explorador de base de datos no está visible, en el menú Ver haga clic en Explorador de base de datos.
En el cuadro Agregar conexión, escriba el nombre de su servidor en Nombre de servidor.
En la sección Conexión con el servidor, seleccione la opción que resulte apropiada para el acceso a la base de datos de SQL Server que se ejecuta (seguridad integrada o id. y contraseña específicos) y, si es necesario, especifique un nombre de usuario y una contraseña.
Active la casilla de verificación Guardar mi contraseña.
Nota:En aplicaciones de producción, no utilice Guardar mi contraseña, porque con esta opción se incrustan el nombre de usuario y la contraseña en los archivos de aplicación.
En Seleccionar o escribir nombre de base de datos, escriba Northwind.
Haga clic en Probar conexión y, cuando esté seguro de que funciona, haga clic en Aceptar.
La nueva conexión se ha creado bajo Conexiones de datos en el Explorador de servidores (o en el Explorador de base de datos).
Configurar un control TreeView para que se muestren datos de bases de datos
En esta sección rellenará nodos con datos dinámicamente. Los nodos de primer nivel representarán los datos principales (en este caso, categorías). Cuando los usuarios hagan clic en un nodo, se crearán los nodos secundarios de la categoría mediante una consulta a la base de datos con la que se recuperen los productos de esa categoría. Para recuperar los datos, puede utilizar un control de origen de datos. Sin embargo, en este tutorial creará y ejecutará una consulta mediante programación.
Para comenzar, cree una nueva página y un nuevo control TreeView.
Para crear la nueva página y el control TreeView
Agregue al sitio Web una página Web ASP.NET (página de formularios Web Forms) con el nombre TreeViewDynamic.aspx.
Abra la página TreeViewDynamic.aspx, cambie a la vista Diseño y, a continuación, en Toolbox, arrastre desde el grupo Estándar un control Label hasta la página y asígnele el nombre labelStatus.
El control labelStatus sólo se utiliza para generar informes de errores.
En el Cuadro de herramientas, arrastre un control TreeView desde el grupo Exploración hasta la página.
Haga clic con el botón secundario del mouse en el control TreeView, haga clic en Propiedades y, a continuación, establezca MaxDataBindDepth como 2.
Haga clic con el botón secundario del mouse en el control TreeView, haga clic en Mostrar tareas inteligentes y, a continuación, en el menú Tareas de Treeview, haga clic en Editar nodos.
En el cuadro de diálogo Editor del nodo de TreeView, haga clic en el icono que tiene la etiqueta Agregar un nodo raíz y, en Propiedades, establezca Text como Lista de productos y PopulateOnDemand como true.
Haga clic en Aceptar.
Crea el nodo superior del árbol, que sólo contiene texto estático.
Para configurar el archivo Web.config
En el Cuadro de herramientas, arrastre un control SqlDataSource desde el grupo Datos hasta la página.
Seleccione el control SqlDataSource y, a continuación, haga clic en Mostrar etiqueta inteligente.
En el menú Tareas de SqlDataSource, haga clic en Configurar origen de datos.
El asistente Configurar origen de datos - SqlDataSource1 muestra una página en la que puede elegir una conexión.
En el cuadro ¿Qué conexión de datos debería utilizar la aplicación para conectarse a la base de datos?, escriba la conexión que creó en "Para crear una conexión a SQL Server" y, a continuación, haga clic en Siguiente.
El asistente muestra una página que le permite almacenar la cadena de conexión en un archivo de configuración. Si se almacena la cadena de conexión en el archivo de configuración, se tienen dos ventajas:
Es más seguro que su almacenamiento en la página.
Puede utilizar la misma cadena de conexión en varias páginas.
Active la casilla de verificación Sí, guardar esta conexión como y haga clic en Siguiente.
El asistente muestra una página donde se puede especificar los datos que se desea recuperar de la base de datos.
En Especificar columnas de una tabla o vista, en el cuadro Nombre, haga clic en Categorías.
En Columnas, seleccione los cuadros CategoryID y CategoryName.
Haga clic en Siguiente.
Haga clic en Finalizar.
Utilizará la cadena de conexión creada en el archivo Web.config más adelante, en el método RunQuery que se define posteriormente en este tutorial. No utilizará el control SqlDataSource.
Ahora agregará código para rellenar los nodos secundarios del control cuando los usuarios hagan clic en el nodo. Para agregar nodos dinámicamente, cree un controlador de eventos para el evento TreeNodePopulate.
Para crear el controlador de eventos
Haga clic con el botón secundario del mouse en el control TreeView y, en Propiedades, haga clic en el icono Eventos.
Haga doble clic en el cuadro para el evento TreeNodePopulate.
Visual Web Developer cambia a la vista Código fuente.
Agregue al controlador el código resaltado que se muestra a continuación.
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; } } }Se llama a este código cuando un usuario hace clic en un nodo para abrirlo. Dado que desea que se muestren datos distintos en diferentes niveles del árbol, deberá determinar en qué profundidad ha hecho clic el usuario y, a continuación, rellenar adecuadamente los nodos de ese nivel. En este tutorial se llama al método PopulateCategories si el usuario hace clic en el nodo raíz (profundidad 0). Se llama al método PopulateProducts si el usuario hace clic en un nombre de categoría (profundidad 1). Los métodos se muestran en la sección siguiente.
El objeto TreeNodeEventArgs proporciona acceso mediante programación al nodo actual. Para rellenar el nodo, agréguele elementos. En el código de ejemplo, el nodo se pasa al método que agregará los nodos secundarios.
Leer datos de nodos de la base de datos
La información que se debe mostrar en cada nodo procede de la base de datos. Debe escribir el código encargado de realizar la consulta de la base de datos, leer los registros y crear un nodo para cada registro. En este tutorial se supone que está trabajando con la base de datos de SQL Server de ejemplo Northwind, por lo que debe utilizar objetos ADO.NET del espacio de nombres System.Data.SqlClient.
Para el primer nivel de nodos (nivel 0), hará que se muestre una lista de todas las categorías disponibles. El código que cree llama a un método RunQuery que creará después en el tutorial.
Para agregar nodos para todas las categorías
Cambie a la vista de código fuente.
Si está trabajando con una página de un solo archivo, agregue las directivas siguientes a la parte superior de la página de código.
<%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %>Si importa los espacios de nombres le resultará más fácil escribir el código que necesita.
Si trabaja con una página con código subyacente, cambie a esa página (TreeViewDynamic.aspx.vb o TreeViewDynamic.aspx.cs) y agregue las líneas que se indican a continuación a la parte superior del archivo de código, fuera de la declaración de clase.
Imports System.Data Imports System.Data.SqlClientusing System.Data; using System.Data.SqlClient;Asegúrese de que la página todavía está en la vista Código fuente.
Agregue el método siguiente al código de la página.
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); } } }El código crea un objeto SqlCommand que encapsula el texto de la consulta. Pasa el objeto a un método (que escribirá) que realiza la consulta a la base de datos y devuelve un objeto DataSet. A continuación, el código recorre los registros del objeto DataSet y crea para cada registro un nuevo nodo, del que se establece el texto y el valor con información de la base de datos. A continuación, el código establece la propiedad PopulateOnDemand de cada nodo en true para que el nodo inicie su evento TreeNodePopulate cuando se hace clic. Se establece la propiedad SelectAction para que se expandan los nodos de forma predeterminada.
El segundo nivel de nodos mostrará los productos de cada categoría. Por eso, para rellenar los nodos de productos se necesita una consulta con parámetros que permita recuperar los productos de la categoría actual y rellenar los nodos secundarios según corresponda.
Para agregar nodos de productos
Agregue el método siguiente al código de la página.
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); } } }Este código es similar al código utilizado para rellenar el nodo de categorías. Una de las diferencias es que el objeto SqlCommand se configura con un parámetro que se establece en tiempo de ejecución con el valor del nodo en el que ha hecho clic el usuario; es decir, de la categoría seleccionada. Otra diferencia estriba en que la propiedad PopulateOnDemand se establece en false. Esto provoca que se muestren los nodos de los productos sin botón de expansión, lo que es necesario porque no hay ningún nodo más debajo de los productos.
El paso final consiste en crear el método que realiza la consulta y devuelve el conjunto de datos.
Para realizar la consulta
Agregue la siguiente subrutina a la página.
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; }Con este código se crea un adaptador de datos basado en el objeto SqlCommand que se le pasa. A continuación, se crea y se rellena un conjunto de datos con el adaptador.
Ya puede probar la página.
Para probar la página
Presione CTRL+F5 para ejecutar la página.
El control TreeView se muestra con una lista de categorías y productos.
Haga clic en una categoría con objeto de confirmar que se contrae y se expande para mostrar una lista de productos en cada categoría.
Pasos siguientes
En este tutorial se han utilizado datos XML jerárquicos y una base de datos relacional para rellenar un control TreeView. Puede utilizar el control TreeView para trabajar con información de exploración del sitio y datos XML como datos tabulares (de lista).
Para obtener información detallada acerca de la exploración de sitios, vea Tutorial: Agregar la función de exploración de sitios Web.
Para ampliar información acerca del trabajo con datos XML, vea Tutorial: Crear una página Web para mostrar datos XML.
Vea también
Tareas
Tutorial: Crear una página Web para mostrar datos XML
Otros recursos
Cómo: Proteger cadenas de conexión al utilizar controles de orígenes de datos