您现在的位置是:网站首页> 编程资料编程资料

在ASP.NET 2.0中操作数据之二十四:分页和排序报表数据_自学过程_

2023-05-24 367人已围观

简介 在ASP.NET 2.0中操作数据之二十四:分页和排序报表数据_自学过程_

导言

  分页和排序是在WEB应用程序中展现数据常见的功能。比如,当我们在一个网上书店搜索ASP.NET书籍的时候,可能有几百本相关书籍,但是我们只希望每页显示10条有效记录。而且,我们还希望结果能根据标题、价格、页数和作者等等来进行排序。过去的23个教程中我们研究了如何建立各种报表,包括在界面上添加编辑和删除数据。但是我们没有研究如何对数据进行排序,对于分页我们也仅在研究DetailsView和FormView控件的时候看到。

Step 1:添加分页和排序页面

  在我们开始以前,首先让我们花些时间来添加包括本篇在内的最近四篇教程需要用到的页面。我们先在项目中新建一个称作PagingAndSorting的文件夹,接下来,为目录新增以下几个页面,并配置为使用Site.master母板页。

  Default.aspx
  SimplePagingSorting.aspx
  EfficientPaging.aspx
  SortParameter.aspx
  CustomSortingUI.aspx

//img.jbzj.com/file_images/article/201605/20160507155451140.png

图1:创建一个PagingAndSorting文件夹并且添加教程的页面

  下一步,让我们打开Default.aspx页面并且从UserControls中拖拽SectionLevelTutorialListing.ascx用户控件到设计界面。我们在母板页和站点导航教程中创建的这个用户控件遍历站点地图并且以符号列表形式把它们呈现出来。

//img.jbzj.com/file_images/article/201605/20160507155455141.png

图2:把SectionLevelTutorialListing.ascx用户控件加入Default.aspx

  要让显示我们将要创建的分页和排序教程,我们需要把他们加入站点地图中。打开Web.sitemap文件并且把下列代码加在“编辑、插入和删除”siteMapNode标记之后:

//img.jbzj.com/file_images/article/201605/20160507155455142.png

图3:更新站点地图使之包含新的页面

Step 2:在GridView中显示产品信息

  在我们真正实现分页和排序功能以前,让我们首先创建一个标准的,没有排序和分页功能的GridView来显示产品信息。其实这个工作我们已经做过很多次了,大家也应该很熟悉了。首先打开SimplePagingSorting.aspx页面并且从工具箱中拖一个GridView控件到设计器,配置它的ID属性为Products。接着,新建一个ObjectDataSource并使用ProductsBLL类的GetProducts()方法来获取所有的产品信息。

//img.jbzj.com/file_images/article/201605/20160507155455143.png

图4:使用GetProducts()方法获取所有产品信息

  因为这个报表是只读的,我们不需要把ObjectDataSource的Insert(), Update(), 和 Delete()方法映射到相应的ProductsBLL方法,因此,对于UPDATE, INSERT, 和 DELETE页我们从下拉列表中选取(None)。

//img.jbzj.com/file_images/article/201605/20160507155455144.png

图5:对于UPDATE, INSERT, 和DELETE页,我们从下拉列表中选择(None)选项

  下一步,让我们调整GridView的字段使之只显示产品名、供应商、分类、价格和状态。另外,我们可以尽管进行一些格式上的调整,比如配置价格的HeaderText以符合我们的货币形式。经过这些修改之后,我们的GridView代码应该和下面的差不多:

  图6显示了在浏览器中的效果,但是注意到,我们在一个屏幕上显示产品。显示了每个产品的名字、分类、供应商、价格和状态。

//img.jbzj.com/file_images/article/201605/20160507155456145.png

图6:每个产品都列出来了

Step 3:添加分页支持

  在一个屏幕上列出所有的产品对于用户查看数据非常不方便。要让结果更加可以管理,我们应该把数据分几个页面来呈现,并提供用户切换页面的功能。要实现这个只需要选择GridView智能标签前的Paging复选框即可(其实就是把AllowPaging属性设置为true)。

//img.jbzj.com/file_images/article/201605/20160507155456146.png

图7:点击Enable Paging复选框来支持分页

  开启分页以后就能限制每页显示的记录数量并且在GridView中增加了分页导航。默认如图7,是一系列页面的数字,运行用户快速从一个页面切换到另一个。其实我们并不陌生,在为过去的教程中我们已经为DetailsView个FormView控件提供过分页支持。

  DetailsView和FormView控件仅仅支持每一页显示一条记录。但是对于GridView,有一个PageSize 属性,能让我们配置每页显示的记录数(默认是设置为10)。

  GridView, DetailsView 和 FormView分页导航能使用下面的属性来配置:

  PagerStyle –指示分页导航的样式,能设置BackColor, ForeColor, CssClass, HorizontalAlign等等。
  PagerSettings –包含大量属性来自定义分页导航的功能;PageButtonCount代表显示在底部分页导航的最大页面数(默认为10);Mode 属性 代表分页操作的形式,能设置为:
  NextPrevious –显示下一页和上一页按钮,让用户一次朝后或者朝前翻一页
  NextPreviousFirstLast –除了下一页和上一页按钮外,还提供第一页和最后一页按钮,能让用户快速定位到首页或者末页数据
  Numeric –显示一系列页面数字,让用户直接点击数字切换到相应页面
  NumericFirstLast –除了页面数字以外还提供第一页和最后一页按钮,让用户能快速定位到首页或者末页数据,只有当没有显示首页或者末页数字时才显示按钮

  此外,GridView, DetailsView和 FormView还提供了PageIndex 和 PageCount属性来指示当前呈现的页面和页面总数。PageIndex属性从0开始编号,因此我们浏览第一页的时候就为0,而PageCount是从1开始编号的,因此PageIndex的范围在0和PageCount – 1之间。

  让我们再花一些时间来改进GridView分页导航的默认外观。首先,我们把分页导航居右并且设置为灰色背景色。我们不希望直接设置GridView的PagerStyle属性来实现,而是在Styles.css中创建一个称作PagerRowStyle 的CSS类,然后设置主题文件中PagerStyle的CssClass属性进行关联。首先打开Styles.css然后把下面CSS类定义加入文件:

 .PagerRowStyle { background-color: #ddd; text-align: right; } 

  接着,打开App_Themes 文件夹中DataWebControls 文件夹下的GridView.skin文件。我们在母板页和站点导航教程中提到过,Skin文件能为WEB控件指定一个默认的属性值。因此,我们设置PagerStyle的CssClass属性为PagerRowStyle。同样,让我们配置分页导航来显示5个页面数字(NumericFirstLast模式)。

分页用户体验

  我们为GridView启用了分页又在GridView.skin文件中配置了PagerStyle和PagerSettings,图8显示了浏览器中的呈现。注意到,每页只有10条记录,从分页导航上我们可以知道现在浏览的是第一页的数据。

//img.jbzj.com/file_images/article/201605/20160507155456147.png

图8:启用分页后每次只显示一部分记录

  当用户点击分页导航中某一个页面数字,页面回发并且呈现所请求的页面的数据。图9显示了点击最后一页的效果。注意到,最后一页只有一条记录,因为总共有81条记录,每页显示10条记录,8页80条,最后一页就剩下一条了。

//img.jbzj.com/file_images/article/201605/20160507155507148.png

图9:点击一个页面数字页面回发显示相应的一组记录

分页服务端工作方式

  当用户点击了分页导航中的按钮后,页面回发并开始下面服务端工作流:

  1.GridView(或者 DetailsView 或者 FormView) PageIndexChanging时间触发

  2.ObjectDataSource从BLL获取所有数据;GridView的PageIndex和PageSize属性用来检测哪些从BLL获取的数据需要显示在页面上

  3.GridView的PageIndexChanged事件触发

  在第二步中,ObjectDataSource从数据源获取所有数据。如果我们仅仅是把AllowPaging属性设置为true来进行分页的话,默认方式分页的WEB控件就会获取所有数据并从中挑选合适的以HTML呈现在浏览器上。出为数据库中的数据被BLL或者ObjectDataSource进行缓存,否则对于大数据量的系统或者大并发的应用程序来说这种工作方式是非常低效的。

  在下一个教程中,我们将会研究如何实现自定义分页。使用自定义分页我们就能指示ObjectDataSource精确地获取用户请求的那些数据。你能想象到,对于大数据的记录集,自定义分页能极大增加效率。

  注意:默认的分页方式不适合大数据集合系统和大流量的多并发情况,自定义分页能改善但是它确实需要很多修改来实现(而不是象默认分页方式那样仅仅选择一个复选框)。因此,默认的分页方式对于小型的,小流量的网站来说比较合适的,因为它的实现确实非常简单和快速。

  例如,如果我们确信数据库内不会多余100个产品。如果我们使用自定义分页的话,多花的那些时间和赢得的效率来说是不值得的。然而,如果我那把有几千几万的产品的话,不实现自定义分页的话就会极大地降低我们应用程序的性能。

Step 4:自定义分页体验

  数据Web控件提供了一些属性来增进分页体验。例如,PageCount属性指示总共有多少页面,PageIndex属性指示当前访问的页面,并能通过设置它来快速定位到某一页。为了演示如何使用这些属性来增进用户分页体验,让我们在页面上添加一个Label Web控件来显示用户当前访问的页面,添加一个DropDownList控件来让用户快速切换到某个页面。

  首先,在页面上添加一个Label Web控件,设置它的ID属性为PagingInformation,然后把Text清空。接着,为GridView的DataBound事件创建一个事件处理器,然后添加如下代码:

 protected void Products_DataBound(object sender, EventArgs e) { PagingInformation.Text = string.Format("You are viewing page {0} of {1}...", Products.PageIndex + 1, Products.PageCount); }

  这个事件处理器指定了PagingInformation标签的Text属性为用户当前访问的页面-Products.PageIndex + 1(我们在这里+1因为Products.PageIndex属性是从0开始编号的)和页面总数(Products.PageCount)。我在DataBound事件处理器而不是PageIndexChanged事件处理器中进行这个操作的原因在于,DataBound事件在每次数据绑定到GridView的时候都会触发,而PageIndexChanged仅仅在页面切换的时候触发。当GridView绑定首页的时候PageIndexChanging还没有触发(而DataBound事件能触发)。

  好了,用户现在能看到他们正在访问的页面和页面总数。

//img.jbzj.com/file_images/article/201605/20160507155507149.png

图10:显示当前页和页面总数

  除了Label控件,我们再来添加一个DropDownList控件来显示所有的页数并选定当前浏览的页面。这样,用户就能选择DropDownList中的某一选项来快速切换到新的页面索引,我们首先拖一个DropDownList到设计器,然后设置ID属性为PageList然后选择启用AutoPostBack。

  接着,在DataBound中加如下代码:

 // Clear out all of the items in the DropDownList PageList.Items.Clear(); // Add a ListItem for each page for (int i = 0; i < Products.PageCount; i++) { // Add the new ListItem ListItem pageListItem = new ListItem(string.Concat("Page ", i + 1), i.ToString()); PageList.Items.Add(pageListItem); // select the current item, if needed if (i == Products.PageIndex) pageListItem.Selected = true; }

  这段代码首先清楚了PageList DropDownList中所有的项。既然我们不能预料到页面数会不会改变,看上去这个操作可能有些多余。但是其它用户可能会并发使用系统来从Products表中添加或者移除记录。这样的插

-六神源码网