Einfache ASP.NET Endless Pagination

Question

Ich suche nach Möglichkeiten, eine einfache Endlos-Paginierung für einen Kommentarbereich zu implementieren, ähnlich wie bei Youtube-Kommentaren, wo man unten auf "Mehr anzeigen" klickt und es lädt ein paar weitere Kommentare, während der Zustand für die vorherigen erhalten bleibt.

Ich denke, ich kann es in einem UpdatePanel mit einem ListView mit dem Ajax Control Toolkit und etwas Jquery machen, brauche aber nur etwas Orientierung. Ich dachte daran, die ersten 4 Elemente anzuzeigen, die zurückkommen, und sie an meinen ListView zu binden. Der ListView würde in ein UpdatePanel eingewickelt sein mit einem "Mehr anzeigen" Button. Wenn der Button geklickt wird, würde er 4 weitere Elemente zur Datenquelle hinzufügen und den ListView neu binden. Der Bereich des ListViews würde jedoch nicht reibungslos um die 4 Kommentare unten ergänzt werden, sondern sich aktualisieren, um die neuen Kommentare anzuzeigen.

Gibt es eine flüssigere/bessere Möglichkeit, dies zu tun? Ich benutze Webforms.

Answer 1

Ehrlich gesagt würde ich das gesamte Webformularmodell dafür meiden (inklusive des UpdatePanel). Es fügt in diesem Fall viel Overhead und Komplexität hinzu.

Senden Sie eine AJAX-Anfrage an einen Handler zurück (was auch immer es ist, eine ASPX-Seite, die für diesen Zweck erstellt wurde, eine Web-Methode, ein HttpHandler, ein MVC-Controller usw.) und geben Sie JSON zurück. Da Kommentare strukturell ziemlich einfach sind, sollte es nicht schwer sein, die erforderlichen Markups einzufügen/aufzubauen.

Ich habe ein endloses Kommentarsystem in einer ASP.Net-Webformular-App mit diesem Ansatz erstellt, und es funktioniert großartig. Die Seite wird einfach als normale ASPX mit Benutzersteuerelementen gerendert. Das Benutzersteuerelement für Kommentare gibt nur ein bisschen Skript aus.

Ich lade meine anfänglichen Kommentare mithilfe einer Anfrage an einen Controller und wenn der Benutzer scrollt, frage ich den Controller einfach nach dem nächsten Datenblock, bis der Controller mir sagt, dass ich das Ende der Menge erreicht habe (Sie könnten auch eine Beschränkung hinzufügen, damit der Benutzer nicht zu viele Datensätze lädt und seinen Browser zum Absturz bringt).

Beispiel

• Führen Sie eine Anfrage mit jQuery.ajax() durch
• In Ihrem Erfolgs-Callback können Sie die übergebene Daten als JavaScript-Objekt behandeln
• Schleife durch alle Elemente und erstellen/hinzufügen von DOM-Knoten.

---

var element = $("#comments"); // Hier ist Ihr Knoten mit allen Kommentaren

$.ajax({
    type: "POST",
    url: "ClientApi/Comments/_GetPaged", // Dieser Handler erstellt JSON
    dataType: "json",
    data: { pageIndex: 5 }, // Ihre Eingabewerte hier
    cache: false,
    success: function (data) {
        for (var i = 0; i < data.length; i++) {
            var comment = data[i];
            var itemElement = $("