2024年终活动

DevExpress控件使用交流,DevExpress中国社区Dev联系电话 联系电话:023-68661681

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

来源:本站   发布时间:2012-05-09   浏览:4290次

先看一下最终效果:

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

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

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

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

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

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

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

大型数据集

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

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

无限分页或无限滚动

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

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

为什么用无限分页?

我建议这种做法,原因有两个:

  1. 性能 - 当你没有一次性加载数千行和数百列数据时,你的网站速度会更快。
  2. 流畅 - 最终用户可以使用AJAX无缝加载更多信息继续他们的体验。

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

在完美世界里,每一个搜索结果都在一个页面,只有一条记录并且就是你正想找的。

分页也是阻力。

我的意思不是说所有的分页都应当被无限分页代替,但是我们作为软件开发者,应当避免产生成千上万的列表和分页,这无疑增大了用户的负担。记住,我们发明计算机是为了使人们的生活更容易,而不是更困难。

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

用户测试报告告诉我们搜索者更喜欢整页浏览、单页内容的版式,而不是只包含部分内容和许多分页符的页面。

有趣的是,用户不喜欢整页浏览花长时间加载(例如,当整页浏览加载需要一些时间时,用户认为它包含许多图像)。这是有道理的,因为我们知道,用户对缓慢不太满意。所以,整页浏览通常先加载需要显示的部分。作为一个站长,重要的是要平衡这种偏好页面的加载时间和整体用户体验。

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

实验,重复,实验...

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

你应该努力使分页无关高于一切,因为用户永远只会看到他们需要的那一条内容。 -Jeff Atwood

示例代码

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

  • 渲染后,当用户鼠标向下滚动页面,我们就处理浏览器"滚动"事件。
  • 当滚动到页面的底部,我们产生一个回调(使用ASPxCallback),从服务器获得新的数据部分。
  • 然后,我们将已收到的内容添加到dataContainerElement DIV元素的后面。
本站文章除注明转载外,均为本站原创或翻译
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:DevExpress控件中文网 [https://www.devexpresscn.com/]
本文地址:https://www.devexpresscn.com/post/186.html
扫码咨询
电话咨询
023-68661681
返回
顶部