El Demo del Día: Plantilla de Datos (Data Template) en el Control Web Repeater

Plantilla de Datos (Data Template) en el Control Web Repeater

Este es el primer Demo que estoy publicando sobre ASP .NET y trataremos de como crear Plantillas de Datos (Data Template) usando el Control Web Repeater.

Requerimientos

Se desea crear una Aplicación Web que permita listar los datos de los empleados que cumpla con lo siguiente:
- Presente en columnas la información del código, apellido, nombre y fecha de nacimiento.
- Muestre una columna con la foto del empleado la cual se encuentra en un carpeta "Empleados" donde el nombre del archivo esta compuesto por el código del empleado y la extensión jpg. Para los archivos que no se encuentren se usará el archivo No.jpg.
- La cabecera de la grilla debe estar combinada de tal forma que muestre un titulo que diga Nombre Completo que agrupe al Apellido y al nombre del empleado.
- Las filas de datos deben tener un estilo con fondo blanco y color de letra azul, pero al pasar el mouse el estilo de la fila debe tener fondo amarillo y color de letra rojo.

Nota: El principal requerimiento es que la pagina sea rápida y que arroje la menor cantidad de HTML en el cliente.

Solución

Usaremos el control Repeater y le quitaremos el ViewState (EnableViewState=false) y usaremos estilos para las filas de datos con lo cual logramos disminuir el HTML arrojado al cliente (Browser).
Ademas usando Plantilla de Datos podemos dar la apariencia que deseemos a la consulta, en este caso para combinar celdas en la cabecera.

Nota: La mayoría de programadores de ASP .NET solo consideran como alternativa usar el GridView y programar en el evento RowDataBound la combinación de las celdas y otras funcionalidades.

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

Usaremos la tabla Empleados (Employees) de Northwind:

Create Procedure [dbo].[uspEmployeesListar]
As
Select EmployeeID,LastName,FirstName,
IsNull(BirthDate,'1/1/1900') As BirthDate
From Employees Order By 1

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 beEmpleado
    {
        public int IdEmpleado { get; set; }
        public string Apellido { get; set; }
        public string Nombre { get; set; }
        public string NombreCompleto
        {
            get
            {
                return (String.Format("{0} {1}",Nombre,Apellido));
            }
        }
        public DateTime FechaNacimiento { 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" y modificar el código de la clase como sigue:

using System;
using System.Data; //CommandType
using System.Data.SqlClient; //SqlConnection, SqlCommand, SqlDataReader
using System.Collections.Generic; //List
using Northwind.Librerias.EntidadesNegocio; //beEmpleado
namespace Northwind.Librerias.AccesoDatos
{
    public class daEmpleado
    {
        public List<beEmpleado> listar(SqlConnection con)
        {
            List<beEmpleado> lbeEmpleado = null;
            SqlCommand cmd = new SqlCommand("uspEmployeesListar", con);
            cmd.CommandType = CommandType.StoredProcedure;
            SqlDataReader drd = cmd.ExecuteReader(CommandBehavior.SingleResult);
            if (drd != null)
            {
                lbeEmpleado = new List<beEmpleado>();
                int posIdEmpleado = drd.GetOrdinal("EmployeeID");
                int posApellido = drd.GetOrdinal("LastName");
                int posNombre = drd.GetOrdinal("FirstName");
                int posFechaNacimiento = drd.GetOrdinal("BirthDate");
                beEmpleado obeEmpleado;
                while (drd.Read())
                {
                    obeEmpleado = new beEmpleado();
                    obeEmpleado.IdEmpleado = drd.GetInt32(posIdEmpleado);
                    obeEmpleado.Apellido = drd.GetString(posApellido);
                    obeEmpleado.Nombre = drd.GetString(posNombre);
                    obeEmpleado.FechaNacimiento = drd.GetDateTime(posFechaNacimiento);
                    lbeEmpleado.Add(obeEmpleado);
                }
                drd.Close();
            }
            return (lbeEmpleado);
        }
    }
}

Nota: Hay que hacer una referencia a la Librería de Entidades del Negocio.

Crear una Librería de Reglas del Negocio

Crear un proyecto de tipo Librería de Clases en C# llamado: "Northwind.Librerias.ReglasNegocio" y 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;
        }
    }
}

Nota: Hay que hacer una referencia a la Librería de Entidades del Negocio, a la Librería de Acceso a Datos y a System.Configuration.

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

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

namespace Northwind.Librerias.ReglasNegocio
{
    public class brEmpleado:brGeneral //Herencia
    {
        public List<beEmpleado> listar()
        {
            List<beEmpleado> lbeEmpleado = null;
            using (SqlConnection con = new SqlConnection(Conexion))
            {
                try
                {
                    con.Open();
                    daEmpleado odaEmpleado = new daEmpleado();
                    lbeEmpleado = odaEmpleado.listar(con);
                }
                catch (SqlException ex)
                {
                    //Capturar el error y grabar un Log
                }
            } //con.Close(); con.Dispose(); con = null;
            return (lbeEmpleado);
        }
    }
}

Nota: La clase "brEmpleado" 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 una Librería de Código de Usuario para Web

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

using System;
using System.Collections.Generic;
using System.IO; //File
using System.Web; //HttpContext

namespace General.Librerias.CodigoUsuarioWeb
{
    public class Imagen
    {
        public static string obtenerUrl(int id, string carpeta)
        {
            string archivo = HttpContext.Current.Server.MapPath
            (String.Format("../Imagenes/{0}/{1}.jpg", carpeta, id));
            string url = String.Format("../Imagenes/{0}/{1}.jpg", carpeta, id);
            if (!File.Exists(archivo)) url = String.Format("../Imagenes/{0}/No.jpg", carpeta);
            return (url);
        }
    }
}

Nota: Como esta librería va a ser usada por paginas web hay que hacer referencia a: "System.Web"

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

Crear un "Nuevo Sitio web vacío de ASP .NET" en C# llamado "Demo11" y crear las siguientes carpetas:
- Estilos: Para el archivo de hoja de estilo (CSS).
- Imagenes. Dentro crear otra carpeta llamada "Empleados" y adjuntar los archivos con las fotos de los empleados: 1.jpg, 2.jpg, 3.jpg, ... y No.jpg.
- 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;
}
.MarcarFila tr {
    background-color: white;
    color: blue;
    cursor:default;
    font-weight:normal;
}
.MarcarFila tr:hover {
    background-color: yellow;
    color: red;
    cursor:pointer;
    font-weight:bold;
}

Crear la Pagina ASP .NET como un Formulario Web Form

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

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListaEmpleados.aspx.cs" Inherits="Paginas_ListaEmpleados" %>
<%@ Import Namespace="Northwind.Librerias.EntidadesNegocio" %>
<%@ Import Namespace="General.Librerias.CodigoUsuarioWeb" %>
<!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 style="width:100%">
            <tr>
                <td class="Titulo">Plantilla y estilos en el Control Repeater</td>
            </tr>
            <tr>
                <td class="Subtitulo">Lista de Empleados</td>
            </tr>
            <tr>
                <td>
                    <asp:Repeater ID="rpEmpleado" runat="server" EnableViewState="False">
                        <HeaderTemplate>
                            <table class="MarcarFila">
                                <tr style="text-align:center;background-color:blue;color:white">
                                    <td rowspan="2" style="width:100px">Código</td>
                                    <td colspan="2" style="width:300px">Nombre Completo</td>
                                    <td rowspan="2" style="width:100px">Fecha Nac</td>
                                    <td rowspan="2" style="width:150px">Foto</td>
                                </tr>
                                <tr style="text-align:center;background-color:blue;color:white">
                                    <td style="width:150px">Apellido</td>
                                    <td style="width:150px">Nombre</td>
                                </tr>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <tr>
                                <td>
                                    <%#((beEmpleado)Container.DataItem).IdEmpleado%>
                                </td>
                                <td>
                                    <%#((beEmpleado)Container.DataItem).Apellido%>
                                </td>
                                <td>
                                    <%#((beEmpleado)Container.DataItem).Nombre%>
                                </td>
                                <td>
                                    <%#((beEmpleado)Container.DataItem).FechaNacimiento.
                                       ToShortDateString()%>
                                </td>
                                <td>
                                    <img src='<%#Imagen.obtenerUrl(((beEmpleado)Container.DataItem)
                                      .IdEmpleado,"Empleados")%>' width="120" height="80" alt="Foto"
                                       title="<%#((beEmpleado)Container.DataItem).NombreCompleto%>"/>
                                </td>
                            </tr>
                        </ItemTemplate>
                        <FooterTemplate>
                            </table>
                        </FooterTemplate>
                    </asp:Repeater>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Nota: El código que se encuentre entre los marcadores: "<%%>" se ejecuta en el servidor, si tiene un # indica que es enlace de datos (solo se usa dentro de un control enlazado a datos). La instrucción Container.DataItem obtiene una fila enlazada a datos, en este caso un Empleado ya que el Repeater estará enlazado a una Lista de Objetos Empleados.

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.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Northwind.Librerias.EntidadesNegocio; //beEmpleado
using Northwind.Librerias.ReglasNegocio; //brEmpleado

public partial class Paginas_ListaEmpleados : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            brEmpleado obrEmpleado = new brEmpleado();
            List<beEmpleado> lbeEmpleado = obrEmpleado.listar();
            rpEmpleado.DataSource = lbeEmpleado;
            rpEmpleado.DataBind();
        }
    }
}

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 "ListaEmpleados.aspx" y seleccionar "Ver en el explorador".

Pasar el mouse por cada fila y notar como cambia el estilo de la fila seleccionada debido al estilo "MarcarFila" aplicado a la tabla que esta dentro del control Repeater.

Clic derecho a la página y seleccionar "Ver código fuente de la pagina", notar que el HTML generado desde el servidor es mínimo ya que se le quito el ViewState al control Repeater y se uso Hojas de Estilo para reducir el formato en cada fila.

Comentario Final

Es muy útil el uso de Plantillas de Datos para personalizar la apariencia de los controles Web en ASP .NET, además es necesario entender que debemos enviar la menor cantidad de HTML al navegador para que se cargue mas rápido la página, en este caso lo logramos configurando el ViewState y usando CSS.

En los siguientes demos, estaremos viendo mas el tema de Plantillas de Datos, Hojas de Estilos y Controles Enlazados a Datos en ASP .NET.

Descarga:
Demo11_Plantilla_Repeater