Paginación con Linq en Visual Studio
En este post se explica de forma detallada los pasos a seguir para poder realizar una paginación en con Visual Studio en nuestro proyecto. Para empezar, una explicación sencilla de lo que es la “Paginación”, sería: recogida y muestra de una serie de información de nuestra base de datos, mostrar la información de esta manera facilita la navegación y hace que el cliente no reciba toda la información de golpe.
Estos son los pasos, o elementos que debe de tener nuestro proyecto para poder realizar esta tarea:
- Una base de datos, con sus correspondientes tablas
- Una conexión entre Visual Studio y nuestra BBDD
- La entidad encargada en Visual Studio de recibir las tablas de la BBDD
- Los procedimientos necesarios para la extracción de información
- Y la vista en la que poder mostrar la información
1. El primer punto no requiere de explicación alguna, pues cada uno dispone de su Base de datos, y en esta almacena la información que desee. Aún así, en la parte inferior de este Post, encontraras un enlace a GitHub, en este dispondrás de todo el código de este proyecto, teniendo acceso también a un archivo .sql que te facilitara la creación de tablas e inserción de información en estas. Eres libre de modificar esta información como desees.
2. Para realizar una conexión con nuestra BBDD en Visual Studio, nos dirigimos a Server Explorer y aquí encontraremos Data Connections, en este pulsaremos botón derecho y Add Connection….
Tras esto, nos aparecerá una ventana modal que nos solicitará información sobre cómo acceder a nuestra BBDD. Esta información variara en función a vuestra BBDD, en mi caso se trata de un servidor local, en el cual accedo con la autenticación de Windows, haciéndome así más fácil el poder acceder.
En el apartado de Server name:, introducid el nombre vuestro servidor a mano, pues si desplegáis, realizara la búsqueda se nombre de servidor por todo el ordenador.
Una vez finalizada la conexión, deberemos dirigirnos al archivo Web.config general, en este buscaremos unas líneas de código similares a esta:
<connectionStrings>
<add name=»HOSPITALEntities»
connectionString=»metadata=res://*/Models.EntidadHospital.csdl|res://*/Models.EntidadHospital.ssdl|res://*/Models.EntidadHospital.msl;provider=System.Data.SqlClient;provider connection string="data source=LAPTOP-J55E3J3O\SQLEXPRESS;initial catalog=HOSPITAL;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework"»
providerName=»System.Data.EntityClient» />
</connectionStrings>
En caso de encontrarla, copiar estas y cambiar la información en función a vuestra conexión.
3. Para realizar la Entidad, encargada de almacenar las tablas, nos dirigimos a Models, aquí pulsamos botón derecho, Add y Add New Item, en la ventana modal que nos aparecerá en la parte izquierda debemos buscar Visual C# y aquí Data. Una vez aquí seleccionaremos ADO.NET Entity Data Model, le daremos un nombre y la crearemos.
En el proceso de creación nos permitirá elegir que tablas y vistas deseamos introducir, seleccionamos las deseadas y estas pasaran a formar parte de nuestro proyecto.
4. En la propia carpeta Models, crearemos la clase encargada de almacenar los procedimientos, esta clase será un Helper. Para esto pulsaremos botón derecho en Models, Add y Class….
Lo primero que se debe hacer en este Helper es implementar la entidad creada anteriormente, para así poder llamar a sus tablas:
HOSPITALEntities entidad;
public HelperJugadores() {
this.entidad = new HOSPITALEntities();
}
Lo siguiente será la parte más importante de este proyecto, la función encargada de la recogida de información de la BBDD. Para ello, se puede emplear el siguiente código:
public List<InformacionJugadores> GetPaginarLINQ(int posicion, ref int totalregistros) {
totalregistros = this.entidad. InformacionJugadores.Count();
var consulta = (from datos in entidad.InformacionJugadores select datos).OrderBy(z => z.JNOMBRE).Skip(posicion).Take(3).ToList();
List<InformacionJugadores> jugadores = consulta;
return jugadores;
}
Esta función llamada GetPaginarLINQ, recibe dos valores int, uno de ellos esta pasado por referencia (ref), pues queremos que este valor vuelva. La función, nos retorna en este caso una lista de elementos de la vista InformacionJugadores, donde encontréis el nombre de esta vista, lo deberéis de cambiar por vuestra tabla o vista de la que extraeréis la información.
En la variable totalregistros almacenamos todos los valores que se encuentran en nuestra tabla o vista, este valor lo utilizaremos próximamente. Tras esto realizamos una consulta, en esta consulta llamas a nuestra tabla, le decimos que nos seleccione todos los datos, que los ordene por un valor de esta y que de todos esos datos se dirija al valor almacenado en posición y, tras esto que recoja los tres siguientes valores. Para terminar, convirtiendo esos tres valores en una lista de elementos.
Esos elementos recogidos se almacenan en una lista de nuestra tabla y son retornados.
5. Para finalizar crearemos un Controller en nuestra carpeta llamada Controllers. En esta carpeta haremos una vista GET, que se encargara de la gestión y la visualización de nuestros valores recogidos. Lo primero que se deberá de hacer es implementar el Helper que hemos creado anteriormente
HelperJugadores helper;
public JugadoresController() {
this.helper = new HelperJugadores();
}
El código empleado para la gestión de la información de la vista, puede ser el siguiente:
public ActionResult PaginarLinq(int? posicion){
if (posicion == null) {
posicion = 0;
}
int totalregistros = 0;
List<InformacionJugadores> jugadores = helper.GetPaginarLINQ(posicion.GetValueOrDefault(), ref totalregistros);
ViewBag.TotalRegistros = totalregistros;
return View(jugadores);
}
En mi caso, mi vista se llama PaginarLinq y esta recibe un valor int nullable, esto quiere decir que este valor puede ser recibido algunas veces si y otras no. Esto principalmente es declarado así, pues al arrancar la vista, este valor no recibe ningún parámetro, una vez naveguemos por nuestra paginación, este valor variara. El primer if que encontramos se encarga de eso mismo, de comprobar que el valor es null, y así proporcionarle un valor para no generar ningún tipo de problema.
Tras esos a totalregistros para le proporcionamos un valor, pues en esta variable se almacenarán todos los registros recogidos de la tabla, este será el valor pasado por referencia. Ese valor de todos los registros es enviado a la vista a través de un ViewBag para su uso posterior.
Y lo más importante es la llamada a la función encargada de recoger la información, y esta información pasarla a una lista de nuestra tabla o vista utilizada. Tras eso retornamos esos valores por modelo return View(jugadores); .
Al haber realizado todo esto, solo nos quedara crear la vista, y eso es tan sencillo como botón derecho sobre el nombre de nuestra vista y Add View…. Con esto se nos habrá creado una carpeta y en su interior la vista que deseamos. La carpeta recibirá el nombre que le hayamos dado al controller, todo esto estará almacenado en Views.
La vista que crearemos puede ser similar a esta:
Esta vista digamos que se divide en dos partes, la parte de la tabla donde se muestra la información y la parte de los botones de navegación.
Antes de nada, debemos hacer un using de nuestra carpeta Models y especificar a la vista, que valores recibirá por modelo:
@using VideoTutorial.Models
@model List<InformacionJugadores>
Con esto pasamos a la tabla, la tabla es sencilla, en ella se muestra la información gracias a un bucle foreach en este bucle especificamos que tipo de datos serán los que reciba y de donde, y con esto se mostraran esos valores.
En lo que respecta a la parte de los botones de navegación, es donde se encuentra lo más importante. Los botones se generan en función al numero total de registros que se encuentran almacenados en nuestra tabla, he aquí donde se comprueba el uso de la variable pasada por referencia.
La variable i avanza de tres en tres, esto se debe a que en la función que hemos creado antes, hemos especificado que recoja solo tres elementos. Estas dos variables han de ser del mismo valor, pues en caso de no coincidir, los datos se mostrarán de forma errónea.
En la parte superior de la vista hemos creado una variable pagina que hemos inicializado a 1. Esta variable es utilizada en el for para realizar un aspecto estético, para que muestre 1, 2, 3…, y así poder ser más fácil de ver para el cliente. Cada vez que el bucle da una vuelta genera un ActionLink, este escribe un numero de la variable pagina, se encarga de llamar a la vista PaginarLinq, almacenada en la carpeta Jugadores y enviarle el valor posicion. Con esto se realiza la navegación por la información de la BBDD.
Con esto habréis realizado una paginación para vuestro proyecto, esta paginación es simple, se puede llegar a complicar tanto como deseéis. Por ejemplo, podéis hacer una paginación que muestre los datos filtrados por un parámetro, este ejemplo que os comento lo podréis encontrar en el enlace en la parte inferior del Post que os llevara a GitHub, donde encontrareis el código empleado en este Post y este que os comento.
Deberéis tener cuidado con ciertas cosas para la realización de esta paginación, pues pueden llegar a causaros problemas. Tener cuidado con la cadena de conexión creada en el Web.config pues puede no crearse o crearse de forma errónea. Al crear esta cadena de conexión, si el acceso a vuestra BBDD requiere de contraseña, aquí veréis que ese campo esta escrito con ****, esto deberéis de borrarlo y escribir vuestra contraseña.
Autor: Tomás Serrano Mata
Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin
Centro: Tajamar
Año académico: 2018-2019