无限分页 - 用DevExpress ASP.NET实现鼠标滚动自动加载内容

先看一下最终效果：

使用DevExpress ASP.NET实现上图效果的方法

您可以用以下DevExpress ASP.NET控件实现上图中的效果：

• ASPxCallback
• ASPxLoadingPanel
• ASPxPanel
• ASPxClientUtils对象中的JavaScript方法

你可以到示例代码中心查看代码：

ASPxCallback - 鼠标滚动时如何加载内容 - 当鼠标向下滚动时自动加载内容

下面让我们看看"无限分页"方案能给我们带来的好处和一些可能会遇到的问题。

大型数据集

现在大数据集在网络上随处可见，一旦用户需要处理这些一T或更多的信息时，你该怎么办呢？你可以将它们分成小块的数据分页：

无限分页或无限滚动

无限分页 (或无限滚动)被许多公司使用，如Facebook、Bing、腾讯、新浪、twitter等。

当一个页面有大量内容提交时，无限分页是一个不错的选择。一些不需要显示的数据内容没有必要一次性加载和显示，当用户鼠标向下滚动时，再自动加载更多的数据。（像上面的gif动画显示的那样）

为什么用无限分页？

我建议这种做法，原因有两个：

Jeff Atwood有一个梦幻般的博客文章，标题为"分页的结束"。我从里面截取了一小段：

Google研究证实最终用户通常不喜欢看到所有的数据：

无限滚动也有一些缺点，比如滚动条的问题，深层链接，后退按钮的位置，以及其他Jeff的文章（The End of Pagination）中提到的问题。

实验，重复，实验...

重复和测试各种可用性方案是良好用户界面的关键。我建议你使用DevExpress ASPxCallBack，ASPxLoadingPanel等尝试无限分页。无限分页的功能包含在ASPxGridView中：ASPxGridView Virtual scrolling/paging示例

示例代码

示例代码中心的操作流程如下：

• 渲染后，当用户鼠标向下滚动页面，我们就处理浏览器"滚动"事件。
• 当滚动到页面的底部，我们产生一个回调（使用ASPxCallback），从服务器获得新的数据部分。
• 然后，我们将已收到的内容添加到dataContainerElement DIV元素的后面。