En este post se expone un paso a paso detallado de los procedimientos a seguir para mostrar los datos de una tabla con un formato de paginación con ASP.NET en Visual Studio.

En primer lugar, debemos tener la BBDD de la que queremos mostrar los datos paginados, conectada con el proyecto en Visual Studio.

1.Paginación con ASP.NET en Visual Studio bbdd-conectada

 

Si no tenemos la conexión, debemos crear una nueva, teniendo en cuenta el nombre de nuestro servidor y el tipo de autenticación que tengamos. En mi caso es un servidor local, con la autenticación de Windows, por lo cual, no necesito introducir el nombre de usuario ni contraseña. Seleccionamos del desplegable la base de datos que queremos utilizar.

2.Paginación con ASP.NET en Visual Studio conectar con bbdd

 

Y por último, y en caso de que no se haya creado, haciendo clic derecho sobre la base de datos que acabamos de añadir, vemos sus propiedades y copiamos la cadena de conexión para añadirla posteriormente al web.config del proyecto

3.Paginación con ASP.NET en Visual Studio propiedades de la bbdd

4.Paginación con ASP.NET en Visual Studio cadena de conexion

5.Paginación con ASP.NET en Visual Studio webconfig

 

NOTA: Debemos tener en cuenta que podemos tener más de una cadena de conexión creadas, pero no pueden tener el mismo nombre. Y dependiendo del tipo de autenticación que utilizamos al crearla, debemos sustituir los **** que nos aparecerian, por la contraseña.

Teniendo todo esto configurado, ya podemos empezar.

 

PASOS PARA HACER LA PAGINACIÓN

PASO 1:

Vamos a la BBDD en SQL Server y creamos una consulta de tipo row_number que esta consulta lo que hará será añadir una columna dentro de la consulta para indicarnos la posición, para ello hay que indicarle sobre que columna de la tabla queremos ordenar los campos. Esta consulta la creamos dentro de un procedimiento almacenado para poder utilizarla después en el Visual Studio

  • Create procedure PAGINAR_EMP
  • (@POSICION int)
  • as
  • Select * from
  • (Select row_number() over (order by apellido)
  • as posicion, apellido, oficio
  • from emp) EMPLEADOS
  • where posicion >= @POSICION and posicion < @POSICION + 5
  • go

Donde, necesitaremos una variable que nos diga la posición dentro de los registros, los campos de la tabla que queremos mostrar y la condición que define cuantos registros por paginas queremos mostrar, en este caso el número 5 indica la cantidad de registros por página que se mostrarán

 

PASO 2:

En el proyecto en Visual Studio, si no tenemos una clase de Linq to SQL creada, debemos crearla, para así poder conectar el proyecto con la BBDD. Para hacerlo, sobre la carpeta de Model dentro del Explorador de soluciones, hacemos clic derecho y vamos a añadir nuevo elemento y en el apartado de Datos seleccionamos Clase de LINQ to SQL

7.Paginación con ASP.NET en Visual Studio modelo linq to sql

 

Una vez creada, en el Explorador de servidores buscamos la tabla que utilizaremos y la arrastramos hasta el modelo, al igual que el procedimiento que hemos creado en el paso anterior

8.Paginación con ASP.NET en Visual Studio modelo linq relleno

 

  • Creamos un modelo en mi caso lo he llamado ModeloPaginacion y en el creamos un nuevo DataContext de la clase de Linq to SQL que hemos creado antes. Para crear el ModeloPaginacion, lo haremos haciendo clic sobre la carpeta Model / agregar / clase

9.Paginación con ASP.NET en Visual Studio crear modeloPaginacion

10.Paginación con ASP.NET en Visual Studio crear nuevo modeloHosp

 

  • Necesitaremos crear un método del cual llamando al procedimiento almacenado que creamos nos devolverá la posición dentro de la lista, y que utilizaremos más adelante.

11.Paginación con ASP.NET en Visual Studio modelo-metodo

 

  • Y otro método con una consulta a la base de datos, para devolver el total de empleados que tenemos en la tabla, que utilizaremos igualmente más adelante

12. metodo-metodo contar empleados

 

PASO 3:

El siguiente paso será irnos al controlador de esa zona y lo primero será hace el using al modelo de nuestro proyecto, he iniciamos el modelo que hemos creado.

13. using controller-paginacion

 

En mi caso voy a mostrar los datos en la index, así que modificamos al ActionResult de esta vista y le indicamos que recibirá como parámetro la posición que le devolverá el controlador, como la primera vez que se ejecute no tendremos la posición, el parámetro será de tipo nullable (int? posicion)

  • Primero debemos preguntar si la posición es null que tome el valor 1, para que la primera vez que entramos a la página, nos muestre el primer registro del listado
  • if (posicion == null)
  • {
  • posicion = 1;
  • }
  • Para saber el número de página que tenemos que pintar nos hemos creado y llamaremos al método GetNumeroEmpleados() en el modeloPaginacion
  • int numeroempleados = this.modelo.GetNumeroEmpleados();
  • Recuperamos la lista de empleados que tenemos que visualizar
  • List<PAGINAR_EMPResult> empleados = this.modelo.GetEmpleadosPaginadoGrupo(posicion.GetValueOrDefault());

Pintar los datos

  • Y teniendo la cantidad y la lista de empleados, solo nos faltaría como vamos a mostrar los datos en la vista, para ello en mi caso, necesitamos el código de salida, un bucle para que nos muestre los empleados de 5 en 5 y una variable que tenga el número de páginas y otra con el último número a mostrar.
  • String html = “”;
  • int numeropagina = 1;
  • int numeroultimo = 0;
  • if > (posicion == null)
  • {
  • posicion = 1;
  • }
  • for (int i = 1; i <= numeroempleados; i += 5)
  • {
  • html += “<a href=’Index?posicion=” + i + “‘>”;
  • html += numeropagina;
  • html += “</a>”;
  • numeropagina += 1;
  • numeroultimo = i;
  • }
  • ViewBag.Enlaces = html;
  • ViewBag.Primero = “<a href = ‘Index?posicion=” + 1 + “‘ aria-label = ‘Previous’><span aria-hidden = ‘true’>&laquo;</span></a>”;
  • ViewBag.Ultimo = “<a href = ‘Index?posicion=” + numeroultimo + “‘ aria-label = ‘Next’><span aria-hidden = ‘true’>&raquo;</span></a>”;
  • Por último, retornamos la vista con el listado de empleados
  • return View(empleados);

14.Paginación con ASP.NET en Visual Studio controller-paginacion

 

PASO 4:

Como último paso, debemos dibujar los datos en la vista que verá el usuario final, yo he tomado el componente de Bootstrap para recorrer el listado, y los datos los dibujaré en una tabla

  • Primero debemos llamar al modelo en la vista
  • @model List<Paginacion.Models.PAGINAR_EMPResult>
  • Crear la tabla donde se mostrarán los datos y dentro, un foreach para que nos muestre cada uno de los registros
  • <table>
  • <tr>
  • <th style=”width:90px”>POSICION</th>
  • <th style=”width:90px”>APELLIDO</th>
  • <th style=”width:90px”>OFICIO</th>
  • </tr>
    • @foreach (var emp in Model)
    • {
    • <tr>
    • <td>@emp.posicion</td>
    • <td>@emp.apellido</td>
    • <td>@emp.oficio</td>
    • </tr>
    • }
  • </table>
  • Por último, el componente de navegación de Bootstrap con los datos que nos envía el controlador para poder movernos por el listado
  • <nav aria-label=”Page navigation”>
  • <ul class=”pagination”>
  • <li>@Html.Raw(ViewBag.Primero)</li>
  • <li>@Html.Raw(ViewBag.Enlaces)</li>
  • <li>@Html.Raw(ViewBag.Ultimo)</li>
  • </ul>
  • </nav>

15.Paginación con ASP.NET en Visual Studio vista-paginacion

 

Descripción: Con este Post y Videotutorial, se pretende enseñar como mostrar los datos de una tabla con un formato de paginación, utilizando MVC en Visual Studio, con ASP.NET.
Autora: Lis M. Fernández Gómez.
Curso: Microsoft MCSD Web Applications + SharePoint Apps.
Centro: Tajamar.
Año académico: 2016-2017.