¿Cómo crear un scroll infinito con JavaScript y C#?

Estrada Web Group
Administrador
¿Cómo crear un scroll infinito con JavaScript y C#?

En el desarrollo que estoy haciendo para la agencia de turismo hay un apartado donde se administran las imágenes de los Hoteles, en este artículo no voy a implementar el clásico sistema de paginación por un sistema de scroll infinito, estilo Twitter, Facebook, etc. El scroll infinito es cuando un usuario visualiza una página y llega al final de esta (hasta debajo de la página), ésta realiza automáticamente una petición AJAX al servidor para que éste le proporcione más registros y pueda seguir consultándolos el usuario. Estos registros serán procesados mediante Javascript para presentarlos en un formato de visualización determinado.

Ya logré implementarlo, lo verán en el siguiente video como se ve el funcionamiento, pero para este artículo he decidido desarrollar el scroll infinito de una forma manual para que tu puedas implementarlo en tus proyectos. Es realmente sencillo, así que voy a explicar rápidamente cómo podemos implementar este código en cualquier aplicación web.

Existen muchos complementos de jQuery que te ayudan a habilitar dicha función en las aplicaciones web. Sin embargo, si deseas evitar cualquier dependencia de terceros o tiene algunas necesidades específicas, puede crear tu propio desplazamiento infinito con unas pocas líneas de código jQuery y ASP.NET MVC. Este artículo te dice cómo se puede lograr eso.

La lógica general para implementar el desplazamiento infinito es similar a la paginación dirigida por Ajax. Sin embargo, a diferencia de la paginación donde un usuario hace clic explícitamente en un enlace de página, aquí debe detectar la posición de desplazamiento y cargar los registros automáticamente.

Primero debes crear una nueva aplicación web ASP.NET MVC. Agregue HomeController y la vista del controller recién creado. Abre la vista de índice y agregue el siguiente marcado.

<body>

    <div id="container"></div>

    <div id="progress" style="display:none">

        <h4>Cargando...</h4>

    </div>

</body>

La parte body del html consta de dos elementos <div>: el contenedor donde se muestran los datos y el indicador de progreso que se muestra solo durante una llamada ajax.

A continuación, agrega una referencia <script> de la biblioteca jQuery en la sección <head> del Html y también agregue un bloque <script> vacío. Luego agrega el siguiente código en el bloque <script>.

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
    var pageSize = 10;
    var pageIndex = 0;
    $(document).ready(function () {
        GetData();
        $(window).scroll(function () {
            if ($(window).scrollTop() ==
               $(document).height() - $(window).height()) {
                GetData();
            }
        });
    });
    function GetData() {
        $.ajax({
            type: 'GET',
            url: '/Home/GetData',
            data:{"pageindex":pageIndex,"pagesize":pageSize},
            dataType: 'json',
            success: function (data) {
                if (data != null) {
                    for (var i = 0; i < data.length; i++) {
                        $("#container").append("<h2>" +
                        data[i].CompanyName + "</h2>");
                    }
                    pageIndex++;
                }
            },
            beforeSend : function () {
                $("#progress").show();
            },
            complete : function () {
                $("#progress").hide();
            },
            error: function () {
                alert("Error while retrieving data!");
            }
        });
    }
</script>

El código declara dos variables globales (pageSize y pageIndex) para mantener el número de registros que se cargarán cada vez que se haga la llamada ajax y el índice actual de cada página de datos que se llama.

El controlador ready() invoca la función GetData() que realiza una llamada ajax al servidor y obtiene los datos iniciales que se mostrarán. En $(window).scroll es donde sucede la magia del desplazamiento infinito. El código conecta un controlador de eventos de desplazamiento al objeto window. Para decidir si un usuario ha llegado al final de la pagina, usamos los valores scrollTop() y height(). Si el usuario llegó al final, llamamos a GetData() para recuperar el siguiente conjunto de registros.

La función GetData() usa el método $.ajax() de jQuery para llamar al método GetData() del HomeController, del código de servidor. El método del lado del servidor GetData() se invoca utilizando una solicitud GET y los parametros pageIndex y pageSize se pasan al servidor. De esta manera, no necesita codificar estos valores en el código del lado del servidor.

La devolución de llamada exitosa recibe los datos en forma de matriz. En este ejemplo, utilizamos datos de la tabla Clientes de la base de datos Northwind. El bucle for itera a través de los datos y agrega CompanyName al elemento contenedor <div> usando el método append(). El pageIndex se incrementa para la próxima llamada ajax.

El evento beforeSend y complete el primero se ejecutan después de llamar por Ajax el método de servidor y simplemente muestran y el segundo cuando termina y sirve para ocultar el elemento indicador de progreso <div> usando los métodos show () y hide () respectivamente. La devolución de llamada de error simplemente muestra un mensaje de error.

El método del lado del servidor GetData () utilizado por la función del lado del cliente GetData() se encuentra en HomeController y como se muestra a continuación:

public ActionResult GetData(int pageIndex,int pageSize)
{
    System.Threading.Thread.Sleep(4000);
    NorthwindEntities db = new NorthwindEntities();
    var query = (from c in db.Customers
                    orderby c.CompanyName ascending
                    select c)
                 .Skip(pageIndex * pageSize)
                 .Take(pageSize);
    return Json(query.ToList(), JsonRequestBehavior.AllowGet);
}

EL método GetData() obtiene datos de la tabla Clientes. Observe el uso de Skip() y Take() para obtener solo el número requerido de registros. Los registros se devuelven al código del lado del cliente en formato JSON. Esto se hace usando el método Json(). Sleep() es solo para probar el indicador de progreso. Puedes eliminarlo en el código de producción.

¡Eso es! Ejecuta la aplicación y pruebe si funciona como se espera.

Compartir artículo:

Más artículos geniales

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;