对于几乎所有的数据表现Web应用来说,组织好数据的显示方式、避免给用户带来混乱的感觉就是最主要的目标之一。每个页面显示20条记录当然是可以接受的,但每页显示10000条记录就很容易给用户带来不便了。将数据分成多个页面显示,即对数据进行分页,是解决此类问题的最常见的办法。
一、慨述
ASP.NET本身只提供了一个支持数据分页的控件,即DataGrid分页控件,不过它比较适合Intranet环境使用,对于Internet环境来说,DataGrid分页控件提供的功能似乎不足以构造出灵活的Web应用。其中一个原因是,DataGrid控件对Web设计者放置分页控件的位置和分页控件的外观都有限制,例如,DataGrid控件不允许垂直放置分页控件。另一个能够发挥分页技术优势的控件是Repeater,Web开发者可以利用Repeater控件快速配置数据的显示方式,但分页功能却需要开发者自己实现。数据源在不断地变化,数据表现方式也千差万别,如果针对这些不断变动的条件分别定制分页控件,显然太浪费时间了,构造一个不限于特定表现控件的通用分页控件将极大地有利于节省时间。
一个优秀的通用数据控件不仅提供常规的分页功能,而且还要能够:
⑴ 提供“首页”、“上一页”、“下一页”、“末页”分页导航按钮。
⑵ 根据数据显示情况调整自身的状态,即具有数据敏感性。如果分页控件被设置成每页显示10个记录,但实际上只有9个记录,那么分页控件不应该显示出来;在数据分成多页显示的情况下,第一个页面的“首页”、“上一页”按钮不应显示出来,最后一个页面的“下一页”、“末页”按钮也不应该显示出来。
⑶ 不能依赖于特定的数据显示控件。
⑷ 具有适应各种现有、将有数据源的能力。
⑸ 应当能够方便地配置显示方式,轻松地集成到各种应用之中。
⑹ 当分页就绪时,提醒其他控件。
⑺ 即使是缺乏经验的Web设计者,也要能够毫无困难地使用。
⑻ 提供有关分页信息的属性数据。
目前市场上已经有一些提供上述功能的商业性控件,不过都价格不菲。对于许多开发者来说,自己构造一个通用的分页控件是最理想的选择。
图一显示了本文通用分页控件的运行界面,其中用于显示的控件是一个Repeater控件。分页控件由两类部件构成:四个导航按钮,一组页面编号链接。
用户可以方便地改换显示控件、改变分页控件本身的外观。例如,和分页控件协作的显示控件换成了一个DataGrid控件,页面编号链接和四个导航按钮分两行显示。
ASP.NET支持创建定制Web控件的三种方式:用户控件,复合控件,自定义控件。第三种控件即自定义控件的名称很容易引起误解。实际上,所有这三种控件都应该算是自定义控件。复合控件和微软所谓的自定义控件的不同之处在于,前者要用到CreateChildControls()方法,CreateChildControls()方法允许控件根据某些事件重新绘制自身。对于本文的通用分页器,我们将使用复合控件。
下面的UML序列图概括了通用分页控件的一般机制。
虽然我们的目标是让通用分页控件不依赖于表现数据的控件,但很显然,总得有某种方法让分页控件访问数据。每一个从Control类继承的控件都提供一个DataBinding事件。我们把分页器本身注册成DataBinding事件的监听器,分页器就可以获知数据的情况并修改数据。由于所有从Control类继承的控件都有这个DataBinding事件,所以分页器控件达到了不依赖于特定数据表现控件的目标——换句话说,分页器控件可以绑定到所有从Control类派生的控件,即它能够绑定到几乎所有的Web控件。
二、核心功能
当表现控件触发DataBinding事件,分页控件就可以获取DataSource属性。遗憾的是,微软没有提供所有数据绑定类实现的接口,诸如IdataSourceProvider之类,而且并非所有从Control或WebControl类继承的控件都有一个DataSource属性,因此向上定型成Control类没有意义,唯一可行的办法是通过Reflection API直接操作DataSoruce属性。在讨论事件句柄方法之前,应该指出的是,为了注册事件句柄,首先必须获得一个表现控件的引用。分页控件显露了一个简单的字符串属性BindToControl:
public string BindToControl { get { if (_bindcontrol == null) throw new NullReferenceException("在使用分页控件之前,请先通过设置BindToControl属性绑定到一个控件。"); return _bindcontrol;} set{_bindcontrol=value;} } |
protected override void OnInit(EventArgs e) { _boundcontrol = Parent.FindControl(BindToControl); BoundControl.DataBinding += new EventHandler(BoundControl_DataBound); base.OnInit(e); ... } |
private void BoundControl_DataBound(object sender,System.EventArgs e) { if (HasParentControlCalledDataBinding) return; Type type = sender.GetType(); _datasource = type.GetProperty("DataSource"); if (_datasource == null) throw new NotSupportedException("分页控件要求表现控件必需包含一个DataSource。"); object data = _datasource.GetGetMethod().Invoke(sender,null); _builder = Adapters[data.GetType()]; if (_builder == null) throw new NullReferenceException("没有安装适当的适配器来处理下面的数据源类型:"+data.GetType()); _builder.Source = data; ApplyDataSensitivityRules(); BindParent(); RaiseEvent(DataUpdate,this); } |
在DataBound中,我们尝试通过Reflection API获得DataSource属性,然后返回实际数据源的一个引用。现在虽然已经获知了数据源,但分页控件还必须知道如何操作该数据源。为了让分页控件不依赖于特定的表现控件,问题复杂了很多。不过,如果让分页控件依赖于特定的数据源,那就背离了设计一个灵活的分页控件的目标。我们要通过一个接插式的体系结构来确保分页控件能够处理各种数据源,无论是.NET提供的数据源,还是自定义的数据源。
为了提供一个健壮的、可伸缩的接插式体系结构,我们将利用[GoF] Builder模式构造出一个解决方案。
图四
IDataSourceAdapter接口定义了分页控件操作数据所需的最基本的元素,相当于“插头”。
publicinterface IDataSourceAdapter { int TotalCount{get;} object GetPagedData(int start,int end); } |
internal class DataViewAdapter:IDataSourceAdapter { private DataView _view; internal DataViewAdapter(DataView view) { _view = view; } public int TotalCount { get{return (_view == null) ? 0 : _view.Table.Rows.Count;} } public object GetPagedData(int start, int end) { DataTable table = _view.Table.Clone(); for (int i = start;i<=end && i<= TotalCount;i++) { table.ImportRow(_view[i-1].Row); } return table; } } |
public abstract class AdapterBuilder { private object _source; private void CheckForNull() { if (_source == null) throw new NullReferenceException("必须提供一个合法的数据源"); } public virtual object Source { get { CheckForNull(); return _source;} set { _source = value; CheckForNull(); } } public abstract IDataSourceAdapter Adapter{get;} } |
public class DataTableAdapterBuilder:AdapterBuilder { private DataViewAdapter _adapter; private DataViewAdapter ViewAdapter { get { if (_adapter == null) { DataTable table = (DataTable)Source; _adapter = new DataViewAdapter(table.DefaultView); } return _adapter; } } public override IDataSourceAdapter Adapter { get { return ViewAdapter; } } } public class DataViewAdapterBuilder:AdapterBuilder { private DataViewAdapter _adapter; private DataViewAdapter ViewAdapter { get { // 延迟实例化 if (_adapter == null) { _adapter = new DataViewAdapter((DataView)Source); } return _adapter; } } public override IDataSourceAdapter Adapter { get{return ViewAdapter;} } } |
public class AdapterCollection:DictionaryBase { private string GetKey(Type key) { return key.FullName; } public AdapterCollection() {} publicvoid Add(Type key,AdapterBuilder value) { Dictionary.Add(GetKey(key),value); } publicbool Contains(Type key) { return Dictionary.Contains(GetKey(key)); } publicvoid Remove(Type key) { Dictionary.Remove(GetKey(key)); } public AdapterBuilder this[Type key] { get{return (AdapterBuilder)Dictionary[GetKey(key)];} set{Dictionary[GetKey(key)]=value;} } } |
public AdapterCollection Adapters { get{return _adapters;} } private bool HasParentControlCalledDataBinding { get{return _builder != null;} } private void BoundControl_DataBound(object sender,System.EventArgs e) { if (HasParentControlCalledDataBinding) return; Type type = sender.GetType(); _datasource = type.GetProperty("DataSource"); if (_datasource == null) throw new NotSupportedException("分页控件要求表现控件必需包含一个DataSource。"); object data = _datasource.GetGetMethod().Invoke(sender,null); _builder = Adapters[data.GetType()]; if (_builder == null) throw new NullReferenceException("没有安装适当的适配器来处理下面的数据源类型:"+data.GetType()); _builder.Source = data; ApplyDataSensitivityRules(); BindParent(); RaiseEvent(DataUpdate,this); } |
public Pager() { SelectedPager=new System.Web.UI.WebControls.Style(); UnselectedPager = new System.Web.UI.WebControls.Style(); _adapters = new AdapterCollection(); _adapters.Add(typeof(DataTable),new DataTableAdapterBuilder()); _adapters.Add(typeof(DataView),new DataViewAdapterBuilder()); } |
private void BindParent() { _datasource.GetSetMethod().Invoke(BoundControl, new object[]{_builder.Adapter.GetPagedData(StartRow,ResultsToShow*CurrentPage)}); } |
public ImageButton FirstButton{get {return First;}} public ImageButton LastButton{get {return Last;}} public ImageButton PreviousButton{get {return Previous;}} public ImageButton NextButton{get {return Next;}} |
[Template Container(typeof(LayoutContainer))] public ITemplate Layout { get{return (_layout;} set{_layout =value;} } public class LayoutContainer:Control,INamingContainer { public LayoutContainer() {this.ID = "Page";} } |
LayoutContainer类为模板提供了一个容器。一般而言,在模板容器中加入一个定制ID总是不会错的,它将避免处理事件和进行页面调用时出现的问题。下面的UML图描述了分页控件的表现机制。
图五
创建模板的第一步是在aspx页面中定义布局:
<LAYOUT> <asp:ImageButton id="First" Runat="server" imageUrl="play2L_dis.gif" AlternateText="首页"></asp:ImageButton> <asp:ImageButton id="Previous" Runat="server" imageUrl="play2L.gif" AlternateText="上一页"></asp:ImageButton> <asp:ImageButton id="Next" Runat="server" imageUrl="play2.gif" AlternateText="下一页"></asp:ImageButton> <asp:ImageButton id="Last" Runat="server" imageUrl="play2_dis.gif" AlternateText="末页"></asp:ImageButton> <asp:Panel id="Pager" Runat="server"></asp:Panel> </LAYOUT> |
private void InstantiateTemplate() { _container = new LayoutContainer(); Layout.InstantiateIn(_container); First = (ImageButton)_container.FindControl("First"); Previous = (ImageButton)_container.FindControl("Previous"); Next = (ImageButton)_container.FindControl("Next"); Last = (ImageButton)_container.FindControl("Last"); Holder = (Panel)_container.FindControl("Pager"); this.First.Click += new System.Web.UI.ImageClickEventHandler(this.First_Click); this.Last.Click += new System.Web.UI.ImageClickEventHandler(this.Last_Click); this.Next.Click += new System.Web.UI.ImageClickEventHandler(this.Next_Click); this.Previous.Click += new System.Web.UI.ImageClickEventHandler(this.Previous_Click); } |
protected override void OnInit(EventArgs e) { _boundcontrol = Parent.FindControl(BindToControl); BoundControl.DataBinding += new EventHandler(BoundControl_DataBound); InstantiateTemplate(); Controls.Add(_container); base.OnInit(e); } |
public class DefaultPagerLayout:ITemplate { private ImageButton Next; private ImageButton First; private ImageButton Last; private ImageButton Previous; private Panel Pager; public DefaultPagerLayout() { Next = new ImageButton(); First = new ImageButton(); Last = new ImageButton(); Previous = new ImageButton(); Pager = new Panel(); Next.ID="Next"; Next.AlternateText="下一页";Next.ImageUrl="play2.gif"; First.ID="First"; First.AlternateText="首页";First.ImageUrl="play2L_dis.gif"; Last.ID = "Last"; Last.AlternateText ="末页";Last.ImageUrl="play2_dis.gif"; Previous.ID="Previous"; Previous.AlternateText="上一页";Previous.ImageUrl="play2L.gif"; Pager.ID="Pager"; } public void InstantiateIn(Control control) { control.Controls.Clear(); Table table = new Table(); table.BorderWidth = Unit.Pixel(0); table.CellSpacing= 1; table.CellPadding =0; TableRow row = new TableRow(); row.VerticalAlign = VerticalAlign.Top; table.Rows.Add(row); TableCell cell = new TableCell(); cell.HorizontalAlign = HorizontalAlign.Right; cell.VerticalAlign = VerticalAlign.Middle; cell.Controls.Add(First); cell.Controls.Add(Previous); row.Cells.Add(cell); cell = new TableCell(); cell.HorizontalAlign= HorizontalAlign.Center; cell.Controls.Add(Pager); row.Cells.Add(cell); cell = new TableCell(); cell.VerticalAlign = VerticalAlign.Middle; cell.Controls.Add(Next); cell.Controls.Add(Last); row.Cells.Add(cell); control.Controls.Add(table); } } |
[TemplateContainer(typeof(LayoutContainer))] public ITemplate Layout { get{return (_layout == null)? new DefaultPagerLayout():_layout;} set{_layout =value;} } |
public int CurrentPage { get { string cur = (string)ViewState["CurrentPage"]; return (cur == string.Empty || cur ==null)? 1 : int.Parse(cur); } set { ViewState["CurrentPage"] = value.ToString();} } public int PagersToShow { get{return _results;} set{_results = value;} } public int ResultsToShow { get{return _resultsperpage;} set{_resultsperpage = value;} } |
private int PagerSequence { get { return Convert.ToInt32 (Math.Ceiling((double)CurrentPage/(double)PagersToShow));} } private int NumberOfPagersToGenerate { get{return PagerSequence*PagersToShow;} } private int TotalPagesToShow { get{return Convert.ToInt32(Math.Ceiling((double)TotalResults/(double)_resultsperpage));} } public int TotalResults { get{return _builder.Adapter.TotalCount;} } |
public Style UnSelectedPagerStyle {get {return UnselectedPager;}} public Style SelectedPagerStyle {get {return SelectedPager;}} |
private void GeneratePagers(WebControl control) { control.Controls.Clear(); int pager = (PagerSequence-1)* PagersToShow +1; for (;pager<=NumberOfPagersToGenerate && pager<=TotalPagesToShow;pager++) { LinkButton link = new LinkButton(); link.Text = pager.ToString(); link.ID = pager.ToString(); link.Click += new EventHandler(this.Pager_Click); if (link.ID.Equals(CurrentPage.ToString())) link.MergeStyle(SelectedPagerStyle); else link.MergeStyle(UnSelectedPagerStyle); control.Controls.Add(link); control.Controls.Add(new LiteralControl(" ")); } } private void GeneratePagers() { GeneratePagers(Holder); } |
private void Pager_Click(object sender, System.EventArgs e) { LinkButton button = (LinkButton) sender; CurrentPage = int.Parse(button.ID); RaiseEvent(PageChanged, this,new PageChangedEventArgs(CurrentPage,PagedEventInvoker.Pager)); Update(); } private void Next_Click(object sender, System.Web.UI.ImageClickEventArgs e) { if (CurrentPage<TotalPagesToShow) CurrentPage++; RaiseEvent(PageChanged, this,new PageChangedEventArgs(CurrentPage,PagedEventInvoker.Next)); Update(); } private void Previous_Click(object sender, System.Web.UI.ImageClickEventArgs e) { if (CurrentPage > 1) CurrentPage--; RaiseEvent(PageChanged, this,new PageChangedEventArgs(CurrentPage,PagedEventInvoker.Previous)); Update(); } private void First_Click(object sender, System.Web.UI.ImageClickEventArgs e) { CurrentPage = 1; RaiseEvent(PageChanged, this,new PageChangedEventArgs(CurrentPage,PagedEventInvoker.First)); Update(); } private void Last_Click(object sender, System.Web.UI.ImageClickEventArgs e) { CurrentPage = TotalPagesToShow; RaiseEvent(PageChanged, this,new PageChangedEventArgs(CurrentPage,PagedEventInvoker.Last)); Update(); } |
private void Update() { if (!HasParentControlCalledDataBinding) return; ApplyDataSensitivityRules(); BindParent(); BoundControl.DataBind(); } |
public bool IsDataSensitive { get{return _isdatasensitive;} set{_isdatasensitive = value;} } private bool IsPagerVisible { get{return (TotalPagesToShow != 1) && IsDataSensitive;} } private bool IsPreviousVisible { get { return (!IsDataSensitive)? true: (CurrentPage != 1); } } private bool IsNextVisible { get { return (!IsDataSensitive)? true: (CurrentPage != TotalPagesToShow); } } private void ApplyDataSensitivityRules() { FirstButton.Visible = IsPreviousVisible; PreviousButton.Visible = IsPreviousVisible; LastButton.Visible = IsNextVisible; NextButton.Visible = IsNextVisible; if (IsPagerVisible) GeneratePagers(); } |
public delegate void PageDelegate(object sender,PageChangedEventArgs e); public enum PagedEventInvoker{Next,Previous,First,Last,Pager} public class PageChangedEventArgs:EventArgs { private int newpage; private Enum invoker; public PageChangedEventArgs(int newpage):base() { this.newpage = newpage; } public PageChangedEventArgs(int newpage,PagedEventInvoker invoker) { this.newpage = newpage; this.invoker = invoker; } public int NewPage {get{return newpage;}} public Enum EventInvoker{get{return invoker;}} } |
public event PageDelegate PageChanged; public event EventHandler DataUpdate; |
private void RaiseEvent(EventHandler e,object sender) { this.RaiseEvent(e,this,null); } private void RaiseEvent(EventHandler e,object sender, PageChangedEventArgs args) { if(e!=null) { e(sender,args); } } private void RaiseEvent(PageDelegate e,object sender) { this.RaiseEvent(e,this,null); } private void RaiseEvent(PageDelegate e,object sender, PageChangedEventArgs args) { if(e!=null) { e(sender,args); } } |
<asp:Repeater ID="repeater" Runat="server"> <ItemTemplate> 列1: <%# Convert.ToString(DataBinder.Eval(Container.DataItem,"Column1"))%> <br> 列2: <%# Convert.ToString(DataBinder.Eval(Container.DataItem,"Column2"))%> <br> 列3: <%# Convert.ToString(DataBinder.Eval(Container.DataItem,"Column3"))%> <br> <hr> </ItemTemplate> </asp:Repeater> <cc1:Pager id="pager" ResultsToShow="2" runat="server" BindToControl="repeater"> <SELECTEDPAGERSTYLE BackColor="Yellow" /> </cc1:Pager> |
<asp:DataGrid ID="Grid" Runat="server"></asp:DataGrid> <cc1:Pager id="PagerGrid" ResultsToShow="2" runat="server" BindToControl="Grid"> <SELECTEDPAGERSTYLE BackColor="Red"></SELECTEDPAGERSTYLE> <LAYOUT> <asp:ImageButton id="First" Runat="server" imageUrl="play2L_dis.gif" AlternateText="首页"></asp:ImageButton> <asp:ImageButton id="Previous" Runat="server" imageUrl="play2L.gif" AlternateText="上一页"></asp:ImageButton> <asp:ImageButton id="Next" Runat="server" imageUrl="play2.gif" AlternateText="下一页"></asp:ImageButton> <asp:ImageButton id="Last" Runat="server" imageUrl="play2_dis.gif" AlternateText="末页"></asp:ImageButton> <asp:Panel id="Pager" Runat="server"></asp:Panel> </LAYOUT> </cc1:Pager> |