原文出处：MSDN Magazine Feb 2004 (Client-side Paging for DataGrids)

原代码下载：WickedCode0402.exe (120KB)

开发人员对ASP.NET中的DataGrid控件又爱又恨。一方面，DataGrids大大简化了在HTML中通过表格中描述数据源，另一方面，DataGrid在服务器端如此重要，导致了大量的页面请求被传回服务器。例如，当用户使用分页DataGrid时，从一个页面转到另一个页面就会导致页面请求传回服务器。这样就会降低系统的性能。毫无疑问，广大开发人员的心愿就是有一种好的DataGrid，能够使包括数据记录的页面时不必重复发送请求到服务器。

从理论上讲，建立一个在客户端进行分页处理的HTML表格并不困难，因为有功能强大的客户端脚本。Figure 1中的HTML页面演示了实现客户端分页的一种方法。当页面在浏览器中被查看时(见Figure 2)，显示为一张表格。但是实际上有3张表格放在了<DIV>范围内。每一个<DIV>确保任一时刻只有一个表格是可见的。要显示前一页或后一页，可以通过少量的JavaScript语句隐藏当前的<DIV>模块来实现。表格的显示和不显示使之看起来就像是在一张表格。

我们可以用这个技术来实现DataGrid控件实现客户端分页。难点是如何修改DataGrid类来产生如Figure 1那样的外观。

这就是Wicked Code部分所要讨论的：通过建立一个插件取代客户端的分页，来增强DataGrid控件的性能。为了增加这个非常有用的工具，本文介绍一个通过继承并增加新功能来修改ASP.NET控件的好例子。

 ClientPageDataGrid控件介绍

ClientPageDataGrid是从DataGrid控件继承而来并增加了客户端分页支持的ASP.NET控件。由于它在功能上取代了DataGrid，因此你可以在任何能使用DataGrid控件的地方使用它。

Figure 3中的WEB页面是按以往的方法实现分页的：重复发送数据请求到服务器。该DataGrid被设置为允许分页(AllowPaging="true")和每页显示16条记录(PageSize="16")。点击该页中DataGrid下面任何一个按钮，页面请求都将被发送到服务器并且触发PageIndexChanged事件，同时激发OnNewPage方法。OnNewPage方法将设置DataGrid的CurrentPageIndex属性为上一页或下一页的索引，并将新页面返回给客户端。

Figure 4显示了用ClientPageDataGrid实现的页面，页面变化如红色所示。DataGrid控件被ClientPageDataGrid控件取代了。为了实现分页，AllowPaging="true"改成了AllowClientPaging="true"，PageSize="16" 改成了ClientPageSize="16"。OnPageIndexChanged属性和OnNewPage方法在新控件中已经被删除了。现在就可以实现完全在客户端分页了。

要使用ClientPageDataGrid 这个控件，请先将ClientPaging.aspx拷贝到ASP.NET WEB服务器的一个虚目录中(例如:wwwroot)，接着拷贝动态库ClientPageDataGrid.dll到该虚目录的bin子目录，最后在浏览器中打开ClientPaging.aspx这个文件。你就可以看到如Figure 5中所示的页面，可以用左下角的箭头向前或向后翻页。ClientPaging.aspx看起来并且感觉就像是ServerPaging.aspx，但实际上是大不相同的。ServerPaging.aspx页面多次从服务器端装入，并且翻页的速度受限于服务器和客户端的连接情况。相反，ClientPaging.aspx装入速度稍微慢点，是因为要下载页面全部记录，这比一页的数据要多。但是一旦页面装入完毕，翻页速度就与连接速度无关了。