Desarrollo .NET, Web, HTML5, JavaScript, Móviles y Más: El Demo del Día: Plantilla de Datos en el Control Web DataList

sábado, 26 de julio de 2014

El Demo del Día: Plantilla de Datos en el Control Web DataList

Requerimientos

Se desea crear una Aplicación Web que permita listar los datos de los empleados que cumpla con lo siguiente:
- Presente en forma de ficha la información del código, apellido, nombre y fecha de nacimiento del empleado.
- Muestre en la ficha 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 información debe aparecer solo en una pagina en forma de cuadro con borde distribuida en columnas.
- Las fichas deben tener fondo gris claro, pero al pasar el mouse el estilo de la ficha cambiara a fondo amarillo.

Nota: El principal requerimiento es que la pagina sea rápida y que arroje la menor cantidad de HTML en el cliente. Además el Usuario No quiere Paginado ya que no son demasiados los registros a mostrar.

Solución

Usaremos el control DataList y le quitaremos el ViewState (EnableViewState=false) para reducir el HTML arrojado al cliente y para mejorar la apariencia de la pagina usaremos estilos para las fichas de datos.
Ademas usando Plantilla de Datos en el Control DataList podemos presentar en forma de ficha la información del empleado y mostrarla en varias columnas.

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 "Demo12" 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:

.Cuadro {

position:absolute;

left:2%;

top:4%;

width:96%;

height:92%;

background-color: gray;

border:solid;

border-color:black;

border-radius:10px;

overflow:scroll;

}

.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;

}

.MarcarTabla {

background-color: lightgray;

cursor:default;

border:solid;

border-color:lightgray;

}

.MarcarTabla:hover {

background-color: yellow;

cursor:pointer;

border:solid;

border-color:black;

}

Nota: El estilo "Cuadro" será aplicado al div principal de la pagina y el estilo "MarcarTabla" será aplicado a la tabla que muestra la ficha de cada empleado dentro del DataList.

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>

</head>

<body>

<tr>

<td class="Titulo">Plantilla y Estilos en el Control DataList</td>

</tr>

<tr>

<td class="Subtitulo">Lista de Empleados</td>

</tr>

<tr>

<td>

<asp:DataList ID="dlsEmpleado" runat="server" EnableViewState="False"

RepeatColumns="3" CellPadding="20" CellSpacing="20"
RepeatDirection="Horizontal">

<tr>

<td>

<table>

<tr>

<td style="width:80px">Código :</td>

<%#((beEmpleado)Container.DataItem).IdEmpleado%>

</td>

</tr>

<tr>

<td style="width:80px">Apellido :</td>

<%#((beEmpleado)Container.DataItem).Apellido%>

</td>

</tr>

<tr>

<td style="width:80px">Nombre :</td>

<%#((beEmpleado)Container.DataItem).Nombre%>

</td>

</tr>

<tr>

<td style="width:80px">Fecha Nac :</td>

<%#((beEmpleado)Container.DataItem).FechaNacimiento.

ToShortDateString()%>

</td>

</tr>

</table>

</td>

<td>

<img src='<%#Imagen.obtenerUrl(((beEmpleado)Container.DataItem).

IdEmpleado,"Empleados")%>' width="120" height="80" alt="Foto"

title="<%#((beEmpleado)Container.DataItem).
NombreCompleto%>"/>

</td>

</tr>

</table>

</ItemTemplate>

</asp:DataList>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Nota: Se ha configurado las propiedad "RepeatColumns" del Control DataList para distribuir en 3 columnas los datos de los empleados, además la propiedad "RepeatDirection" está en Horizontal y No en Vertical para mostrar la dirección de los registros en filas y no en columnas, de izquierda a derecha y no de arriba hacia abajo. Finalmente, las propiedades CellPadding y CellSpacing permiten dar espaciado a los datos.

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; //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();

dlsEmpleado.DataSource = lbeEmpleado;

dlsEmpleado.DataBind();

}

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

<?xml version="1.0" encoding="utf-8"?>

<add name="conNW" providerName="SQLServer" connectionString="uid=UsuarioNW;pwd=123456;

data source=DSOFT\Sqlexpress; database=Northwind"/>

</connectionStrings>

<system.web>

</system.web>

</configuration>

Probar la Pagina Web

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

Observar que el contenido aparece sobre un cuadro con borde negro con esquinas redondeadas y los registros de empleados aparecen en pequeñas fichas distribuidas en 3 columnas. El cuadro tiene una barra de desplazamiento (scroll) para ver los demás registros.

Pasar el mouse por cada ficha de empleado y notar como cambia el estilo de la ficha seleccionada debido al estilo "MarcarTabla" aplicado a la tabla que esta dentro del control DataList.

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 DataList y se uso Hojas de Estilo para reducir el formato en cada tabla.

Comentario Final

En esta demostración usamos el Control DataList para presentar la información en columnas y usando Estilos lo presentamos en una sola pagina en forma de cuadro con una barra de desplazamiento, esta técnica es útil si no son muchas páginas, de lo contrario es mejor Paginar para No enviar demasiado HTML al cliente, lo cual veremos en un siguiente post.

Descarga:

Demo12_Plantilla_DataList