彩票走势图

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

原创|其它|编辑:郝浩|2012-05-09 21:16:30.000|阅读 675 次

概述:现在大数据集在网络上随处可见,您可以用以下DevExpress ASP.NET控件实现无限分页,实现鼠标滚动自动加载内容,这样网站性能更高,网站访问更加流畅。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

先看一下最终效果:

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

使用实现上图效果的方法

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

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

你可以到查看代码:

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

大型数据集

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

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

无限分页或无限滚动

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

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

为什么用无限分页?

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

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

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

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

分页也是阻力。

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

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

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

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

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

实验,重复,实验...

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

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

示例代码

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

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

出处:


(慧都控件网版权所有,转载请注明出处,否则追究法律责任)

标签:HTML5ASP.NET

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP