Question

我希望为评论部分实现一些简单的无限分页，类似于Youtube评论，您点击底部的显示更多，它会加载更多评论，但保留以前的评论。

我想我可以在UpdatePanel中使用带有Ajax控件工具包的ListView和一些Jquery来完成它，但只需要一些指导。我正在考虑显示返回的前4个项目并将它们数据绑定到我的ListView，ListView将被包装在UpdatePanel中，并显示“Show More”按钮，当单击该按钮时，它将向数据源添加4个并重新绑定ListView，但这不会顺利地添加4个注释到底部，而是ListView部分会刷新以显示新注释。

这样做有更顺畅/更好的方法吗？我正在使用Webforms。

Answer 1

老实说，我会避免整个网络表单模型（包括UpdatePanel）。在这种情况下，它增加了很多开销和复杂性。

将AJAX请求发送回处理程序（无论它是什么，为此目的构建ASPX页面，Web方法，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);
        }
    }
});

简单的ASP.NET无尽分页

1 个答案:

实施例