Paginar y Ordenar en el Control Web Repeater
Requerimiento
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, fecha de nacimiento y foto del empleado.
- 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.
- Lo principal es que muestre solo unos cuantos registros (por ejemplo 4), de tal forma que ocupe menos de una pagina.
- También debe permitir ordenar la información ascendente o descendente por cualquiera de las columnas creadas, mostrando un símbolo de ordenación en el ultimo campo ordenado.
Solución
Usaremos el Control Web Repeater y crearemos 2 tipos de paginación: con botones (primero, anterior, siguiente y último) y con Enlaces (Links con los números de paginas, al estilo GridView). Además usando plantillas agregaremos controles LinkButton para cada columna de tal forma que permita ordenar y mostraremos el símbolo de ordenación del último campo ordenado.
Nota: Para este caso, No podremos deshabilitar el ViewState debido ha que el Repeater tendrá LinkButtons que ejecutan código en el servidor y se perderían si deshabilitamos el ViewState. Pero como el control está paginado, no es mucho HTML el que se guarda en el cliente.
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 "Demo13" 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" />
<style type="text/css">
.auto-style1 {
width: 100%;
}
</style>
</head>
<body class="Cuadro">
<form id="form1" runat="server">
<div>
<table class="auto-style1">
<tr>
<td class="Titulo">Paginar y Ordenar en el Control Repeater</td>
</tr>
<tr>
<td class="Subtitulo">Lista de Empleados</td>
</tr>
<tr>
<td>
<asp:Repeater ID="rpEmpleado" runat="server">
<HeaderTemplate>
<table class="MarcarFila">
<tr style="text-align:center;background-color:lightgray;color:black">
<td rowspan="2" style="width:100px">
<%#obtenerSimbolo("IdEmpleado")%>
<asp:LinkButton ID="lbnCodigo" Text="Código"
OnClick="ordenarCampo"
CommandArgument="IdEmpleado" runat="server" />
</td>
<td colspan="2" style="width:300px">Nombre Completo</td>
<td rowspan="2" style="width:100px">
<%#obtenerSimbolo("FechaNacimiento")%>
<asp:LinkButton ID="lbnFechaNac" Text="Fecha Nac"
OnClick="ordenarCampo"
CommandArgument="FechaNacimiento" runat="server" />
</td>
<td rowspan="2" style="width:150px">Foto</td>
</tr>
<tr style="text-align:center;background-color:lightgray;color:black">
<td style="width:150px">
<%#obtenerSimbolo("Apellido")%>
<asp:LinkButton ID="lbnApellido" Text="Apellido"
OnClick="ordenarCampo"
CommandArgument="Apellido" runat="server" />
</td>
<td style="width:150px">
<%#obtenerSimbolo("Nombre")%>
<asp:LinkButton ID="lbnNombre" Text="Nombre"
OnClick="ordenarCampo"
CommandArgument="Nombre" runat="server" />
</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>
<tr>
<td style="text-align:center">
<asp:Button ID="btnPrimero" Text="<<" Width="50"
runat="server" OnClick="btnPrimero_Click" />
<asp:Button ID="btnAnterior" Text="<" Width="50"
runat="server" OnClick="btnAnterior_Click" />
<asp:TextBox ID="txtPosicion" Width="100" ReadOnly="true" runat="server" />
<asp:Button ID="btnSiguiente" Text=">" Width="50"
runat="server" OnClick="btnSiguiente_Click" />
<asp:Button ID="btnUltimo" Text=">>" Width="50"
runat="server" OnClick="btnUltimo_Click" />
</td>
</tr>
<tr>
<td id="celdaPaginas" style="text-align:center" runat="server">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
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
{
private List<beEmpleado> lbeEmpleado;
private string simbolo;
private int registrosPagina = 4;
private int indicePaginaActual;
private int indiceUltimaPagina;
protected void Page_Load(object sender, EventArgs e)
{
txtPosicion.Attributes.Add("style", "text-align:center");
if (!Page.IsPostBack)
{
brEmpleado obrEmpleado = new brEmpleado();
lbeEmpleado = obrEmpleado.listar();
indiceUltimaPagina = (lbeEmpleado.Count / registrosPagina);
if (lbeEmpleado.Count % registrosPagina == 0) indiceUltimaPagina--;
ViewState["indicePaginaActual"] = indicePaginaActual;
ViewState["indiceUltimaPagina"] = indiceUltimaPagina;
Session["Empleados"] = lbeEmpleado;
ViewState["campo"] = "";
enlazarRepeater();
}
else
{
indiceUltimaPagina = (int)ViewState["indiceUltimaPagina"];
}
crearEnlacesPaginas();
}
private void crearEnlacesPaginas()
{
LinkButton lbn;
for (int i = 0; i <= indiceUltimaPagina; i++)
{
lbn = new LinkButton();
lbn.Text = (i + 1).ToString();
lbn.Click += new EventHandler(paginar);
celdaPaginas.Controls.Add(lbn);
celdaPaginas.Controls.Add(new LiteralControl(" "));
}
}
private void paginar(object sender, EventArgs e)
{
LinkButton lbn = (LinkButton)sender;
indicePaginaActual = int.Parse(lbn.Text) - 1;
ViewState["indicePaginaActual"] = indicePaginaActual;
enlazarRepeater();
}
private void enlazarRepeater()
{
lbeEmpleado = (List<beEmpleado>)Session["Empleados"];
List<beEmpleado> lbeFiltro = new List<beEmpleado>();
int inicio = indicePaginaActual * registrosPagina;
int fin = (indicePaginaActual * registrosPagina)+registrosPagina;
for (int i = inicio; i < fin; i++)
{
if (i < lbeEmpleado.Count) lbeFiltro.Add(lbeEmpleado[i]);
else break;
}
rpEmpleado.DataSource = lbeFiltro;
rpEmpleado.DataBind();
indicePaginaActual = (int)ViewState["indicePaginaActual"];
indiceUltimaPagina = (int)ViewState["indiceUltimaPagina"];
txtPosicion.Text = String.Format("{0} de {1}", indicePaginaActual + 1, indiceUltimaPagina + 1);
}
protected void ordenarCampo(object sender, EventArgs e)
{
LinkButton lbn = (LinkButton)sender;
string campo = lbn.CommandArgument;
ViewState["campo"] = campo;
if (ViewState["simbolo"] == null) simbolo = "▲";
else
{
if (ViewState["simbolo"].Equals("▲")) simbolo = "▼";
else simbolo = "▲";
}
ViewState["simbolo"] = simbolo;
lbeEmpleado = (List<beEmpleado>)Session["Empleados"];
if(simbolo.Equals("▲")) lbeEmpleado = lbeEmpleado.OrderBy
(x => x.GetType().GetProperty(campo).GetValue(x, null)).ToList<beEmpleado>();
else lbeEmpleado = lbeEmpleado.OrderByDescending
(x => x.GetType().GetProperty(campo).GetValue(x, null)).ToList<beEmpleado>();
Session["Empleados"] = lbeEmpleado;
enlazarRepeater();
}
protected string obtenerSimbolo(string campo)
{
if (ViewState["campo"].Equals(campo)) return (simbolo);
else return ("");
}
protected void btnPrimero_Click(object sender, EventArgs e)
{
indicePaginaActual = 0;
ViewState["indicePaginaActual"] = indicePaginaActual;
enlazarRepeater();
}
protected void btnAnterior_Click(object sender, EventArgs e)
{
indicePaginaActual=(int)ViewState["indicePaginaActual"];
if (indicePaginaActual > 0)
{
indicePaginaActual--;
ViewState["indicePaginaActual"] = indicePaginaActual;
enlazarRepeater();
}
}
protected void btnSiguiente_Click(object sender, EventArgs e)
{
indicePaginaActual = (int)ViewState["indicePaginaActual"];
indiceUltimaPagina = (int)ViewState["indiceUltimaPagina"];
if (indicePaginaActual < indiceUltimaPagina)
{
indicePaginaActual++;
ViewState["indicePaginaActual"] = indicePaginaActual;
enlazarRepeater();
}
}
protected void btnUltimo_Click(object sender, EventArgs e)
{
indiceUltimaPagina = (int)ViewState["indiceUltimaPagina"];
indicePaginaActual = indiceUltimaPagina;
ViewState["indicePaginaActual"] = indicePaginaActual;
enlazarRepeater();
}
}
Nota: Por defecto los registrosPorPagina está configurado a 4, pero se puede cambiar para probar, además el símbolo de ordenación ascendente es el caracter ASCII 30 y el descendente 31.
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".
Probar ir a cualquier pagina usando los Links con los números de paginas o con los botones, por ejemplo si estamos en la ultima ya no podemos avanzar a la siguiente o si estamos en la primera ya no podemos retroceder.
También ordenar los registros usando los Links de las cabeceras y ver el símbolo de ordenación que aparece, ya sea ascendente o descendente.
Comentario Final
En esta demostración hemos visto como podemos paginar sobre el control Repeater y como ordenar los registros mostrando el símbolo de ordenación. En el siguiente post, veremos como hacerlo en el control DataList.
Descarga:
Demo13_Paginar_Ordenar_Repeater
