Простая ASP.NET Бесконечная нумерация страниц

Question

Я пытаюсь реализовать простую бесконечную нумерацию страниц для раздела комментариев, аналогично комментариям на Youtube, где вы нажимаете Показать больше внизу, и он загружает еще несколько комментариев, но сохраняет состояние для предыдущих.

Я думаю, что я могу сделать это в UpdatePanel с ListView с инструментарием управления Ajax и немного Jquery, но просто нужно некоторое руководство. Я думал о том, чтобы отобразить первые 4 элемента, которые возвращаются и привязывают данные к моему ListView, ListView будет обернут в UpdatePanel с кнопкой "Показать больше", при нажатии кнопки он добавит еще 4 к источнику данных и перепривязит ListView, но это не будет плавно добавлять 4 комментария внизу, а раздел ListView будет обновляться для отображения новых комментариев.

Есть ли более плавный / лучший способ сделать это? Я использую Webforms.

Answer 1

Честно говоря, я бы избегал всей модели веб-форм для этого (включая UpdatePanel). Это добавляет много накладных расходов и сложности в этом случае.

Отправьте запрос AJAX обратно обработчику (что бы это ни было, страницу ASPX, созданную для этой цели, веб-метод, HttpHandler, контроллер MVC и т. Д.) И верните JSON. Поскольку комментарии довольно просты по структуре, нетрудно вставить / построить соответствующую разметку по мере необходимости.

Я построил бесконечную систему комментариев в приложении веб-форм ASP.Net, используя этот подход, и он прекрасно работает. Страница отображается как обычный ASPX с пользовательскими элементами управления. Пользовательский элемент управления для комментариев выводит только немного скрипта.

Я загружаю свои начальные комментарии, используя запрос к контроллеру, и когда пользователь прокручивает, я просто спрашиваю у контроллера следующий блок данных, пока контроллер не скажет мне, что я достиг конца набора (вы также можете добавить кепку, что пользователь не загружает слишком много записей и не ломает свой браузер).

пример

• Сделайте запрос используя jQuery.ajax()
• При успешном обратном вызове вы можете рассматривать данные, переданные ему, как объект JavaScript
• Переберите все элементы и создайте / добавьте 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);
        }
    }
});