Llenar un Control TreeView dinámicamente desde una Base de Datos, con ASP.NET 2005

El Control TreeView es un control jerárquico que normalmente se puede llenar desde un archivo XML o de forma manual, pero en ocasiones no se pueden tener los datos en un XML y necesitamos recuperarlos desde la Base de Datos. En este artículo veremos una forma de hacer este trabajo.

Descargar solución LlenarTreeViewASPX

Hace poco tuve el siguiente problema, necesitaba crear un menú en un control TreeView para una aplicación web, las opciones del menú varían según el usuario que ingrese al sistema. La idea básica era esa, bien, tener un archivo XML no me servía de nada, las opciones no eran fijas, sino que variaban, si creaba varios archivos XML no los podría controlar si se decide cambiar las opciones puesto que el Admin del sistema podía quitarle opciones a un usuario y mi Servidor Web no me da permiso de escribir archivos, en fin…. el análisis del problema demandaba mucho mas tiempo y más condiciones que solo las nombradas, ¿la solución? llenar el control TreeView directamente desde la Base de Datos.

Empezamos la aplicación creando la siguiente estructura de directorios, tal como muestra la imágen siguiente.

Ahora, no mostraré como crear las tablas ni como relacionarlas porque eso varía dependiendo de cada caso particular, es decir que la lógica de negocios de cada caso es muy diferente, lo que sí haré será mostrar como debería quedar la consulta del Stored Procedure para poder crear la estructura jerárquica del TreeView de forma correcta. Yo he considerado (en resúmen) una tabla de Módulos para los módulos de sistema (ejemplo: Módulo de ventas, módulo de compras, módulo de control de almacenes, etc.), una tabla de Grupos para las Opciones generales de menú (por ejemplo: Menú Pocesos, menú Consultas, menú Configuración, etc.) y una tabla de Opciones que contendrá las opciones del Sistema, es decir, los Casos de Uso o requerimientos funcionales según UML, además, esta tabla de Opciones debe tener un campo en particular que contenga el url de la página web que cada opción llamará (por ejemplo: la opción Generar Factura llamará al a página GenerarFactura.aspx). De este modo, la consulta que haga mi Stored Procedure debe quedar como muestra el siguiente gráfico.

Ahora, en el archivo adjunto que contiene el código solo hay una tabla con esa misma estructura, eso se debe como ya les dije a que los casos son diferentes y si coloco un SP que invoque los registros de la tabla es para dejar en claro que el acceso a datos SIEMPRE se debe realizar a través de un SP y JAMAS directamente desde la página web o alguna clase. En mi caso y solo como ejemplo, he tenido que utilizar aproximadamente 12 tablas para poder generar la consulta resultante, así que las relaciones de su BD las deben ver Uds.

Ahora, lo primero que haremos será crear la Clase que invocará al Stored Procedure desde la Base de Datos. Crearemos una Clase (obviamente en la carpeta App_Code y si no hubiera, creamos esta carpeta primero) llamada Usuario_DAL (el sufijo DAL es por Data Access Layer) y en esta clase escribiremos el siguiente código:

Bien, expliquemos el código. El constructor de esta clase recibe un parámetro llamado idUsuario, que debe ser el código del usuario que ingresa al Sistema y que servirá para hacer los filtros en las tablas para conseguir mostrar solo las opciones de cada usuario. El método leerOpciones como se darán cuenta retorna un objeto DataTable. Se ejecuta el Stored procedure que devuelve la consulta que se vió en el gráfico anterior como un SqlDataReader, esto para cortar la conexión con la Base de Datos en cuanto se ejecute esta acción, así liberamos la conexión con la Base de Datos. Este SqlDataReader se puede convertir fácilmente en un objeto DataTable usando el método Load de la instancia del DataTable, el parámetro LoadOption.OverwriteChanges solo indica que se deben sobreescribir los datos si es que hubiesen en el DataTable, como nuestro DataTable (dtt) esta vacío no nos preocupamos por eso. Cerramos la conexión que utilizó nuestro objeto SqlCommand y devolvemos nuestro DataTable.

Ahora, este proceso solo nos ha servido para poder devolver el DataTable, ahora, falta el proceso que carga las opciones en el TreeView y esto lo haremos en otra clase que vamos a crear (en la misma carpeta App_Code) y le llamaremos Usuario_BLL (el sufijo BLL se debe a Bussiness Logic Layer). En dicha clase escribiremos el siguiente código:

Analicemos. Esta clase no recibe parámetros en su constructor. Posee un único método llamado cargarOpcionesUsuario que recibe dos parámetros, el primero es el código del Usuario por el que haremos el filtro y el segundo es el nombre del control TreeView que llenaremos con las opciones.

Instanciamos un obejto de la clase Usuario_DAL pasandole como dato el id de usuario para que nos devuelva el objeto DataTable que necesitamos para hacer este trabajo.

La lógica para este último paso es bastante sencilla, en realidad se trata de recorrer la tabla e ir agregando las opciones a un nuevo objeto nodo (TreeNode), luego este nodo lo agregaremos como un nodo hijo a un nodo de nivel superior, en este caso el que contendrá los grupos y finalmente este nodo de grupos lo agregaremos a un nodo principal que será el que contenga los módulos. La idea es que por cada cambio en el campo de módulos, agreguemos un nuevo módulo, y por cada cambio en el campo grupos, agreguemos un nuevo grupo, en el caso de las opciones no es necesario hacer esta validación pues cada opción será diferente.

Un objeto TreeNode tiene 5 sobrecargas, yo he utilizado dos de ellas:
* nodoG = new TreeNode(grupo, filaM[2].ToString()); – Esta pide el texto que se mostrará al usuario y el valor que tendrá dicho nodo, en este caso el código del propio grupo.
* nodoG.ChildNodes.Add(new TreeNode(filaM[5].ToString(), filaM[4].ToString(), “”, filaM[6].ToString(), “_self”)); – Esta segunda forma ademas, pide una imágen para mostrar, que no hemos considerado, un URL para usarlo como Hipervínculo y en último lugar, la ventana de destino del enlace, que será nuestra propia ventana.

Ahora, en una página web agregamos un control TreeView y escribimos el siguiente código:

Obviamente en el Load de la página. el primer parámetro yo lo he considerado como fijo, pero en el caso de Uds. puede ser una variable de Session, o un dato recuperado del URL o de un form, etc. que será el que se envíe para el filtro en la clase de acceso a datos. El resultado final debe ser el que se muestra en esta imágen.

La recomendación que haría sería que colocanse su TreeView en un MasterPage y a partir de él hiciesen sus páginas. Espero que este artículo les sea de utilidad y que lo apliquen, si le hacen alguna mejora, compartanla!!!

Saludos, hasta el próximo artículo.

Descargar solución LlenarTreeViewASPX

40 comments

  1. Anónimo - December 28, 2006 5:13 pm

    Hanz, gracias por el articulo, esta muy bueno.

    Reply
  2. Anónimo - January 10, 2007 6:41 pm

    HOLA COMO ESTAN ME GUSTARIA Q MUESTREN UNA CONEXION SQL SERVER CON ASP.NET UN MANTENIMIENTO COMPLETO CON TRES TABLAS PROGRAMADAS EN CAPAS

    Reply
  3. Anónimo - January 26, 2007 11:02 am

    Felicitaciones brother, esta muy bueno el artículo sería más excelente si le agregaras algo más como cuando seleccione un item despliegue otra página…

    Reply
  4. Anónimo - January 27, 2007 9:18 am

    Respecto al mantenimiento completo con ASP .NET con tres tablas en capas, trataré de darme un tiempo para hacerlo y poder publicarlo.

    En cuanto a lo de seleccionar un Item y que se despliegue una página se puede conseguir usando los 5 parámetros para agregar un nodo. Ejemplo: Usaría el constructor de 5 parámetros para el Item Almacén si quisiera que al hacerle clic se muestre una pantalla de almacén.

    Como ves, no es algo muy complicado de implementar.

    Saludos.

    Reply
  5. Anónimo - January 30, 2007 2:41 pm

    que pasa si al Tree queremos agregar un nivel de profundidad mayor? el modelo no lo soporta

    ejemplo:

    ventas->procesos->factura->imprimir factura

    Reply
  6. Anónimo - January 31, 2007 9:54 am

    No amigo, este modelo, planteado para una alternativa con 3 niveles, no soportaría de forma correcta una mayor profundidad, para esos casos se tendría que hacer la modificación correspondiente al ejemplo.

    Saludos.

    Reply
  7. Anónimo - March 4, 2007 10:50 pm

    hola que tal muy buen articulo, te importaria si pones o me mandas el codigo de tu sp ya que no entiendo muy bien la consulta y como es que le asignas el hijo a casa uno de los padres, gracias y saludos, ahernandez@sanimex.com.mx

    Reply
  8. Anónimo - March 27, 2007 1:51 am

    El articulo esta super, lastimosamente no lo he podido hacer porque estoy aprendiendo este lenguaje y no puedo agregar la data, tambien queria preguntar si puedo omitir el codigo del usuario

    Reply
  9. Anónimo - April 4, 2007 3:15 am

    El articulo esta genial, pero como se podria hacer para añadir a cada hijo por ejemplo 2 links o 2 imagenes si quieres gestionar que desde cada hijo haga 2 acciones diferentes.
    Muchas graicas y ole

    Reply
  10. Anónimo - April 13, 2007 10:46 am

    Bien Hamz, muy bien.

    Reply
  11. Anónimo - May 31, 2007 3:52 pm

    Hola. Me llamo Ariadna.
    Esta bueno el articulo.
    Yo ando buscando como crear un treeview a partir de un archivo XML.
    El treeview tiene 5 niveles en ciertos casos, y tiene varios parametros.

    Si alguien me puede decir como le hago para crear el arbol poniendole sus parametros.

    Mi correo es andaira_nena@hotmail.com
    Saludos.

    Reply
  12. Anónimo - July 22, 2007 2:21 pm

    Excelente… seria bueno que lo tengas tambien en VB, si la tienes porfavor enviamela alfredzaro@hotmail.com. gracias

    Reply
  13. Anónimo - August 2, 2007 3:36 pm

    Muy buen articulo gracias.
    Una duda : cuales son las ventajas y desvetajas entre generar el treeview como esta planteado en este arituclo y hacerlo mediante un archvo xml ?

    Reply
  14. Anónimo - October 1, 2007 12:07 pm

    ESTA DE LUJO ME GUSTARIA COMPARTIR CONCEPTOS CON USTED ESTOY EN UN NIVEL DE PROGRAMACION MEDIO PERO CONOSCO VARIOS TRUCOS MI CORREO ES nacho_870@hotmail.com

    Reply
  15. Anónimo - October 12, 2007 9:12 am

    Usa Nhibernate

    Reply
  16. Anónimo - October 12, 2007 9:13 am

    Usa Nhibernate para hascer tus manteniientox en NCapas con Aspx.net 2.0 and Ajax

    Reply
  17. Anónimo - March 31, 2008 10:28 am

    Oki, gracias me sirvio de mucho.. Sale vale..

    Reply
  18. Anónimo - June 2, 2008 4:54 pm

    Puedes hacerlo pero sin ASP tengo un sistema hecho en C# pero es una aplicacion de escritorio.
    Necesito llenar el treeview con una BD :S ayudaaaaaaaaa

    Reply
  19. Anónimo - June 6, 2008 11:17 am

    hola, se podria hacer este mismo ejemplo pero llenarlo desde una carpeta? que si esta carpeta tiene subcarpetas y archivos los muestre respetando la gerarquia de niveles, los cuales podrian ser N niveles

    muy buen articulo!!

    Reply
  20. Anónimo - June 7, 2008 11:44 pm

    muy buen articulo me ayudo mucho de verdad gracias..!
    solo me gustaria saber si se le puede agregar algo como asi como dandole click a uno de los articulos me puede llevar a una pagina nueva..!

    Reply
  21. Anónimo - July 2, 2008 2:33 pm

    en el momento de ejecutar el programa necesito que el treeview carga datos desde sql server 2005 y si escojo otro tema carguen otros datos datos en el mismo treview en el momento de la ejecucion.

    MUY BUENO EL ARTICULO PERO NECESITOESTO PORFAVOR

    Reply
  22. Anónimo - September 8, 2008 5:17 pm

    hola estoy trabajando en un treeview de 6 niveles y me interesa mucho ver tus tablas y el sp, te lo agradeceria mucho… mmimos@gmail.com

    Reply
  23. Anónimo - October 20, 2008 11:52 am

    hola estimado,
    estoy haciendo mi tesis y tenia el mismo
    problema.
    Su codigo lo estoy tratando de usar en un masterpage.
    pero al hacer postback pierde el orden de los nodos.
    Me explico: solo esta abierto el nodo procesos y haglo clik en emitir factura
    y carga otra la pagina factura, pero el nodo al cargar la nueva pagina no queda abierto solo el nodo de procesos, si no que se abren todos.

    me puedes ayudar?

    ellempen@hotmail.com

    Reply
  24. Anónimo - November 11, 2008 9:30 am

    Oye Doctor la Cadena de conexion esta en el archivo web.config

    Reply
  25. Anónimo - January 31, 2010 6:23 pm

    Excelente

    Reply
  26. Anónimo - August 2, 2010 10:15 pm

    ya no se puede descargar el ejemplo. Se podrá actualizar este tema?

    Reply
  27. Anónimo - August 23, 2010 3:26 pm

    te amo me alegraste el dia

    Reply
  28. Anónimo - August 24, 2010 10:24 am

    SELECT G.PADRE,PA.NOMBRE AS NOMBREPADRE, G.CODGRUPO AS CODGRUPO,G.NOMBRE as GRUPONOMBRE,P.CODPRODUCTO,P.NOMBRE PRODUCTONOMBRE,P.CODPRODUCTO FROM PRODUCTO P, GRUPO G , GRUPO PA WHERE P.CODGRUPO=G.CODGRUPO AND PA.CODGRUPO=G.PADRE ORDER BY GRUPONOMBRE ASC

    Reply
  29. Anónimo - October 4, 2010 5:44 pm

    Muy, pero muy bueno

    Reply
  30. Anónimo - October 22, 2010 6:33 am

    muchisimas gracias, me ha servido de mucho

    Reply
  31. Anónimo - November 29, 2010 5:17 am

    Excelente, me sirvio de mucho el código que muestras.

    Un aporte.

    Observen el siguiente link:

    http://www.highoncoding.com/Articles/714_Populating_ASP_NET_TreeView_Control_Recursively.aspx

    Creo que en este artículo se toman todas las variantes posibles con el TreeView.

    Reply
  32. Anónimo - November 29, 2010 5:55 pm

    buenisimo

    Reply
  33. Anónimo - February 4, 2011 10:03 am

    lo ultimo esta bueno gracias es lo que buscaba :)

    Reply
  34. Anónimo - September 12, 2011 1:52 pm

    Puedo hacer esto en mi aplicacino de excritorio?

    Reply
  35. Anónimo - January 13, 2012 1:21 pm

    Hola seria genial poder conseguir la data de este ejemplo

    http://www.highoncoding.com/Articles/714_Populating_ASP_NET_TreeView_Control_Recursively.aspx

    Saludos.

    Reply
  36. Anónimo - February 22, 2012 12:16 pm

    De este tipo de ayuda deben ser en los programadores no los payaitos que todo se ocultan muy bien me ayudo mucho Saludos.

    Reply
  37. Anónimo - May 19, 2012 11:48 am

    genial, criterio y conocimiento son dos grandes virtudes que vos tenes y no dudas en compartirlas

    Reply
  38. Anónimo - July 19, 2012 3:54 am

    Hi, I am curious how do we acvhiee Horizontal Menu with Horizontal SubMenu using CSS Control Adapter Toolkit? That means when user clicks on the top layer Menu, the SubMenu will be displayed horizontally as well which i can’t find any tutorial of how to acvhiee that using CSS Control Adapter Toolkit. Thank you very much.

    Reply
  39. anonimo - August 18, 2013 11:16 am

    Realmente no conozco mucho, pero el artículo se entiende que fue confeccionado por un buen programador. Felicidades amigo. Cuando domine mas la programación lo enteré. Por el momento a los favoritos.

    Reply
  40. Natty - March 19, 2014 9:17 am

    Puedo modificar un TreeView que esta ubicado dentro de un ContentPlaceHolder de mi MasterPage ? Quiero modificarlo desde una pagina heredada de mi MasterPage dependiendo de las acciones que solicite el usuario.

     

    Reply

Have your say