4

我希望为评论部分实现一些简单的无休止分页，类似于 Youtube 评论，您在底部单击“显示更多”，它会加载更多评论，但会保持先前评论的状态。

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

有没有更顺畅/更好的方法来做到这一点？我正在使用网络表单。

4

1 回答 1

1

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

将 AJAX 请求发送回处理程序（无论是什么，为此目的构建的 ASPX 页面、Web 方法、HttpHandler、MVC 控制器等）并返回 JSON。由于注释在结构上相当简单，因此根据需要插入/构建相关标记应该不难。

我使用这种方法在 ASP.Net Web 表单应用程序中构建了一个无尽的评论系统，效果很好。该页面呈现为带有用户控件的普通 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);
        }
    }
});
于 2012-12-11T20:25:16.653 回答