ASP.NET 3.5中新增加的ListView控件是一个用于页面数据绑定和界面布局的非常棒的控件,它在ASP.NET 2.0 GridView的基础上做了很多改进,用户在使用时可以控制的元素更多,开发时的灵活性更大了,个人觉得ListView在使用时比DataGrid和GirdView更加顺手。ListView控件本身并没有分页功能,不过借助于ASP.NET中新增加的DataPager控件,我们可以非常方便地对ListView中的数据设置分页,这几乎不需要开发人员写一行代码,将ListView控件放到页面上,设置好布局和DataSource,然后再添加一个DataPager控件,将它的PagedControlID属性设置成ListView的ID,PageSize中设置每页要显示的数据条数,然后在Fields中设置好分页的样式(当然你完全可以不用去管样式,ASP.NET会根据内置的样式来定义分页UI),运行Web程序,你就会看到一个支持分页的ListView页面,整个过程非常简单。在ASP.NET 3.5中,微软将数据绑定控件和分页控件分离开来了,这样用户就可以在页面的任何地方设置分页,并根据自己的需要定义各种不同的分页样式,同时,分页控件可以控制任意一个数据绑定控件,它们之间通过PagedControlID属性来指定,基本上对于分页操作,开发人员可以随心所欲了。如何使用ListView控件和DataPager控件不是本文的重点,感兴趣的读者可以去查一下微软的MSDN,我想它应该比我讲得要详细得多。
\n
先说说数据分页的原理。我们在开发数据绑定页面的Web应用程序时,常常会遇到数据量比较多的情况,为了防止页面变得过大加载数据慢的问题,大家都会将一个页面上要显示的数据通过分页来完成,用户访问页面时通过分页功能来查看不同页面中的数据,这是一个非常好的解决办法,而且几乎所有的程序设计人员和开发人员都会不约而同乐此不彼地采用分页的方式来显示页面上的数据,这没有什么问题! 问题在于分页的方式。
\n
一般情况下,最简单的实现方法是一次性将所有页面的数据读到缓存媒介中(这个媒介一般都是服务器的内存),然后每次只显示一页的数据。这种方式实现起来很容易,而且ASP.NET之前几乎所有的支持分页的数据绑定控件都是采用的这种方式,以至于很多ASP.NET的初学者都采用了这样的方式来开发分页数据绑定页面,并且没有觉察出任何问题。是的,程序开发中采用最简单有效的方法一般都是不会出现什么问题的,况且微软提供的标准控件都是这样做的,会有什么问题呢?对于一些小的Web应用程序而言,这确实没有什么问题,因为它涉及到的数据量比较小,即使我们将所有的数据都读到内存中,充其量也才几兆,多一点十几兆,几十兆。如果这些数据都是纯文本的话(一般而言我们保存在数据库中的数据都是文本信息),几十兆的数据已经是成千上万条记录了,现在的服务器硬件条件都比较好,内存都在G级以上,处理这点数据根本不在话下。但是,如果数据库中的一个表的记录达到上亿条,并且有些字段存储的是文件数据(也就是二进制数据),这样一次性将所有的数据读到内存中就不是一个理想的做法了,这个时候就需要采用“真分页”方式读取数据。
\n
大部分情况下,我们还是需要采用“真分页”的方式来获取数据的。给定每页记录的起始位置(或者页面的索引),再给定一个每页显示的数据的条数和总记录数,我们希望每次取到的只是当前页面的数据。每次当用户分页时,根据这些条件从数据库中取一部分数据绑定到页面上,这样可以大大减少服务器的开销,并且再大的数据量也不是问题。这种方式似乎是理想的,然而结合用户的需求,我们会发觉即使采用“真分页”方式对数据进行分页获取,也还是会遇到问题。试想,在当今Ajax横行的Web世界里,利用Ajax方式改善用户体验的站点层出不穷,如果你恰好有一个采用Ajax方式提供的分页数据绑定页面,那问题就会出现了。由于Ajax的用户体验效果是页面的局部刷新,在分页数据绑定页面中,用户点击分页按钮后页面会以较快的速度更新分页后的数据,这个体验对用户来说是相当不错的,但是贪婪的用户有可能会想试试频繁地点击分页按钮,甚至于疯狂的用户狂点分页按钮,这个时候你的应用程序由于需要非常频繁地去数据库中获取分页数据而来不及更新页面上的数据而出现脚本错误,最终给用户的体验就是页面的分页功能不正常,程序崩溃了。
\n
采用“真分页”和“假分页”相结合的方式可以很有效得解决上面提到的这个问题。我将上面提到的第一种数据分页方式称之为“假分页”,而将第二种数据分页方式称之为“真分页”。这两种分页方式的结合,就是说一次性读取n页的数据到缓存中,分页时根据需要判断是否从缓存中直接获取数据还是重新从数据库中加载数据到缓存里。毕竟,从缓存中加载数据效率要高得多。这样,每次用户点击分页按钮时,只要数据存在于缓存里,就可以以非常快的速度加载数据,如果缓存过期或者用户要获取的数据超出了缓存,就从数据库中重新加载新的n页数据到缓存中。当然,更新缓存的过程你可以在Ajax中采用同步采用,以限制用户在这个过程中的UI操作。
\n
其实,分页中所涉及到的细节问题是很多的,要想详细叙述并讲清楚这其中的所有问题,光靠本文的只言片语恐怕是远远不够的,这里我只想向大家介绍一种在ASP.NET Ajax方式下进行真分页编程的一种方法。为了比较简单地使用Ajax方式,我在Visual Studio中直接使用了微软提供的ajaxToolkit包里的Ajax控件,这些控件一般来说都还是挺好用的,这里不对这些控件的使用做介绍了。
\n
在写这篇文章之前我也查阅了很多资料,其实大家在开发数据绑定页面时一般都会采用“真分页”的方式来对数据进行分页处理,ASP.NET 3.5中的DataPager控件是一个用于数据分页的不错的控件,有的人把微软提供的数据绑定控件不支持数据“真分页”的缺陷归到它的头上,我认为这是对它的冤枉。DataPager只负责分页操作,它不管数据源的事情,它更重要的工作在于如何处理分页UI以及与用户的交互。那么,数据源怎么处理呢?数据绑定控件如何知道我的数据源被分成了多少页,我当前取的是哪一页的数据呢?
\n
这些问题也一度让我很苦恼,我尝试过使用.NET中的PagedDataSource对象对数据进行分页,但是后来发觉这个对象也是需要一次性将所有的数据读到内存中才支持分页的,说白了,它也是一个“假分页”数据源对象,和DataGrid、GridView没有什么不同。记得从.NET 2.0开始,微软提供了一系列数据源控件(诸如SqlDataSource、XmlDataSource、LinqDataSource等等)来简化对数据绑定控件的数据源指定,其实我觉得这些控件除了简化代码外没有什么大的价值,有的时候还会破坏程序本身的结构,我一向都反对在页面上直接使用这些控件(当然,做一些演示用的程序使用这些控件还是非常便捷的)。不过我在研究Ajax真分页的过程中无意间看到了Visual Studio工具箱中的ObjectDataSource这个控件,起初我只是认为它应该是那些DataSource控件的基控件,后来通过查资料才知道,这个控件是所有的DataSource控件中唯一支持“真分页”操作的控件,它可以通过设定几个简单的属性就达到数据分页的功能,下面我就向大家介绍一下如何使用这个控件。
\n
这个控件的使用很简单,我们只需要配置几个属性就可以了。
\n
SelectMethod:指定用于获取分页数据的方法名。这个方法是一个自定义的.NET方法,你可以写在页面的CodeBehind代码中,将方法的名字给ObjectDataSource控件的SelectMethod即可。ObjectDataSource控件会通过委托的方式自动去执行你所指定的这个方法。
\n
TypeName:使用ObjectDataSource控件的类的全名称(包括名称空间和类名)。这个属性必须指定,ASP.NET会通过反射来加载相应的方法和对象。
\n
DataObjectTypeName:数据源对象的类型全名称。ObjectDataSource控件最大的亮点就在于它完全支持面向对象数据操作。在分层应用程序开发中,数据访问层的代码会将数据库中的表抽象为class对象,将数据库表中的字段抽象为class对象中的属性,DataObjectTypeName属性所指定的就是这个数据库类对象。
\n
EnablePaging:如果你想开启数据分页功能,就需要将这个属性的值设置为True。
\n
MaximumRowsParameterName:这个属性的值是一个参数名(只是一个参数名,而不是每页显示的数据条数),用于指示每页要显示数据的条数,ObjectDataSource控件根据委托在之前SelectMethod属性所指定的方法中传递该参数并执行其中的代码。注意,这个参数的名称必须与SelectMethod属性所指定的方法中的参数名称完全一样。
\n
StartRowIndexParameterName:这个属性也是一个参数名,用于指示每页起始记录的索引。用法与MaximumRowsParameterName相同。
\n
SelectCountMethod:这个属性是一个方法的签名,用来告诉ObjectDataSource控件通过什么方式得知数据源中总记录的条数。ObjectDataSource控件同样通过委托来执行这个方法,所以方法的签名必须与属性的值完全一样。
\n
然后我们在页面上放置一个ListView控件(或者其它任何一个数据绑定控件),将它的DataSourceID属性的值设置为ObjectDataSource的ID,然后添加一个DataPager控件,将PagedControlID属性的值设置为ListView的ID。
\n
这是我所取的数据源中的三张数据表的结构关系图,其中主表是Shoutout表,Shoutout中的一条记录对应着多个Image,它们通过BaseComment表进行关联。在下面我会给出如果获取Shoutout分页数据的存储过程的代码。
\n
Code highlighting produced by Actipro CodeHighlighter (freeware)
\nhttp://www.CodeHighlighter.com/
–><%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”AllShoutout.aspx.cs” Inherits=”ShoutoutWallTest.AllShoutout” %>
<%@ Register Assembly=”AjaxControlToolkit, Version=3.0.20820.415, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e”
Namespace=”AjaxControlToolkit” TagPrefix=”ajaxToolkit” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>Untitled Page</title>
<link href=”Css/style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager>
<div id=”shoutoutall”>
<div style=”float: left;”>
<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server” UpdateMode=”Conditional”>
<ContentTemplate>
<asp:ObjectDataSource ID=”ObjectDataSource1″ runat=”server” SelectMethod=”LoadShoutouts”
TypeName=”ShoutoutWallTest.AllShoutout” DataObjectTypeName=”Model.Shoutout” EnablePaging=”True”
MaximumRowsParameterName=”maxRows” StartRowIndexParameterName=”startIndex” SelectCountMethod=”CountAll”></asp:ObjectDataSource>
<div id=”shoutoutalldescription”>
<asp:ListView ID=”lvShoutout” DataSourceID=”ObjectDataSource1″ runat=”server” ItemPlaceholderID=”layoutTableTemplate”
DataKeyNames=”ID” OnItemDataBound=”lvShoutout_ItemDataBound”>
<LayoutTemplate>
<div id=”layoutTableTemplate” runat=”server”>
</div>
</LayoutTemplate>
<ItemTemplate>
<div class=”shoutoutallcontent”>
<div class=”shoutoutalltext”>
<%#Eval(“Description”) %></div>
<div>
<!–Add images here–>
<asp:ListView ID=”lvImages” runat=”server” ItemPlaceholderID=”layoutImages” DataSource=’<%#Eval(“Images”)%>’>
<LayoutTemplate>
<div id=”layoutImages” runat=”server”>
</div>
</LayoutTemplate>
<ItemTemplate>
<a href=’Thumbnail.aspx?isthumbnail=false&basecommentid=<%#Eval(“BaseCommentID”).ToString() %>&imagetitle=<%#Eval(“Title”) %>’
target=”_blank”>
<img src=’Thumbnail.aspx?basecommentid=<%#Eval(“BaseCommentID”).ToString() %>&imagetitle=<%#Eval(“Title”) %>’
alt=”" class=”shoutoutimg” /></a>
</ItemTemplate>
</asp:ListView>
</div>
<div class=”shoutoutallposted”>
Posted by:<%#Eval(“PostedByName”) %> <%#((DateTime)Eval(“PostedDate”)).ToShortDateString() %></div>
<div class=”shoutoutallfooter”>
<asp:Button ID=”btEdit” CssClass=”shoutoutalllistbutton” onClick=”btEdit_Click” runat=”server”
Text=”Edit” />
<asp:Button ID=”btDel” CssClass=”shoutoutalllistbutton” onClick=”btDel_Click” runat=”server”
Text=”Delete” OnClientClick=”return confirm(‘Are you sure delete it?’);” />
</div>
</div>
</ItemTemplate>
</asp:ListView>
</div>
<div class=”shoutoutallfooter”>
<asp:DataPager ID=”DataPager1″ runat=”server” PagedControlID=”lvShoutout” PageSize=”25″>
<Fields>
<asp:NextPreviousPagerField ButtonType=”Image” FirstPageText=”Go to first page” FirstPageImageUrl=”./Images/ShoutOut_ViewAll_Left.gif” ShowFirstPageButton=”true” ShowNextPageButton=”false”
ShowPreviousPageButton=”false” />
<asp:NumericPagerField NumericButtonCssClass=”shoutoutallnumericpager” ButtonType=”Button” PreviousPageImageUrl=”./Images/ShoutOut_ViewAll_Left.gif” NextPreviousButtonCssClass=”shoutoutallnextprepager” NextPageText=”>>” PreviousPageText=”<<” CurrentPageLabelCssClass=”shoutoutallcurrentpager” ButtonCount=”5″ />
<asp:NextPreviousPagerField ButtonType=”Image” LastPageText=”Go to last page” LastPageImageUrl=”./Images/ShoutOut_ViewAll_Right.gif” ShowLastPageButton=”true” ShowNextPageButton=”false”
ShowPreviousPageButton=”false” />
</Fields>
</asp:DataPager>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>