DataList とリピーターのデータ ページング

はじめに

ページングと並べ替えは、データを表示するときによく使用される機能です。たとえば、オンライン書店で ASP.NET に関する書籍を検索すると、何百、何千もの結果が表示されることがありますが、各ページにリストされるのは 10 件のみです。そして結果は、タイトル（書籍名）、価格（価格）、ページ数（ページ数）、著者名（著者）などで並べ替えることができます。 「レポート データのページネーションと並べ替え」で説明したように、GridView、DetailsView、FormView にはすべてページング機能が組み込まれており、チェックボックスをオンにするだけで有効にできます。 GridView は組み込みの並べ替えもサポートしています。

残念ながら、DataListもRepeaterも組み込みのページング機能やソート機能を提供していません。この章では、DataList と Replyer にページングと並べ替えのサポートを追加する方法を学びます。ページング インターフェイスを作成し、正しいページ レコードを表示し、ポストバック プロセス中に閲覧したページを記録する必要があります。これには、GridView、DetailsView、FormView よりも時間がかかり、より多くのコードを記述しますが、スケーラビリティも向上します。

注: この章ではページングに焦点を当てており、次の章では並べ替えについて学習します。

ステップ 1: ページングと並べ替えのチュートリアル ページを追加する

まず、この章と次の章に必要なページを追加します。 PagingSortingDataListRepeater というフォルダーを作成し、次の 5 ページを追加します。すべてのページで Site.master を選択することを忘れないでください。

Default.aspx
Paging.aspx
Sorting.aspx
SortingWithDefaultPaging.aspx
SortingWithCustomPaging.aspx

次に、Default.aspx ページを開き、UserControls フォルダーから 1 つをドラッグします。 alListing.ascxユーザーコントロールが登場します。このユーザー コントロールを何度も使用しました。 「マスター ページとサイト ナビゲーション」を参照してください。

図 2: ユーザー コントロールの追加

並べ替えとページングのチュートリアルをリストするには、それらをサイト マップに追加する必要があります。 Web.sitemap ファイルを開き、「Editing and Deleting with the DataList」() ノードの後に​​次のマークアップ言語を追加します:

<siteMapNode
 url="~/PagingSortingDataListRepeater/Default.aspx"
 title="Paging and Sorting with the DataList and Repeater"
 description="Paging and Sorting the Data in the DataList and Repeater Controls">
 <siteMapNode
  url="~/PagingSortingDataListRepeater/Paging.aspx"
  title="Paging"
  description="Learn how to page through the data shown
      in the DataList and Repeater controls." />
 <siteMapNode
  url="~/PagingSortingDataListRepeater/Sorting.aspx"
  title="Sorting"
  description="Sort the data displayed in a DataList or
      Repeater control." />
 <siteMapNode
  url="~/PagingSortingDataListRepeater/SortingWithDefaultPaging.aspx"
  title="Sorting with Default Paging"
  description="Create a DataList or Repeater control that is paged using
      default paging and can be sorted." />
 <siteMapNode
  url="~/PagingSortingDataListRepeater/SortingWithCustomPaging.aspx"
  title="Sorting with Custom Paging"
  description="Learn how to sort the data displayed in a DataList or
      Repeater control that uses custom paging." />
</siteMapNode>

図 3: サイト マップを更新する

ページングを確認する

前に学習した方法を学習するGridView、DetailsView、FormView を使用してページネーションを行うには。これら 3 つのコントロールはすべて、デフォルト ページングと呼ばれる機能を提供します。スマート ラベルから [ページングを有効にする] をチェックするだけです。デフォルトのページングを使用する場合、最初のページであろうと別のページであろうと、データが要求されるたびに、GridView、DetailsView、および FormView はすべてのデータを再要求します。特定のページのデータは、要求されたページ インデックスとページごとに表示されるレコード数に基づいて表示されますが、他のデータ (つまり、要求されたが表示されなかったデータ) は無視されます。デフォルトのページングについては、「レポート データのページングと並べ替え」で詳しく説明しました。

デフォルトのページングは​​毎回全てのデータを要求するため、データ量が多い場合には不向きです。たとえば、1 ページに 10 項目のデータ、合計 50,000 項目のデータが表示されると想像してください。ユーザーがページを表示するたびに、50,000 項目のデータがデータベースに要求され、そのうち 10 項目のみが表示されます。

カスタムページングは​​毎回要求されたデータのみを返すため、デフォルトページングのパフォーマンスの問題は解決されます。カスタム ページングを使用する場合は、正しいレコードを返す効果的な SQL ステートメントを作成する必要があります。ここでは、SQL Server2005 の ROW_NUMBER() キーワードを使用してそのようなステートメントを作成する方法を学びました。

DataList または Replyer でデフォルトのページングを使用するには、PagesDataSource クラスを使用して、ProductsDataTable でページネーションが必要なコンテンツをラップします。 PagedDataSource クラスには、任意の列挙型オブジェクトに割り当てることができる DataSource プロパティ、PageSize (ページごとに表示されるレコードの数)、および CurrentPageIndex (現在のページのインデックス) があります。これらのプロパティを設定すると、PagesDataSource を任意のデータ コントロールのデータ ソースとして使用できるようになります。 PagedDataSource は、PageSize と CurrentPageIndex に基づいて適切なレコードを返します。図 4 は、PagesDataSource クラスの機能を示しています。

図 4: PagedDataSource は、ページング可能なインターフェイスを使用して列挙オブジェクトをラップします

PagesDataSource オブジェクトは、BLL 内で直接作成および構成でき、ObjectDataSource を通じて DataList または Replyer にバインドできます。または、ASP.NET ページの背後のコードでこれを直接行うこともできます。後者の方法を使用する場合は、ObjectDataSource を使用できないため、ページング データをプログラムで直接 DataList または Replyer にバインドする必要があります。

　　PagedDataSource对象也有支持自定义分页的属性。但是在这里我们将不讨论它，因为我们在ProductsBLL类里已经有一个可以精确的返回需要显示的记录的方法。本章我们将学习如何通过在ProductsBLL类里添加一个返回合适的PagedDataSource对象的方法来实现默认分页。下章我们再讨论自定义分页。

第二步: 在BLL里添加默认的分页方法

　　ProductsBLL类里现在有一个返回所有product的方法–GetProducts()–和一个返回特定子集的方法–GetProductsPaged(startRowIndex,maximumRows)。当使用默认分页时，GridView, DetailsView, FormView 使用GetProducts()方法获取所有的product，但是在内部使用PagedDataSource来显示正确的记录子集。在DataList和Repeater里实现同样的功能，我们可以在BLL里创建一个模拟这种行为的方法。

在ProductsBLL里添加一个带两个整型参数的方法，名为GetProductsAsPagedDataSource：

pageIndex – 显示的页的索引，从0开始
pageSize – 每页显示的记录数.

　　GetProductsAsPagedDataSource首先从GetProducts()里获取所有的记录。然后创建一个PagedDataSource对象，将CurrentPageIndex和PageSize属性设置为传进来的参数，pageIndex和pageSize。方法的最后返回这个配置过的PagedDataSource。

[System.ComponentModel.DataObjectMethodAttribute
 (System.ComponentModel.DataObjectMethodType.Select, false)]
public PagedDataSource GetProductsAsPagedDataSource(int pageIndex, int pageSize)
{
 // Get ALL of the products
 Northwind.ProductsDataTable products = GetProducts();
 // Limit the results through a PagedDataSource
 PagedDataSource pagedData = new PagedDataSource();
 pagedData.DataSource = products.Rows;
 pagedData.AllowPaging = true;
 pagedData.CurrentPageIndex = pageIndex;
 pagedData.PageSize = pageSize;
 return pagedData;
}

第三步: 在DataList里使用默认分页显示Product

　　完成GetProductsAsPagedDataSource方法后，我们现在来创建一个提供默认分页的DataList或Repeater。打开PagingSortingDataListRepeater文件夹下的Paging.aspx页，拖一个DataList进来，将ID设为ProductsDefaultPaging。通过智能标签创建一个名为ProductsDefaultPagingDataSource的ObjectDataSource并用GetProductsAsPagedDataSource方法配置它。

图 5: 创建并配置ObjectDataSource

在UPDATE, INSERT, DELETE 标签的下拉列表里都选择“(None)”.

图 6: 在UPDATE, INSERT, DELETE 标签的下拉里选择“(None)”

　　因为GetProductsAsPagedDataSource方法需要两个参数，因此向导会提示我们选择参数源。page index和page size的值必须在postback过程中记下来。它们可以存在view state，querystring，session里或用其它技术来记录。本章我们使用querystring。

　　分别使用querystring字段“pageIndex” 和“pageSize”来配置pageIndex和pageSize。见图7。由于用户第一次浏览页的时候没有querystring，因此还需要设置这两个参数的默认值。将pageIndex的默认值设为0（表示显示第一页数据），将pageSize的默认值设为4。

图 7: 配置参数

　　配置完ObjectDataSource后，Visual Studio自动为DataList创建一个ItemTemplate。修改它让它只显示product的name，category和supplier。将DataList的RepeatColumns属性设为2，Width设为“100%”, ItemStyle的Width设为 “50%”. 这样的设置会为两列提供相同的间距。完成这些后DataList和ObjectDataSource的标记语言看起来应该如下：

<asp:DataList ID="ProductsDefaultPaging" runat="server" Width="100%"
 DataKeyField="ProductID" DataSourceID="ProductsDefaultPagingDataSource"
 RepeatColumns="2" EnableViewState="False">
 <ItemTemplate>
  <h4><asp:Label ID="ProductNameLabel" runat="server"
   Text=&#39;<%# Eval("ProductName") %>&#39;></asp:Label></h4>
  Category:
  <asp:Label ID="CategoryNameLabel" runat="server"
   Text=&#39;<%# Eval("CategoryName") %>&#39;></asp:Label><br />
  Supplier:
  <asp:Label ID="SupplierNameLabel" runat="server"
   Text=&#39;<%# Eval("SupplierName") %>&#39;></asp:Label><br />
  <br />
  <br />
 </ItemTemplate>
 <ItemStyle Width="50%" />
</asp:DataList>
<asp:ObjectDataSource ID="ProductsDefaultPagingDataSource" runat="server"
 OldValuesParameterFormatString="original_{0}" TypeName="ProductsBLL"
 SelectMethod="GetProductsAsPagedDataSource">
 <SelectParameters>
  <asp:QueryStringParameter DefaultValue="0" Name="pageIndex"
    QueryStringField="pageIndex" Type="Int32" />
  <asp:QueryStringParameter DefaultValue="4" Name="pageSize"
    QueryStringField="pageSize" Type="Int32" />
 </SelectParameters>
</asp:ObjectDataSource>

注意：由于这里我们不实现任何更新或删除的功能，你可以禁用DataList的view state来减少页面的大小。

　　第一次浏览页的时候，querystring里没有提供pageIndex 和pageSize的值，因此将使用默认的0和4。见图8。DataList将显示4条product记录。

图 8: 显示4条Product

　　由于还没有分页的界面，因此用户现在还不能直接导航到第二页。我们将在第四步里创建分页界面。现在我们只能直接在querystring里指定分页的参数来进行分页。例如，我们可以将地址从Paging.aspx改为Paging.aspx?pageIndex=2，然后回车，来浏览第二页。这样就可以看到第二页的数据了，见图9。

图 9: 显示第二页数据

第四步: 创建分页界面

有很多不同的完成分页界面的方法。GridView, DetailsView, FormView 提供了4种不同的界面：

Next, Previous（后一页，前一页） – 用户可以浏览上一页或下一页.
Next, Previous, First（第一页）, Last （最后一页）– 除了上面的功能，这个还包含第一页和最后一页。
Numeric （数字）–在分页界面上列出页数，用户可以随意的选择一个页 .
Numeric, First, Last – 在上一个功能的基础上增加了第一页和最后一页.

　　对DataList 和Repeater而言，我们需要决定它的分页界面并实现它。这其中包含了需要创建web控件和当特定页的button被点时显示请求的页。另外某些分页界面的控件可能需要禁用。例如，当使用Next, Previous, First, Last这个模式来显示时，如果浏览第一页数据，那么第一页和前一页的button应该被禁用。

　　本章我们使用 Next, Previous, First, Last界面。添加4个button，并将ID分别设为FirstPage,PrevPage,NextPage和LastPage。将Text设为“”, “Last >>”.

<asp:Button runat="server" ID="FirstPage" Text="<< First" />
<asp:Button runat="server" ID="PrevPage" Text="< Prev" />
<asp:Button runat="server" ID="NextPage" Text="Next >" />
<asp:Button runat="server" ID="LastPage" Text="Last >>" />

然后为每个button创建一个Click事件处理。呆会我们将添加代码来显示请求的页。

记下分页的总记录数

　　不管选择哪种分页界面，我们都需要计算和记下分页的总记录数。总的行数（和page size）来决定总的页数，它决定了那些分页界面的控件需要增加或启用。在我们创建的Next, Previous, First, Last 界面里，page count（页数）在两种情况下需要被用到：

　　判断我们是否在浏览最后一页，这种情况下Next 和Last buttons 需要禁用。
　　如果用户点了Last button我们需要将它转到最后一页，它的索引等于page count减1。

　　page count通过总行数除以page size（页数）来计算得到。例如我们要分页79条记录，每页显示4条，那么page count为20（79/4）。如果我们使用数字分页界面，就可以通过这个信息来决定要显示多少个数字页的button。如果分页界面只包含Next 和Last buttons，可以通过page count来什么时候禁用Next 和Last buttons。

　　如果分页界面包含Last button（最后一页），我们需要在postback过程中记下分页的总记录数，这样在点Last button的时候我们可以获得最后一页的索引。为了方便实现这个，我们在ASP.NET页的后台代码里创建一个TotalRowCount属性来将这个值保存到view state里。

private int TotalRowCount
{
 get
 {
  object o = ViewState["TotalRowCount"];
  if (o == null)
   return -1;
  else
   return (int)o;
 }
 set
 {
  ViewState["TotalRowCount"] = value;
 }
}

　　除了TotalRowCount外，还需要为page index，page size和page count创建页面级的只读属性来方便读取。

private int PageIndex
{
 get
 {
  if (!string.IsNullOrEmpty(Request.QueryString["pageIndex"]))
   return Convert.ToInt32(Request.QueryString["pageIndex"]);
  else
   return 0;
 }
}
private int PageSize
{
 get
 {
  if (!string.IsNullOrEmpty(Request.QueryString["pageSize"]))
   return Convert.ToInt32(Request.QueryString["pageSize"]);
  else
   return 4;
 }
}
private int PageCount
{
 get
 {
  if (TotalRowCount <= 0 || PageSize <= 0)
   return 1;
  else
   return ((TotalRowCount + PageSize) - 1) / PageSize;
 }
}

  

获取分页的总记录数

　　从ObjectDataSource的Select()方法返回一个PagedDataSource对象包含所有的product记录，即使只有一部分会在DataList里显示。PagedDataSource的Count property 返回将在DataList里显示的项的数目。DataSourceCount property 返回PagedDataSource里的所有项的的总数目。因此我们需要将ASP.NET页的TotalRowCount属性赋值为PagedDataSource的DataSourceCount。

　　我们为ObjectDataSource的Selectd事件创建一个event handler来完成这些。在Selectd的event handler里我们获取ObjectDataSource的Select()方法的返回值–在这种情况下是PagedDataSource。

protected void ProductsDefaultPagingDataSource_Selected
 (object sender, ObjectDataSourceStatusEventArgs e)
{
 // Reference the PagedDataSource bound to the DataList
 PagedDataSource pagedData = (PagedDataSource)e.ReturnValue;
 // Remember the total number of records being paged through
 // across postbacks
 TotalRowCount = pagedData.DataSourceCount;
}

显示请求的页的数据

　　当用户点分页界面上的button时，我们需要显示请求的页的数据。由于分页的参数在querystring里指定，因此使用Response.Redirect(url)来让用户重新请求带合适分页参数的Paging.aspx页。例如，显示第二页的数据，我们将用户重定向到Paging.aspx?pageIndex=1。

　　创建一个RedirectUser(sendUserToPageIndex)方法来重定向用户到Paging.aspx?pageIndex=sendUserToPageIndex。然后在四个按钮的Click事件处理里调用这个方法。在FirstPageClick里调用RedirectUser(0)，在PrevPageClick里调用RedirectUser（PageIndex-1）。

protected void FirstPage_Click(object sender, EventArgs e)
{
 // Send the user to the first page
 RedirectUser(0);
}
protected void PrevPage_Click(object sender, EventArgs e)
{
 // Send the user to the previous page
 RedirectUser(PageIndex - 1);
}
protected void NextPage_Click(object sender, EventArgs e)
{
 // Send the user to the next page
 RedirectUser(PageIndex + 1);
}
protected void LastPage_Click(object sender, EventArgs e)
{
 // Send the user to the last page
 RedirectUser(PageCount - 1);
}
private void RedirectUser(int sendUserToPageIndex)
{
 // Send the user to the requested page
 Response.Redirect(string.Format("Paging.aspx?pageIndex={0}&pageSize={1}",
  sendUserToPageIndex, PageSize));
}

　　完成Click事件处理后，DataList的记录现在可以通过button来分页了，你可以测试一下。

禁用分页控件

　　现在无论浏览哪页四个按钮都是可用的。然而我们在浏览第一页时需要禁用 First 和Previous buttons ，在浏览最后一页时需要禁用Next 和Last buttons。通过ObjectDataSource的Select()方法返回的PagedDataSource对象有几个属性– IsFirstPage 和 IsLastPage –通过它们可以判断用户浏览的是否是第一或最后一页数据。添加下面的代码到ObjectDataSource的Selected事件处理里：

// Configure the paging interface based on the data in the PagedDataSource
FirstPage.Enabled = !pagedData.IsFirstPage;
PrevPage.Enabled = !pagedData.IsFirstPage;
NextPage.Enabled = !pagedData.IsLastPage;
LastPage.Enabled = !pagedData.IsLastPage;

　　添加完后，当浏览第一页时，First 和Previous buttons 将被禁用。当浏览最后一页时，Next 和  Last buttons 将被禁用。

　　我们最后来实现在分页界面里通知用户他们当前是浏览的哪页和一共有多少页。添加一个Label控件并将ID设为CurrentPageNumber。在ObjectDataSource的Selected事件处理中设置它的Text属性，让它显示当前浏览的页（PageIndex+1）和总页数（PageCount）。

// Display the current page being viewed...
CurrentPageNumber.Text = string.Format("You are viewing page {0} of {1}...",
 PageIndex + 1, PageCount);

　　图10是第一次浏览Paging.aspx页的样子。由于querystring是空的，因此DataList默认显示最开始的4条product。First 和Previous buttons 被禁用。点Next 会显示下面的4条记录（见图11），而First 和Previous buttons 同时被启用了。

图 10: 第一页数据

图 11: 第二页数据

　　注意：分页界面可以进一步改善，比如增加允许用户来指定每页显示多少记录。例如添加一个DropDownList列出page size的选项，比如5, 10, 25, 50, 和ALL。用户选择了page size后会重定向到Paging.aspx?pageIndex=0&pageSize=selectedPageSize。我将这个作为练习留给读者自己完成。

使用自定义分页

　　DataList使用没有效率的默认分页技术。当大数据量时，我们需要使用自定义分页。虽然实现的细节有所不同，但是分页里的概念和默认分页是一样的。默认分页时，使用ProductsBLL类的GetProductsPaged方法（而不是GetProductsAsPagedDataSource）。正如在大数据量时提高分页的效率 里讨论的那样，GetProductsPaged需要传入开始行的索引和行的最大数目。这些参数可以通过默认分页里使用的querystring里的pageIndex和pageSize参数来保存。

　　由于自定义分页里没有PagedDataSource，所以需要其它技术来决定总记录数和判断我们是否显示第一或最后一页数据。ProductsBLL类的TotalNumberOfProducts()方法返回roduct的总记录数。而为了判断是否浏览的是第一页数据，我们需要检查开始行的索引–如果是0，则表示在浏览第一页。如果开始行的索引加上最大的行数大于或等于总记录数则表示在最后一页.我们将在下章详细的讨论如何实现自定义分页。

总结

　　DataList和Repeater都没有提供象GridView, DetailsView, FormView 那样的分页的支持，这样的功能需要我们来实现。最简单的实现方法是使用默认分页，将所有的product都包装到PagedDataSource里，然后绑定PagedDataSource到DataList或Repeater。本章我们在ProductsBLL类里添加GetProductsAsPagedDataSource方法，它返回PagedDataSource。ProductsBLL类已经包含了自定义分页需要的方法– GetProductsPaged和TotalNumberOfProducts。

　　不管是自定义方法里获取精确的记录还是默认方法里获取所有记录，我们都需要手动添加分页界面。本章我们创建的是包含4个button控件的Next, Previous, First, Last interface 。当然还添加了一个显示当前页和总页数的Label控件。

更多DataList とリピーターのデータ ページング相关文章请关注PHP中文网！