El Demo del Día: Preview de Imágenes en un TreeView de Directorios en WebForms

Preview de Imágenes en un TreeView de Directorios en WebForms

En este breve post veremos como mostrar los directorios de una cierta carpeta de la Aplicación Web, por ejemplo de las Imágenes. Para esto usaremos el control TreeView para mostrar jerárquicamente los directorios y el control Repeater para listar los archivos y ver las imágenes del directorio seleccionado.

Crear la Aplicación Web en ASP .NET Web Form

Crear un "Nuevo Sitio web vacío de ASP .NET" en C# llamado "TreeViewDirectorios_PreviewImagenes". Crear la siguiente estructura de carpetas en el proyecto:
- Estilos: Contiene el archivo de hoja de estilo ACME.css
- Imagenes: Contiene las carpetas Empleados y Productos
  - Empleados: Contiene archivos de los empleados del 01.jpg al 08..jpg
  - Productos: Contiene las siguientes carpetas
    - Bebidas: Contiene archivos jpg con bebidas.
    - Condimentos: Contiene archivos jpg con condimentos.
    - Confecciones: Contiene archivos jpg con confecciones.
- Paginas: Contiene el formulario web VisorImagenes.aspx

Crear el Archivo de Hoja de Estilo

En la carpeta "Estilos" agregar un archivo de hoja de estilo llamado "ACME.css" y escribir lo siguiente:

body {

    background-color:lightgray;

}

.Titulo {

    background-color:black;

    color:white;

    text-transform:uppercase;

    font-size:xx-large;

    font-weight:bold;

}

.Subtitulo {

    background-color:white;

    color:black;

    text-transform:capitalize;

    font-size:x-large;

    font-weight:bold;

}

.Imagen {

    width:120px;

    height:100px;

    border:solid;

    border-width:20px;

    border-color:lightgray;

}

.Imagen:hover {

    cursor:pointer;

    border:solid;

    border-width:20px;

    border-color:yellow;

}

Crear la Pagina como Formulario WebForm

En la carpeta "Paginas" agregar un formulario WebForm llamado: "VisorImagenes.aspx" y escribir lo siguiente:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="VisorImagenes.aspx.cs" Inherits="TreeViewDirectorios_PreviewImagenes.Paginas.VisorImagenes" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="../Estilos/ACME.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr class="Titulo">
                <td colspan="2">Preview de Imagenes en un TreeView de Directorios</td>
            </tr>
            <tr class="Subtitulo">
                <td colspan="2">Creado Por: Luis Duenas</td>
            </tr>
            <tr>
                <td style="vertical-align:top">
                    <asp:TreeView ID="tvwDirectorio" runat="server"
                        OnSelectedNodeChanged="mostrarImagenesDirectorio"/>
                </td>
                <td>
                    <asp:Repeater ID="rptImagen" EnableViewState="false" runat="server">
                        <ItemTemplate>
                            <img src="<%#obtenerUrl(Container.DataItem.ToString())%>"                              
                                title="<%#obtenerNombre(Container.DataItem.ToString())%>"
                                class="Imagen" alt="" />
                        </ItemTemplate>
                    </asp:Repeater>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Nota: Es importante que se desactive el ViewState del Repeater para dismunir el HTML generado en el cliente, ya que no es necesario, porque en el servidor se esta enlazando el control Repeater cada vez que se elige un directorio (optmización del HTML enviado al cliente).

El diseño de la pagina debe mostrase similar a la siguiente figura:

Escribir el siguiente código C# para la pagina:

using System;

using System.Drawing;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.IO;

namespace TreeViewDirectorios_PreviewImagenes.Paginas

{

    public partial class VisorImagenes : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            if (!Page.IsPostBack)

            {

                string ruta = Server.MapPath("../Imagenes");

                IEnumerable<string> listaDirectorios = Directory.EnumerateDirectories(ruta);

                TreeNode nodoRaiz = new TreeNode("Imagenes");

                tvwDirectorio.Nodes.Add(nodoRaiz);

                llenarNodos(nodoRaiz, listaDirectorios);

                tvwDirectorio.ExpandAll();

                tvwDirectorio.SelectedNodeStyle.BackColor = Color.Yellow;

                tvwDirectorio.SelectedNodeStyle.ForeColor = Color.Red;

            }

        }

        private void llenarNodos(TreeNode nodoPadre, IEnumerable<string> listaDirectorios)

        {

            foreach(string directorio in listaDirectorios)

            {

                TreeNode nodo = new TreeNode(Path.GetFileName(directorio));

                nodoPadre.ChildNodes.Add(nodo);

                IEnumerable<string> lista = 

                Directory.EnumerateDirectories(Path.Combine(Server.MapPath("../"), 

                nodo.ValuePath));

                if(lista.Count() > 0) llenarNodos(nodo, lista);

            }

        }

        protected void mostrarImagenesDirectorio(object sender, EventArgs e)

        {

            string directorio = Path.Combine(Server.MapPath("../"),

            tvwDirectorio.SelectedNode.ValuePath.Replace(@"/", @"\"));

            IEnumerable<string> archivos = Directory.EnumerateFiles(directorio, "*.jpg");

            rptImagen.DataSource = archivos;

            rptImagen.DataBind();

        }

        protected string obtenerUrl(string archivo)

        {

            return String.Format("../{0}/{1}", 

            tvwDirectorio.SelectedNode.ValuePath,Path.GetFileName(archivo));

        }

        protected string obtenerNombre(string archivo)

        {

            return Path.GetFileName(archivo);

        }

    }

}

Nota: Para leer directorios estamos usando Directory.EnumerateDirectories y para leer archivos estamos usando Directory.EnumerateFiles que es la forma mas eficiente de leer en .NET ya que solo crea un registro a la vez (consume menos memoria y es mas rápido).

Además se usa una función recursiva para llenar el TreeView con los directorios llamada "llenarNodos" que usa la propiedad ValuePath que obtiene la ruta del nodo actual.

También se definen 2 métodos protegidos: "obtenerUrl" y "obtenerNombre" que se usan en el HTML del Repeater.

Probar la Pagina Web

Guardar el Sitio Web, clic derecho a la Pagina "VisorImagenes.aspx" y seleccionar "Ver en el explorador". Se mostrará una ventana similar a la siguiente figura:

Observar como se muestra todas lar carpetas creadas dentro de la carpeta "Imagenes" en el TreeView, ahora seleccionar un directorio, por ejemplo "Empleados" y se mostrará las imágenes que esta contiene, similar a la siguiente figura:

Notar que al poner el mouse sobre una imagen se muestra como tooltip el nombre del archivo de imagen.

Ahora seleccionar otro directorio, por ejemplo "Bebidas" y disminuir el ancho del navegador (como si fuera una Tabla) y se muestra menos columnas pero el Diseño Web es Adaptativo (Responsive Web Design), tal como se ve en la siguiente figura:

Para finalizar, seleccionar otro directorio, por ejemplo "Condimentos" y disminuir aún mas el ancho del navegador (como si fuera un Teléfono Celular) y nuevamente el diseño se adapta mostrando una sola columna, tal como se ve en la siguiente figura:

Comentario Final

En este pequeño demo, hemos visto como llenar un TreeView en WebForms con los directorios de una cierta carpeta usando una función recursiva, además de como hacer el preview de su contenido usando un control Repeater y Plantillas de Datos con código incrustado en el servidor (las 2 funciones obtener). Además para mejorar la apariencia se hace usado hojas de estilo (CSS).

A los visitantes del Blog que no han sido alumnos míos y que a veces tienen pedidos que se hacen en clases en el programa PECI .NET o Web Developer, no es mi intención repetir lo que se ve en clases, sino, publicaríamos un Demo diario y el tiempo no me alcanzaría.

Saludos a todos y recuerden la frase: "Somos lo que pensamos de nosotros mismos".

Descarga

TreeViewDirectorios_PreviewImagenes

El Demo del Día: Selección Jerárquica en TreeView con CheckBox

Selección Jerárquica en TreeView con CheckBox

En este post veremos como trabajar en una aplicación Windows Forms con un TreeView que tenga CheckBoxes para poder seleccionar en forma jerárquica varios nodos al marcar o desmarcar el check del nodo padre.

Requerimientos

- Se desea llenar en forma dinámica un control TreeView (estructura jerárquica) desde una Lista de Objetos (estructura matricial).

- El TreeView debe contener CheckBox para cada elemento.

- Al marcar o desmarcar el Check de un nodo deberían marcarse o desmarcarse todos sus nodos hijos.

Solución

- Usaremos el Control TreeView de Windos Forms y configuraremos la propiedad "CheckBoxes" en true para habilitar los Checks en cada nodo.

- Se usará la recursividad para cargar la lista de objetos en los nodos.

- Finalmente en el evento "AfterCheck" usando también recursividad se marcara o desmarcara los nodos hijos del nodo padre.

Crear una Aplicación Windows Forms en C#

En Visual Studio crear un proyecto Windows Forms en C# con el nombre de "TreeView_CheckBox", luego cambiar el nombre del formulario a "frmListaEmpleados".

Agregar una Clase Entidad de Negocio para el Empleado

Crearemos un ejemplo que trabaje con una lista de empleados que se cargará desde una Lista de Objetos que se llena manualmente pero puede obtenerse desde una base de datos.

Para esto hay que crear una clase llamada "beEmpleado.cs", y escribir el siguiente código:

using System;
namespace TreeView_CheckBox
{
    public class beEmpleado
    {
        public int IdEmpleado { get; set; }
        public string Nombres { get; set; }
        public int IdJefe { get; set; }
    }
}

Crear el Formulario con el TreeView con CheckBoxes

En el formulario llamado "frmListaEmpleados" agregar un TreeView llamado "tvwEmpleado" y acoplarlo a toda la ventana (Dock en Fill), luego configurar la propiedad "CheckBoxes" en true, tal como se muestra en la siguiente figura:

Escribir el siguiente código en el formulario:

using System;

using System.Collections.Generic;

using System.Drawing;

using System.Windows.Forms;

namespace TreeView_CheckBox

{

    public partial class frmListaEmpleados : Form

    {

        List<beEmpleado> lbeEmpleado;

        public frmListaEmpleados()

        {

            InitializeComponent();

        }

        private void obtenerEmpleados()

        {

            lbeEmpleado = new List<beEmpleado>();

            lbeEmpleado.Add(new beEmpleado { IdEmpleado = 1, Nombres = "Luis Dueñas", IdJefe = 0 });

            lbeEmpleado.Add(new beEmpleado { IdEmpleado = 2, Nombres = "Arturo Castañeda", IdJefe = 1 });

            lbeEmpleado.Add(new beEmpleado { IdEmpleado = 3, Nombres = "Enrique Espinal", IdJefe = 1 });

            lbeEmpleado.Add(new beEmpleado { IdEmpleado = 4, Nombres = "Maria Rojas", IdJefe = 2 });

            lbeEmpleado.Add(new beEmpleado { IdEmpleado = 5, Nombres = "Juan Perez", IdJefe = 2 });

            lbeEmpleado.Add(new beEmpleado { IdEmpleado = 6, Nombres = "Rosa Toro", IdJefe = 3 });

            lbeEmpleado.Add(new beEmpleado { IdEmpleado = 7, Nombres = "Pedro Vasquez", IdJefe = 3 });

            lbeEmpleado.Add(new beEmpleado { IdEmpleado = 8, Nombres = "Cesar Ramirez", IdJefe = 5 });

            lbeEmpleado.Add(new beEmpleado { IdEmpleado = 9, Nombres = "Ana Rodriguez", IdJefe = 6 });

        }

        private void listarEmpleados(object sender, EventArgs e)

        {

            obtenerEmpleados();

            TreeNode nodoRaiz = new TreeNode(lbeEmpleado[0].Nombres);

            nodoRaiz.Tag = lbeEmpleado[0].IdEmpleado.ToString();

            tvwEmpleado.Nodes.Add(nodoRaiz);

            llenarTreeView(nodoRaiz);

            tvwEmpleado.ExpandAll();

        }

        private void llenarTreeView(TreeNode nodoPadre)

        {

            int idJefe = int.Parse(nodoPadre.Tag.ToString());

            List<beEmpleado> lbeFiltro = lbeEmpleado.FindAll(x => x.IdJefe.Equals(idJefe));

            if (lbeFiltro != null && lbeFiltro.Count > 0)

            {

                TreeNode nodoHijo;

                foreach (beEmpleado obeEmpleado in lbeFiltro)

                {

                    nodoHijo = new TreeNode(obeEmpleado.Nombres);

                    nodoHijo.Tag = obeEmpleado.IdEmpleado.ToString();

                    nodoPadre.Nodes.Add(nodoHijo);

                    llenarTreeView(nodoHijo);

                }

            }

        }

        private void seleccionarNodoEmpleado(object sender, TreeViewEventArgs e)

        {

            TreeNode nodoJefe = e.Node;

            seleccionarEmpleadosPorJefe(nodoJefe);

        }

        private void seleccionarEmpleadosPorJefe(TreeNode nodoJefe)

        {

            foreach (TreeNode nodoEmpleado in nodoJefe.Nodes)

            {

                nodoEmpleado.Checked = nodoEmpleado.Parent.Checked;

            }

        }

    }

}

Nota: El método "listarEmpleados" esta asociado al evento "Load" del formulario y el método "llenarTreeView" esta asociado al evento "AfterCheck" del TreeView llamado "tvwEmpleado".

Se está usando la propiedad Text de cada nodo (objeto TreeNode) para mostrar el Nombre del Empleado pero se usa la propiedad Tag para guardar el Id del Empleado.

Hay que comentar que al seleccionarse un nodo hijo nuevamente se dispara el evento "AfterCheck" es por eso que no se debe llamar al método "seleccionarEmpleadosPorJefe" así mismo ya que de por si se hace la recursividad por el evento.

Probar la Aplicación Windows Forms

Grabar la aplicación y ejecutarla con F5. Se mostrará la siguiente ventana:

Marcar el check de cualquier empleado y se marcarán todos sus subordinados, tal como se muestra en la siguiente figura:

Ahora probar a desmarcar y se desmarcan todos sus dependencias gracias a la recursividad del evento "AfterCheck".

Comentario Final

En este post vimos como trabajar con un TreeView con CheckBoxes y poder marcar o desmarcar jerárquicamente usando recursividad. Espero les sirva este ejemplo y lo mismo sería para Web.

Ya saben que se aceptan pedidos. Los pedidos mas interesantes serán considerados para programarlos y subirlos al Blog.

Descarga

TreeView_CheckBox

El Demo del Día: Plantilla Jerárquica con el Control Web Repeater

Plantilla Jerárquica con el Control Web Repeater

Requerimiento

Se desea mostrar una consulta jerárquica de productos por categoría en una grilla en ASP .NET. La consulta debe ser desconectada.

Solución

No existe un control Jerárquico que muestre varias columnas tipo TreeGrid. El control TreeView muestra solo un nodo y el control GridView no soporta jerarquía.
La solución es usar plantillas jerárquicas en cualquiera de los controles enlazados a datos: GridView, DataList o Repeater.
Nosotros elegimos el Repeater y crearemos una plantilla jerárquica, es decir un control Repeater con otro control Repeater dentro.

Nota: En este caso quitaremos el ViewState en los dos controles Repeater para disminuir el HTML enviado al cliente ya que los filtros se harán en el servidor pero se mostraran en el cliente con Javascript.

Crear el Procedimiento Almacenado en la Base de Datos de SQL Server

Create Procedure [dbo].[uspCategoriesProductsListar]
As
Select CategoryID,CategoryName From Categories
Select ProductID,ProductName,SupplierID,CategoryID,UnitPrice,UnitsInStock From Products

Crear una Librería de Clases con las Entidades del Negocio

Crear un proyecto de tipo Librería de Clases en C# llamado: "Northwind.Librerias.EntidadesNegocio" y modificar el código de la clase como sigue:

using System;
namespace Northwind.Librerias.EntidadesNegocio
{
    public class beCategoria
    {
        public int IdCategoria { get; set; }
        public string Nombre { get; set; }
    }
}

Agregar una nueva clase al proyecto y llamarla "beProducto":

using System;

namespace Northwind.Librerias.EntidadesNegocio

{

    public class beProducto

    {

        public int IdProducto { get; set; }

        public string Nombre { get; set; }

        public int IdProveedor { get; set; }

        public int IdCategoria { get; set; }

        public decimal PrecioUnitario { get; set; }

        public short Stock { get; set; }

    }

}

Agregar otra clase al proyecto y llamarla "beCategoriaProducto":

using System;
using System.Collections.Generic;
namespace Northwind.Librerias.EntidadesNegocio
{
    public class beCategoriaProducto
    {
        public List<beCategoria> ListaCategorias { get; set; }
        public List<beProducto> ListaProductos { get; set; }
    }
}

Crear una Librería de Acceso a Datos

Crear un proyecto de tipo Librería de Clases en C# llamado: "Northwind.Librerias.AccesoDatos", primero hacer una referencia a la Librería de Entidades del Negocio y luego modificar el código de la clase como sigue:

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using Northwind.Librerias.EntidadesNegocio;

namespace Northwind.Librerias.AccesoDatos
{
    public class daCategoriaProducto
    {
        public beCategoriaProducto obtenerListas(SqlConnection con)
        {
            beCategoriaProducto obeCategoriaProducto = new beCategoriaProducto();
            List<beCategoria> lbeCategoria = null;
            List<beProducto> lbeProducto = null;

            SqlCommand cmd = new SqlCommand("uspCategoriesProductsListar", con);
            cmd.CommandType = CommandType.StoredProcedure;
            SqlDataReader drd = cmd.ExecuteReader(); //Varios Selects
            if (drd != null)
            {
                //Llenar las Categorias
                lbeCategoria = new List<beCategoria>();
                int posIdCat = drd.GetOrdinal("CategoryID");
                int posNomCat = drd.GetOrdinal("CategoryName");
                beCategoria obeCategoria;
                while (drd.Read())
                {
                    obeCategoria = new beCategoria();
                    obeCategoria.IdCategoria = drd.GetInt32(posIdCat);
                    obeCategoria.Nombre = drd.GetString(posNomCat);
                    lbeCategoria.Add(obeCategoria);
                }
                //Avanzar al siguiente Select
                if (drd.NextResult())
                {
                    //Llenar los Productos
                    lbeProducto = new List<beProducto>();
                    int posIdProducto = drd.GetOrdinal("ProductID");
                    int posNombre = drd.GetOrdinal("ProductName");
                    int posIdProveedor = drd.GetOrdinal("SupplierID");
                    int posIdCategoria = drd.GetOrdinal("CategoryID");
                    int posPrecioUnitario = drd.GetOrdinal("UnitPrice");
                    int posStock = drd.GetOrdinal("UnitsInStock");
                    beProducto obeProducto;
                    while (drd.Read())
                    {
                        obeProducto = new beProducto();
                        obeProducto.IdProducto = drd.GetInt32(posIdProducto);
                        obeProducto.Nombre = drd.GetString(posNombre);
                        obeProducto.IdProveedor = drd.GetInt32(posIdProveedor);
                        obeProducto.IdCategoria = drd.GetInt32(posIdCategoria);
                        obeProducto.PrecioUnitario = drd.GetDecimal(posPrecioUnitario);
                        obeProducto.Stock = drd.GetInt16(posStock);
                        lbeProducto.Add(obeProducto);
                    }
                }
                drd.Close();
                obeCategoriaProducto.ListaCategorias = lbeCategoria;
                obeCategoriaProducto.ListaProductos = lbeProducto;
            }
            return (obeCategoriaProducto);
        }
    }
}

Crear una Librería de Reglas del Negocio

Crear un proyecto de tipo Librería de Clases en C# llamado: "Northwind.Librerias.ReglasNegocio", hacer una referencia a la Librería de Entidades del Negocio, a la Librería de Acceso a Datos y a System.Configuration y luego modificar el código de la clase como sigue:

using System;
using System.Configuration; //ConfigurationManager
namespace Northwind.Librerias.ReglasNegocio
{
    public class brGeneral
    {
        //Propiedad
        public string Conexion { get; set; }

        //Constructor
        public brGeneral()
        {
            Conexion = ConfigurationManager.ConnectionStrings["conNW"].ConnectionString;
        }
    }
}

Agregar otra clase llamada: "brCategoriaProducto:" y escribir el siguiente código:

using System;
using System.Collections.Generic; //List
using System.Data.SqlClient; //SqlConnection
using Northwind.Librerias.EntidadesNegocio; //beCategoriaProducto
using Northwind.Librerias.AccesoDatos; //daCategoriaProducto

namespace Northwind.Librerias.ReglasNegocio
{
    public class brCategoriaProducto:brGeneral
    {
        public beCategoriaProducto obtenerListas()
        {
            beCategoriaProducto obeCategoriaProducto = null;
            using (SqlConnection con = new SqlConnection(Conexion))
            {
                try
                {
                    con.Open();
                    daCategoriaProducto odaCategoriaProducto = new daCategoriaProducto();
                    obeCategoriaProducto = odaCategoriaProducto.obtenerListas(con);
                }
                catch (SqlException ex)
                {
                    //Capturar el error y grabar un Log
                }
            } //con.Close(); con.Dispose(); con = null;
            return (obeCategoriaProducto);
        }
    }
}

Nota: La clase "brCategoriaProducto" hereda de la clase "brGeneral" la cadena de conexión para no pasarla como parámetro en cada método de la clase o en el constructor de cada clase se hace una sola vez.

Crear la Aplicación Web en ASP .NET Web Form

Crear un "Nuevo Sitio web vacío de ASP .NET" en C# llamado "Demo15" y crear las siguientes carpetas:

- Estilos: Para el archivo de hoja de estilo (CSS).

- Imagenes: Conteniendo 2 archivos: Contraer.png y Expandir.png

- Paginas: Para contener la pagina de lista de empleados.

Crear el Archivo de Hoja de Estilo (CSS)

Seleccionar la carpeta "Estilos" y agregar un archivo de hoja de estilos con el nombre de: "ACME.css" y modificar el código como sigue:

body {
    background-color:aqua;
}
.Titulo {
    background-color:black;
    color:white;
    text-transform:uppercase;
    font-size:xx-large;
    font-weight:bold;
}
.Subtitulo {
    background-color:white;
    color:blue;
    text-transform:capitalize;
    font-size:x-large;
    font-weight:bold;
}

Crear la Pagina ASP .NET como un Formulario Web Form

Seleccionar la carpeta "Paginas" y agregar un Formulario Web Form llamado: "CategoriaProductos.aspx", para empezar a diseñar la pagina hay que hacer referencia a las Librerías de Negocio (que copia todas sus dependencias).

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CategoriaProductos.aspx.cs" Inherits="Paginas_CategoriaProducto" %>
<%@ Import Namespace="Northwind.Librerias.EntidadesNegocio" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="../Estilos/ACME.css" rel="stylesheet" type="text/css" />
    <script>
        function mostrarProductos(img, indice) {
            var fila = document.getElementById("fila" + indice);
            if (img.title == "Expandir") {
                fila.style.display = "table-row";
                img.src = "../Imagenes/Contraer.png";
                img.title = "Contraer";
            }
            else {
                fila.style.display = "none";
                img.src = "../Imagenes/Expandir.png";
                img.title = "Expandir";
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style="width:100%">
            <tr>
                <td class="Titulo">Plantillas Jerarquicas en el Repeater</td>
            </tr>
            <tr>
                <td class="Subtitulo">Consulta de Productos x Categoria</td>
            </tr>
            <tr>
                <td>
                    <asp:Repeater ID="rpCategoria" EnableViewState="false" runat="server">
                        <HeaderTemplate>
                            <table style="width:100%">
                                <tr style="background-color:blue;color:white">
                                    <td style="width:10%">Código</td>
                                    <td style="width:90%">Nombre de la Categoria</td>
                                </tr>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <tr style="background-color:white;color:blue">
                                <td>
                                    <img id="imgSimbolo" alt="" title="Expandir"
                                       src="../Imagenes/Expandir.png"
                                        width="20" height="20" style="cursor:pointer"
                                        onclick="mostrarProductos(this,<%#Container.ItemIndex%>);"/>
                                    &nbsp;&nbsp;
                                    <%#((beCategoria)Container.DataItem).IdCategoria%>
                                </td>
                                <td>
                                    <%#((beCategoria)Container.DataItem).Nombre%>
                                </td>
                            </tr>
                            <tr id="fila<%#Container.ItemIndex%>" style="display:none">
                                <td></td>
                                <td>
                                    <asp:Repeater ID="rpProducto" DataSource="<%#filtrarProductos
                                      (((beCategoria)Container.DataItem).IdCategoria)%>"
                                      EnableViewState="false" runat="server">
                                         <HeaderTemplate>
                                            <table style="width:100%">
                                                <tr style="background-color:red;color:white">
                                                    <td style="width:20%">Código</td>
                                                    <td style="width:40%">Nombre del Producto</td>
                                                    <td style="width:20%">Precio</td>
                                                    <td style="width:20%">Stock</td>
                                                </tr>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <tr style="background-color:white;color:red">
                                                <td><%#((beProducto)Container.DataItem).IdProducto%></td>
                                                <td><%#((beProducto)Container.DataItem).Nombre%></td>
                                                <td><%#((beProducto)Container.DataItem).
                                                          PrecioUnitario.ToString("n2")%></td>
                                                <td><%#((beProducto)Container.DataItem).Stock%></td>
                                            </tr>
                                        </ItemTemplate>
                                        <FooterTemplate>
                                            </table>
                                        </FooterTemplate>
                                    </asp:Repeater>
                                </td>
                            </tr>
                        </ItemTemplate>
                        <FooterTemplate>
                            </table>
                        </FooterTemplate>
                    </asp:Repeater>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Nota: Inicialmente los controles Repeaters de productos creados por cada categoría están ocultos (display:none), pero por código Javascript lo mostramos usando: display:"table-row". No usamos display:inline ya que no se vería bien en algunos navegadores, en cambio, usando "table-row" se muestra sin problemas en todos los navegadores.

El diseño de la pagina se mostrará como en la siguiente figura:

Escribir el siguiente código C# en la página:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Northwind.Librerias.EntidadesNegocio;
using Northwind.Librerias.ReglasNegocio;

public partial class Paginas_CategoriaProducto : System.Web.UI.Page
{
    private List<beProducto> lbeProducto;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            brCategoriaProducto obrCategoriaProducto = new brCategoriaProducto();
            beCategoriaProducto obeCategoriaProducto = obrCategoriaProducto.obtenerListas();
            lbeProducto = obeCategoriaProducto.ListaProductos;
            rpCategoria.DataSource = obeCategoriaProducto.ListaCategorias;
            rpCategoria.DataBind();
        }
    }

    protected List<beProducto> filtrarProductos(int idCategoria)
    {
        return (lbeProducto.FindAll(x => x.IdCategoria.Equals(idCategoria)));
    }
}

Nota: En el evento load se carga las 2 listas de categorías y productos, luego se enlaza las categorías al primer control Repeater y el segundo se enlaza a una función "filtrarProductos" que solo selecciona las productos de cada categoría.

Modificar el Archivo Web.Config para especificar la cadena de conexión a Northwind

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <connectionStrings>
    <add name="conNW" providerName="SQLServer" connectionString="uid=UsuarioNW;pwd=123456;
      data source=DSOFT\Sqlexpress; database=Northwind"/>
  </connectionStrings>
    <system.web>
      <compilation debug="true" targetFramework="4.5" />
      <httpRuntime targetFramework="4.5" />
    </system.web>
</configuration>

Probar la Pagina Web

Guardar el Sitio Web, clic derecho a la Pagina "CategoriaProductos.aspx" y seleccionar "Ver en el explorador".

Desplegar cada código de categoría dando clic a la imagen de Expandir (+) y se mostrarán los productos de dicha categoría y para ocultarla usar la imagen de Contraer (-).

Comentario Final

En este post hemos visto como crear una presentación jerárquica usando plantillas en el control Repeater. Hemos trabajado solo con 2 niveles pero podría ser de varios niveles. Como comentario final, si aprendemos bien a usar plantillas de datos (Data Templates) en cualquier control web (enlazado a datos) podemos darle la apariencia que deseemos, sin necesidad de tener un control especifico para cada funcionalidad.

Espero les sirva y será hasta la siguiente semana que veremos como trabajar con el GridView: Paginar, Ordenar, Filtrar en las cabeceras, Pies, etc.

Descarga:
Demo15_Plantilla_Jerarquica_Repeater