Simple paginación infinita de ASP.NET

webforms pagination

Question

Estoy buscando implementar una paginación interminable simple para una sección de comentarios, similar a los comentarios de Youtube donde haces clic en Mostrar más en la parte inferior y carga algunos comentarios más, pero mantiene el estado de los comentarios anteriores.

Creo que puedo hacerlo en un UpdatePanel con un ListView con el kit de herramientas de control Ajax y un poco de Jquery, pero solo necesito una guía. Estaba pensando en mostrar los primeros 4 elementos que regresan y enlazarlos a mi ListView, ListView se incluiría en un UpdatePanel con un botón "Mostrar más", cuando se hace clic en el botón se agregarían 4 más a la fuente de datos y se volvería a unir el ListView, pero esto no agregaría los 4 comentarios al final, sino que la sección ListView se actualizaría para mostrar los nuevos comentarios.

¿Hay una manera más suave / mejor de hacer esto? Estoy usando Webforms.

Answer 1

Honestamente, evitaría todo el modelo de formularios web para esto (incluido el UpdatePanel ). Agrega mucho sobrecarga y complejidad en este caso.

Envíe una solicitud AJAX a un controlador (cualquiera que sea, página ASPX creada para este propósito, método web, HttpHandler, controlador MVC, etc.) y devuelva JSON. Dado que los comentarios son bastante simples estructuralmente, no debería ser difícil insertar / construir el marcado asociado según sea necesario.

He construido un sistema de comentarios sin fin en una aplicación de formularios web ASP.Net utilizando este enfoque, y funciona muy bien. La página se muestra como un ASPX normal con controles de usuario. El control de usuario para comentarios solo genera un poco de script.

Cargué mis comentarios iniciales usando una solicitud a un controlador, y cuando el usuario se desplaza simplemente le pregunto al controlador por el siguiente bloque de datos hasta que el controlador me dice que llegué al final del conjunto (también podría agregar un límite para que el usuario no carga demasiados registros y bloquea su navegador).

Ejemplo

• Hacer solicitud usando jQuery.ajax ()
• En su exitosa devolución de llamada, puede tratar los datos que se le pasan como un objeto JavaScript
• Pasa por todos los elementos y crea / agrega nodos DOM.

var element = $("#comments"); // this is your node with all comments

$.ajax({
    type: "POST",
    url: "ClientApi/Comments/_GetPaged", // this handler builds JSON
    dataType: "json",
    data: { pageIndex: 5 }, // your input values here
    cache: false,
    success: function (data) {
        for (var i = 0; i < data.length; i++) {
            var comment = data[i];
            var itemElement = $("<div/>").appendTo(element);

            // do whatever you want here, just remember that user input 
            // should be sanitized somewhere during the process
            itemElement.html(comment.text);
        }
    }
});