Paginación y Ordenación Asíncrona en ASP.NET MVC con Ajax ActionLink y Vista Parcial
Luego de casi un mes de no publicar un Demo, esta semana vamos a publicar uno diario para nivelarnos. En esta ocasión veremos como paginar y ordenar en forma asíncrona en ASP.NET MVC usando el control Helper Ajax.ActionLink y una Vista Parcial.
Requerimiento
Se desea crear una aplicación web en ASP.NET MVC que permita consultar la lista de empleados, dando la posibilidad de mostrar por páginas y ordenar los registros en forma ascendente y descendente por cada columna mostrada.
El requerimiento debe acompañarse de una buena experiencia de usuario que permita actualizar los datos al paginar u ordenar sin refrescar toda la pantalla.
Solución
Usaremos los controles Ajax.ActionLink tanto para la ordenación como la paginación, los cuales realizarán una llamada asíncrona (internamente usan jQuery Ajax) y actualizarán la vista mediante una vista parcial con los empleados.
Crear el Procedimiento Almacenado en la Base de Datos Northwind de SQL Server
Para listar los datos de los empleados crear el procedimiento "uspEmployeesListar":
Create procedure [dbo].[uspEmployeesListar]
As
Select EmployeeId,LastName,FirstName,IsNull(BirthDate,'1/1/1900') as Birthdate
From Employees
Crear una Librería de Entidades de Negocio para Northwind
Crear una librería de clases "Northwind.Librerias.EntidadesNegocio" con una clase llamada "beEmpleado" que tenga el siguiente código:
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 DateTime FechaNacimiento { get; set; }
public byte[] Foto { get; set; }
}
}
Crear una Librería de Acceso a Datos para Northwind
Crear una librería de clases "Northwind.Librerias.AccesoDatos" con una clase llamada "daEmpleado" que tenga el siguiente código:
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>();
beEmpleado obeEmpleado;
int posIdEmpleado = drd.GetOrdinal("EmployeeID");
int posApellido = drd.GetOrdinal("LastName");
int posNombre = drd.GetOrdinal("FirstName");
int posFechaNacimiento = drd.GetOrdinal("BirthDate");
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 referenciar a la librería de entidades de negocio anteriormente creada.
Crear una Librería de Reglas de Negocio para Northwind
Crear una librería de clases "Northwind.Librerias.AccesoDatos" con una clase llamada "daEmpleado" que tenga el siguiente código:
using System;
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.Configuration;
using Northwind.Librerias.EntidadesNegocio;
using Northwind.Librerias.AccesoDatos;
namespace Northwind.Librerias.ReglasNegocio
{
public class brEmpleado
{
public List<beEmpleado> Listar()
{
List<beEmpleado> lbeEmpleado = null;
string CadenaConexion = ConfigurationManager.
ConnectionStrings["conNW"].ConnectionString;
using (SqlConnection con = new SqlConnection(CadenaConexion))
{
try
{
con.Open();
daEmpleado odaEmpleado = new daEmpleado();
lbeEmpleado = odaEmpleado.Listar(con);
}
catch (SqlException ex)
{
foreach (SqlError err in ex.Errors)
{
//GrabarLog
}
}
catch (Exception ex)
{
//GrabarLog
}
} //con.close(); con.Dispose();
return (lbeEmpleado);
}
}
}
Nota: Hay que referenciar a las librería "System.Configuration", la librería de entidades de negocio y de acceso a datos.
Crear una Aplicación Web de ASP.NET MVC4 en C#
Abrir el Visual Studio 2012 y seleccionar un nuevo proyecto de tipo: "Aplicación web de ASP.NET MVC4".
Escribir como nombre "Demo09" y "Aceptar", en el siguiente diálogo seleccionar la opción "Vacio" y como motor de vista "Razor" y "Aceptar".
Antes de empezar a programar debemos referenciar las librerías anteriormente creadas, es decir, la librería de entidades del negocio, de acceso a datos y de reglas del negocio de Northwind.
Crear un Controlador para el Empleado
Clic derecho a la carpeta "Controllers" y seleccionar "Agregar" y luego "Controlador", llamarle al archivo "EmpleadoController.cs" y en opciones de plantillas dejarlo en plantilla vacia (Vaciar Controlador MVC). Luego escribir el siguiente código:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Northwind.Librerias.EntidadesNegocio;
using Northwind.Librerias.ReglasNegocio;
namespace Demo09.Controllers
{
public class EmpleadoController : Controller
{
List<beEmpleado> lbePagina;
List<beEmpleado> lbeEmpleado;
int indicePaginaActual;
int indiceUltimaPagina;
int registrosPorPagina = 10;
private void mostrarPagina()
{
lbePagina = new List<beEmpleado>();
int inicio = indicePaginaActual * registrosPorPagina;
int fin = inicio + registrosPorPagina;
for (int i = inicio; i < fin; i++)
{
if (i==lbeEmpleado.Count) break;
lbePagina.Add(lbeEmpleado[i]);
}
}
public ActionResult Lista()
{
brEmpleado obrEmpleado = new brEmpleado();
lbeEmpleado = obrEmpleado.listar();
Session["Empleados"] = lbeEmpleado;
indiceUltimaPagina = (lbeEmpleado.Count / registrosPorPagina);
if (lbeEmpleado.Count % registrosPorPagina == 0) indiceUltimaPagina--;
ViewBag.IndiceUltimaPagina = indiceUltimaPagina;
mostrarPagina();
return View(lbePagina);
}
public PartialViewResult Ordenar(string campo)
{
ViewBag.Campo = campo;
lbeEmpleado = (List<beEmpleado>)Session["Empleados"];
int n = 0;
string simbolo = "▲";
if (TempData[campo] != null)
{
if (TempData[campo].Equals(0))
{
n = 1;
simbolo = "▼";
}
else simbolo = "▲";
}
TempData[campo] = n;
ViewBag.Simbolo = simbolo;
if (n == 0) lbeEmpleado = lbeEmpleado.OrderBy
(x => x.GetType().GetProperty(campo).GetValue(x, null)).ToList();
else lbeEmpleado = lbeEmpleado.OrderByDescending
(x => x.GetType().GetProperty(campo).GetValue(x, null)).ToList();
Session["Empleados"] = lbeEmpleado;
if (TempData["indicePaginaActual"] != null)
{
indicePaginaActual = (int)TempData["indicePaginaActual"];
TempData["indicePaginaActual"] = indicePaginaActual;
}
mostrarPagina();
return PartialView("Tabla", lbePagina);
}
public PartialViewResult Paginar(int pagina)
{
lbeEmpleado = (List<beEmpleado>)Session["Empleados"];
indicePaginaActual = pagina;
TempData["indicePaginaActual"] = indicePaginaActual;
mostrarPagina();
return PartialView("Tabla", lbePagina);
}
}
}
Nota: Inicialmente se llamará al método de acción "Lista" y luego los Ajax.ActionLink de ordenar llamarán a la acción "Ordenar" que devolverá una vista parcial llamada "Tabla" con los datos ordenados ascendente o descendente de acuerdo al valor del TempData de cada campo.
Si se da clic a los Ajax.ActionLink de paginación se llamará a la acción "Paginar" que configura el "indicePaginaActual" y muestra la vista parcial "Tabla" paginada.
Crear una Hoja de Estilos para la Vista Principal y la Vista Parcial
Primero crear una carpeta llamada "Content", luego clic derecho "Agregar" y luego "Hoja de estilos" y como nombre llamarle "ACME.css" y escribir el siguiente código:
body {
background-color:gray;
}
.Titulo {
background-color:black;
color:white;
font-size:larger;
}
.Subtitulo {
background-color:white;
color:black;
font-size:large;
}
.AnchoTotal {
width:100%;
}
.Centrado {
text-align:center;
}
.FilaCabecera {
background-color:lightgray;
color:black;
}
.FilaDatos {
background-color:white;
color:black;
}
Crear el archivo JavaScript con el código cliente para la Vista Principal
Antes que nada crear una carpeta llamada "Scripts" y arrastrar del explorador de Windows los archivos de jQuery: "jquery-1.8.2.min.js" y "jquery.unobtrusive-ajax.min.js", luego agregar un archivo de JavaScript llamado "Rutinas.js" y escribir el siguiente código:
function mostrarSimbolo() {
var campo = document.getElementById("hdfCampo").value;
var simbolo = document.getElementById("hdfSimbolo").value;
var span = document.getElementById("spn" + campo);
span.innerHTML = simbolo;
}
Nota: Los dos campos ocultos serán creados en la vista parcial y se usan para actualizar el símbolo de ordenación en la vista principal.
Crear la Vista Principal
Ir al controlador "Empleado" y ubicarse sobre el método "Lista" (acción), clic derecho y seleccionar "Agregar vista", desmarcar todas las casillas (checkboxs) y agregar la vista llamada "Lista", luego escribir el siguiente código:
@using Northwind.Librerias.EntidadesNegocio
@model List<beEmpleado>
@{
Layout = null;
AjaxOptions configura = new AjaxOptions{ HttpMethod="get", InsertionMode=InsertionMode.Replace, UpdateTargetId="tbEmpleado", OnComplete="mostrarSimbolo"};
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Lista</title>
<link href="~/Content/ACME.css" rel="stylesheet" />
</head>
<body>
<div>
<table class="AnchoTotal">
<tr class="Titulo">
<td>Demo 09: Grilla Paginada y Ordenada Asíncrona con
Ajax ActionLink y Vista Parcial</td>
</tr>
<tr class="Subtitulo">
<td>Consulta de Empleados</td>
</tr>
<tr>
<td>
<table class="AnchoTotal">
<thead>
<tr class="FilaCabecera">
<td style="width:70px">
@Ajax.ActionLink("Código","Ordenar",
new {campo="IdEmpleado"},configura)
@Html.Raw(" ")<span id="spnIdEmpleado"></span>
</td>
<td style="width:200px">
@Ajax.ActionLink("Apellido","Ordenar",
new {campo="Apellido"},configura)
@Html.Raw(" ")<span id="spnApellido"></span>
</td>
<td style="width:200px">
@Ajax.ActionLink("Nombre","Ordenar",
new {campo="Nombre"},configura)
@Html.Raw(" ")<span id="spnNombre"></span>
</td>
<td style="width:100px">
@Ajax.ActionLink("Fecha Nac","Ordenar",
new {campo="FechaNacimiento"},configura)
@Html.Raw(" ")<span id="spnFechaNacimiento"></span>
</td>
</tr>
</thead>
<tbody id="tbEmpleado">
@Html.Partial("Tabla",Model)
</tbody>
<tfoot>
<tr class="FilaCabecera">
<td colspan="4" class="Centrado">
@for (int i = 0; i <= ViewBag.IndiceUltimaPagina; i++)
{
@Ajax.ActionLink((i + 1).ToString(), "Paginar",
new { pagina=i}, configura)
@Html.Raw(" ")
}
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</table>
</div>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/Rutinas.js"></script>
</body>
</html>
Crear la Vista Parcial
Ir al controlador "Empleado" y ubicarse sobre el método "Lista" (acción), clic derecho y seleccionar "Agregar vista", seleccionar la casilla (check) "Crear como vista parcial" y agregar la vista llamada "Tabla", luego escribir el siguiente código:
@using Northwind.Librerias.EntidadesNegocio
@model List<beEmpleado>
@foreach (beEmpleado obeEmpleado in Model)
{
<tr class="FilaDatos">
<td>@obeEmpleado.IdEmpleado</td>
<td>@obeEmpleado.Apellido</td>
<td>@obeEmpleado.Nombre</td>
<td>@obeEmpleado.FechaNacimiento.ToShortDateString()</td>
</tr>
}
<input id="hdfCampo" type="hidden" value="@ViewBag.Campo" />
<input id="hdfSimbolo" type="hidden" value="@ViewBag.Simbolo" />
Nota: Es necesario que los dos campos ocultos se encuentren dentro de la vista parcial para que se actualicen con el nombre del campo y el símbolo que se va a mostrar al hacer la ordenación asíncrona.
Modificar el archivo Web.Config para incluir la cadena de conexión
Ir al archivo Web.config ubicado en la raíz del proyecto e incluir lo siguiente:
<connectionStrings>
<add name="conNW" providerName="SQLServer" connectionString=
"uid=UsuarioNW;pwd=123456;server=DSOFT\Sqlexpress;database=Northwind"/>
</connectionStrings>
Nota: Cambiar el nombre del servidor, el usuario y la clave de acuerdo a su configuración.
Configurar la Acción de Inicio
Para probar la aplicación web debemos configurar el inicio para lo cual nos vamos a la carpeta "App_Start" y abrimos el archivo "RouteConfig.cs" cambiando el nombre del controlador y la acción tal como se muestra en el siguiente código:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace Demo09
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Empleado", action = "Lista", id = UrlParameter.Optional }
);
}
}
}
Ejecutar y Probar la Aplicación Web
Finalmente, grabar y pulsar F5 para ejecutar la aplicación, mostrándose el resultado similar a la siguiente figura:
Probar la ordenación ascendente y descendente por cada columna y se mostrará similar a la siguiente figura:
Finalmente, navegar por cada página y se verá los datos similar a la siguiente figura:
Comentario Final
En este post, hemos aprendido como paginar y ordenar en forma asíncrona usando los controles Helpers Ajax.ActionLink de ASP.NET MVC para mostrar los datos de los empleados.
Como siempre en este Blog no hemos necesitado de ningún control de terceros para realizar estas operaciones, sino que lo hemos hecho con los controles y librerías que vienen con el Framework de ASP.NET MVC.
Descarga del código
Video del Demo
Mañana publicaré otro Demo interesante de como hacer lo mismo pero totalmente desconectado, es decir sin ir al servidor web ni al servidor de datos.
Si les gusto compartanlo y denle like o +.
