次の方法で共有

レポート データのページングと並べ替え (C#)

  • [アーティクル]

作成者: Scott Mitchell

PDF のダウンロード

オンライン アプリケーションでデータを表示する場合、ページングと並べ替えは 2 つの非常に一般的な機能です。 このチュートリアルでは、まず並べ替えとページングをレポートに追加する方法について説明します。今後のチュートリアルでは、これを基に構築します。

はじめに

オンライン アプリケーションでデータを表示する場合、ページングと並べ替えは 2 つの非常に一般的な機能です。 たとえば、オンライン書店で ASP.NET に関する本を検索する場合、対象となる本は何百冊もある可能性があるとしても、検索結果リストを示すレポートには、1 ページあたり 10 件の一致データしか表示されません。 さらに、結果はタイトル、価格、ページ数、作成者名などを基準に並べ替えることができます。 過去 23 回のチュートリアルでは、データの追加、編集、削除を許可するインターフェイスなど、さまざまなレポートの作成方法を調べましたが、データを並べ替える方法については説明しておらず、ページングの例も DetailsView コントロールと FormView コントロールを使用したもののみでした。

このチュートリアルでは、並べ替えとページングをレポートに追加する方法について説明します。これは、いくつかのチェックボックスをチェックするだけで実現できます。 残念ながら、この単純な実装にも欠点があり、並べ替えインターフェイスには不十分な点があり、ページング ルーチンは大きな結果セットを効率的にページングするようには設計されていません。 今後のチュートリアルでは、すぐに使用できるページングと並べ替えのソリューションの制限を克服する方法について探る予定です。

手順 1: ページングと並べ替えのチュートリアル Web ページを追加する

このチュートリアルを開始する前に、まず、このチュートリアルと次の 3 つで必要になる ASP.NET ページを追加しましょう。 まず、プロジェクトに PagingAndSorting という名前の新しいフォルダーを作成します。 次に、以下の 5 つの ASP.NET ページをこのフォルダーに追加し、そのすべてでマスター ページ Site.master を使用するように構成します。

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

Create a PagingAndSorting Folder and Add the Tutorial ASP.NET Pages

図 1: PagingAndSorting フォルダーの作成とチュートリアル ASP.NET ページの追加

次に、Default.aspx ページを開き、UserControls フォルダーの SectionLevelTutorialListing.ascx ユーザー コントロールをデザイン画面にドラッグします。 「マスター ページとサイト ナビゲーション」のチュートリアルで作成したこのユーザー コントロールは、サイト マップを列挙し、それらのチュートリアルを現在のセクションに箇条書きリストで表示します。

Add the SectionLevelTutorialListing.ascx User Control to Default.aspx

図 2: Default.aspx への SectionLevelTutorialListing.ascx ユーザー コントロールの追加

作成するページングと並べ替えのチュートリアルを箇条書きに表示するには、サイト マップに追加する必要があります。 Web.sitemap ファイルを開き、編集、挿入、削除のサイト マップ ノード マークアップの後に、次のマークアップを追加します。

<siteMapNode title="Paging and Sorting" url="~/PagingAndSorting/Default.aspx"
    description="Samples of Reports that Provide Paging and Sorting Capabilities">
    <siteMapNode url="~/PagingAndSorting/SimplePagingSorting.aspx"
        title="Simple Paging & Sorting Examples"
        description="Examines how to add simple paging and sorting support." />
    <siteMapNode url="~/PagingAndSorting/EfficientPaging.aspx"
        title="Efficiently Paging Through Large Result Sets"
        description="Learn how to efficiently page through large result sets." />
    <siteMapNode url="~/PagingAndSorting/SortParameter.aspx"
        title="Sorting Data at the BLL or DAL"
        description="Illustrates how to perform sorting logic in the Business Logic
        Layer or Data Access Layer." />
    <siteMapNode url="~/PagingAndSorting/CustomSortingUI.aspx"
        title="Customizing the Sorting User Interface"
        description="Learn how to customize and improve the sorting user interface." />
</siteMapNode>

Update the Site Map to Include the New ASP.NET Pages

図 3: サイト マップを更新して新しい ASP.NET ページを含める

手順 2: GridView で製品情報を表示する

ページングと並べ替えの機能を実際に実装する前に、まず、製品情報の一覧を表示する標準の並べ替え不可、ページング不可の GridView を作成しましょう。 これは、このチュートリアル シリーズを通して何度も実行してきたタスクであるため、これらの手順はおなじみでしょう。 まず SimplePagingSorting.aspx ページを開き、GridView コントロールをツールボックスからデザイナーにドラッグし、その ID プロパティを Products に設定します。 次に、ProductsBLL クラスの GetProducts() メソッドを使用してすべての製品情報を返す、新しい ObjectDataSource を作成します。

Retrieve Information About All of the Products Using the GetProducts() Method

図 4: GetProducts() メソッドを使用してすべての製品に関する情報を取得する

このレポートは読み取り専用のレポートであるため、ObjectDataSource の Insert()、Update()、または Delete() メソッドを対応する ProductsBLL メソッドにマップする必要はありません。そのため、[UPDATE]、[INSERT]、[DELETE] タブのドロップダウン リストから [(なし)] を選択します。

Choose the (None) Option in the Drop-Down List in the UPDATE, INSERT, and DELETE Tabs

図 5: [UPDATE]、[INSERT]、[DELETE] タブのドロップダウン リストでの [(なし)] オプションの選択

次に、GridView のフィールドをカスタマイズして、製品名、仕入先、カテゴリ、価格、生産中止の状態のみが表示されるようにします。 さらに、HeaderText プロパティの調整や価格の通貨としての書式設定など、フィールド レベルの書式設定を自由に変更できます。 これらの変更後、GridView の宣言型マークアップは次のようになります。

<asp:GridView ID="Products" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
            SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
            ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
            ReadOnly="True" SortExpression="SupplierName" />
        <asp:BoundField DataField="UnitPrice" HeaderText="Price"
            SortExpression="UnitPrice" DataFormatString="{0:C}"
            HtmlEncode="False" />
        <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued"
            SortExpression="Discontinued" />
    </Columns>
</asp:GridView>

図 6 は、ブラウザーから見たときのこれまでの進行状況を示しています。 このページには、すべての製品が 1 つの画面に一覧表示され、各製品の名前、カテゴリ、仕入先、価格、生産中止の状態が表示されています。

Each of the Products are Listed

図 6: 製品ごとの一覧が表示されている (クリックするとフルサイズの画像が表示されます)

手順 3: ページングのサポートを追加する

"すべて" の製品を 1 つの画面に一覧表示すると、データを確認しようとするユーザーにとって情報過多になる可能性があります。 結果を管理しやすくするために、データをより小さなページに分割し、ユーザーが一度に 1 ページずつデータを確認できるようにします。 これを実現するには、GridView のスマート タグから [ページングを有効にする] チェックボックスをオンにするだけです (これにより、GridView の AllowPaging プロパティが true に設定されます)。

Check the Enable Paging Checkbox to Add Paging Support

図 7: ページングの追加サポートのために [ページングを有効にする] チェックボックスをオンにする (クリックするとフルサイズの画像が表示されます)

ページングを有効にすると、ページごとに表示されるレコードの数が制限され、GridView に "ページング インターフェイス" が追加されます。 図 7 に示す既定のページング インターフェイスは、一連のページ番号であり、ユーザーはデータのあるページから別のページにすばやく移動できます。 このページング インターフェイスは、過去のチュートリアルで DetailsView コントロールと FormView コントロールにページング サポートを追加したときに見ているので見覚えがあるでしょう。

DetailsView コントロールも FormView コントロールも、ページごとに 1 つのレコードのみを表示します。 しかし、GridView はその PageSize プロパティを参照して、ページごとに表示するレコードの数を決定します (このプロパティの既定値は 10 です)。

この GridView、DetailsView、FormView のページング インターフェイスは、次のプロパティを使用してカスタマイズできます。

  • PagerStyle は、ページング インターフェイスのスタイル情報を示し、BackColor、ForeColor、CssClass、HorizontalAlign などの設定を指定できます。

  • PagerSettings には、ページング インターフェイスの機能をカスタマイズできるプロパティが多く含まれています。PageButtonCount は、ページング インターフェイスに表示される数値のページ番号の最大数を示します (既定値は 10 です)。Mode プロパティは、ページング インターフェイスの動作方法を示し、次のように設定できます。

    • NextPrevious を使用すると、[次へ] ボタンと [前へ] ボタンが表示され、ユーザーは一度に 1 ページずつ進んだり、戻ったりすることができます
    • NextPreviousFirstLast [次へ] ボタンと [前へ] ボタンに加えて、[最初] ボタンと [最後] ボタンも含まれるため、ユーザーはデータの最初または最後のページにすばやく移動できます
    • Numeric を使用すると、一連のページ番号が表示され、ユーザーは任意のページにすぐにジャンプできます
    • NumericFirstLast ページ番号に加えて、[最初] ボタンと [最後] ボタンが含まれており、ユーザーはデータの最初または最後のページにすばやく移動できます。[最初] または [最後] ボタンは、すべての数値のページ番号が収まらない場合にのみ表示されます

さらに、GridView、DetailsView、FormView にはすべて、表示されている現在のページとデータの合計ページ数を示す PageIndex と PageCount プロパティがそれぞれ用意されています。 PageIndex プロパティのインデックスは 0 から始まります。つまり、データの最初のページを表示すると、PageIndex は 0 になります。 一方、PageCount は 1 からカウントを開始します。つまり、PageIndex は 0 から PageCount - 1 の間の値に限定されます。

少し時間を取って、GridView のページング インターフェイスの既定の外観を改善しましょう。 具体的には、ページング インターフェイスを右揃えにし、薄い灰色の背景にします。 GridView の PagerStyle プロパティを使用してこれらのプロパティを直接設定するのではなく、PagerRowStyle という名前の Styles.css で CSS クラスを作成し、Theme を使って PagerStyle の CssClass プロパティを割り当てます。 まず、Styles.css を開いて次の CSS クラス定義を追加します。

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

次に、App_Themes フォルダー内の DataWebControls フォルダーにある GridView.skin ファイルを開きます。 「マスター ページとサイト ナビゲーション」のチュートリアルで説明したように、スキン ファイルを使用して、Web コントロールに既定のプロパティ値を指定できます。 したがって、PagerStyle の CssClass プロパティを PagerRowStyle に設定して、既存の設定を含むように拡張します。 また、NumericFirstLast ページング インターフェイスを使用して、最大 5 つの数値ページ ボタンを表示するようにページング インターフェイスも構成しましょう。

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedRowStyle CssClass="SelectedRowStyle" />
   <PagerStyle CssClass="PagerRowStyle" />
   <PagerSettings Mode="NumericFirstLast" PageButtonCount="5" />
</asp:GridView>

ページングのユーザー エクスペリエンス

図 8 は、GridView の [ページングを有効にする] チェックボックスがオンにされ、GridView.skin ファイルを介して PagerStyle と PagerSettings 構成が行われた後にブラウザーからアクセスしたときの Web ページを示しています。 10 個のレコードのみが表示され、ページング インターフェイスはデータの最初のページを表示していることを示します。

With Paging Enabled, Only a Subset of the Records are Displayed at a Time

図 8: ページングが有効にされ、一度にレコードの 1 つのサブセットのみが表示される (クリックするとフルサイズの画像が表示されます)

ユーザーがページング インターフェイスのページ番号の 1 つをクリックすると、ポストバックが発生し、ページが再読み込みされ、要求されたページのレコードが表示されます。 図 9 は、データの最終ページを表示する選択をした後の結果を示しています。 最後のページにはレコードが 1 つだけであることに注意してください。これは、合計で 81 個のレコードがあり、その結果、1 ページあたり 10 個のレコードの 8 ページと、1 つのレコードを含む 1 ページになるためです。

Clicking On a Page Number Causes a Postback and Shows the Appropriate Subset of Records

図 9: ページ番号をクリックするとポストバックが発生し、レコードの適切なサブセットが表示される (クリックするとフルサイズの画像が表示されます)

ページングのサーバー側のワークフロー

エンド ユーザーがページング インターフェイスのボタンをクリックすると、ポストバックが発生し、次のサーバー側のワークフローが開始されます。

  1. GridView (または DetailsView または FormView) の PageIndexChanging イベントが発生します
  2. ObjectDataSource は BLL から "すべて" のデータを要求し直します。GridView の PageIndex と PageSize のプロパティ値を使用して、BLL から返されるどのレコードを GridView に表示する必要があるかどうかを判断します
  3. GridView の PageIndexChanged イベントが発生します

手順 2 では、ObjectDataSource はそのデータ ソースからすべてのデータを要求し直します。 このスタイルのページングは、AllowPaging プロパティを true に設定するときに既定で使用されるページング動作であるため、一般的に "既定のページング" と呼ばれます。 既定のページングでは、レコードのサブセットのみがブラウザーに送信される HTML に実際にレンダリングされる場合でも、データ Web コントロールは単純にデータのページごとにすべてのレコードを取得します。 データベース データが BLL または ObjectDataSource によってキャッシュされない限り、既定のページングは、十分に大きな結果セットや多数の同時実行ユーザーを持つ Web アプリケーションでは機能しません。

次のチュートリアルでは、"カスタム ページング" を実装する方法について説明します。 カスタム ページングを使用すると、要求されたデータ ページに必要なレコードの正確なセットのみを取得するように、ObjectDataSource に具体的に指示できます。 ご想像のとおり、カスタム ページングにより、大きな結果セットによるページングの効率が大幅に向上します。

Note

既定のページングは、十分に大きな結果セットをページングする場合や、多数の同時実行ユーザーが存在するサイトには適していませんが、カスタム ページングは実装に多くの変更と労力を必要とし、(既定のページングのように) チェックボックスのチェックほど単純ではないことに注意してください。 そのため、既定のページングは、トラフィックの少ない小規模な Web サイトや、比較的小さな結果セットをページングする場合に最適です。実装がはるかに簡単かつ迅速なためです。

たとえば、データベース内に 100 個を超える製品が存在しないことがわかっている場合、カスタム ページングによる最小限のパフォーマンスの向上は、実装に必要な労力によって相殺される可能性があります。 ただし、1 日に数千または数万の製品がある場合、カスタム ページングを実装 "しない" と、アプリケーションのスケーラビリティが大幅に妨げられる可能性があります。

手順 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 Label の Text プロパティをメッセージに割り当てます。これにより、ページの合計ページ数 Products.PageCount のうち現在アクセスしているページ Products.PageIndex + 1 をユーザーに通知します (PageIndex のインデックスは 0 から始まるため、Products.PageIndex プロパティに 1 を追加します)。 PageIndexChanged イベント ハンドラーではなく、DataBound イベント ハンドラーでこの Label の Text プロパティを割り当てることを選択しました。これは、データが GridView にバインドされるたびに DataBound イベントが発生するのに対し、PageIndexChanged イベント ハンドラーはページ インデックスが変更されたときにのみ発生するためです。 GridView が最初のページ アクセスで最初にデータ バインドされている場合、PageIndexChanging イベントは発生しません (一方、DataBound イベントは発生します)。

さらに、アクセスしているページとデータの合計ページ数を示すメッセージがユーザーに表示されるようになりました。

The Current Page Number and Total Number of Pages are Displayed

図 10: 現在のページ番号と合計ページ数が表示される (クリックするとフルサイズの画像が表示されます)。

Label コントロールに加えて、現在表示されているページが選択されている GridView のページ番号を一覧表示する 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 テーブルのレコードを追加または削除している可能性があります。 このような挿入や削除により、データのページ数が変更される可能性があります。

次に、ページ番号をもう一度作成し、現在の GridView PageIndex にマップするページ番号を既定で選択する必要があります。 これを実現するには、0 から PageCount - 1 までのループを使用して、各イテレーションに新しい ListItem を追加し、現在のイテレーション インデックスが GridView の PageIndex プロパティと等しい場合は、その Selected プロパティに true を設定します。

最後に、ユーザーがリストから別の項目を選択するたびに発生する DropDownList の SelectedIndexChanged イベントのイベント ハンドラーを作成する必要があります。 このイベント ハンドラーを作成するには、デザイナーで DropDownList をダブルクリックし、次のコードを追加するだけです。

protected void PageList_SelectedIndexChanged(object sender, EventArgs e)
{
    // Jump to the specified page
    Products.PageIndex = Convert.ToInt32(PageList.SelectedValue);
}

図 11 に示すように、GridView の PageIndex プロパティを変更するだけで、データは GridView に再バインドされます。 GridView の DataBound イベント ハンドラーで、適切な DropDownList ListItem が選択されています。

The User is Automatically Taken to the Sixth Page When Selecting the Page 6 Drop-Down List Item

図 11: ドロップダウン リストの項目 [ページ 6] を選択すると、ユーザーが 6 ページ目に自動的に移動する (クリックするとフルサイズの画像が表示されます)

手順 5: 双方向の並べ替えサポートを追加する

双方向の並べ替えサポートの追加は、ページング サポートを追加するのと同じくらい簡単で、GridView のスマート タグ (GridView の AllowSorting のプロパティを true に設定します) の [並べ替えを有効にする] オプションをオンにするだけです。 これにより、GridView のフィールドの各ヘッダーが LinkButtons としてレンダリングされ、クリックすると、ポストバックが発生し、クリックされた列が昇順で並べ替えられたデータが返されます。 同じヘッダー LinkButton をもう一度クリックすると、データが降順に並べ替えられます。

Note

型指定されたデータセットではなく、カスタム データ アクセス層を使用している場合は、GridView のスマート タグに [並べ替えを有効にする] オプションがない可能性があります。 このチェックボックスは、並べ替えをネイティブでサポートするデータ ソースにバインドされている GridView のみで使用できます。 型指定されたデータセットには、ADO.NET DataTable が呼び出されたときに、指定された条件を使用して DataTable の DataRows を並べ替える Sort メソッドを提供するため、すぐに使用できる並べ替えサポートが用意されています。

DAL が並べ替えをネイティブにサポートするオブジェクトを返さない場合は、並べ替え情報をビジネス ロジック層に渡すように ObjectDataSource を構成する必要があります。これにより、データを並べ替えたり、データを DAL で並べ替えることができます。 今後のチュートリアルでは、ビジネス ロジック層とデータ アクセス層でデータを並べ替える方法について説明します。

並べ替えの LinkButtons は HTML ハイパーリンクとしてレンダリングされ、現在の色 (アクセスしたことがないリンクの場合は青、アクセスしたリンクの場合は濃い赤) はヘッダー行の背景色と競合します。 代わりに、アクセスされたかどうかに関係なく、すべてのヘッダー行のリンクを白で表示しましょう。 これを実現するには、Styles.css クラスに次を追加します。

.HeaderStyle a, .HeaderStyle a:visited
{
    color: White;
}

この構文は、HeaderStyle クラスを使用する要素内でハイパーリンクを表示するときに白いテキストを使用することを示します。

この CSS を追加した後、ブラウザーからページにアクセスすると、画面は図 12 のようになります。 特に、図 12 は、Price フィールドのヘッダー リンクがクリックされた後の結果を示しています。

Screenshot of the Simple Paging & Sorting window showing the results sorted by the Price column in ascending order.

図 12: 結果は、昇順で UnitPrice で並べ替えられている (クリックするとフルサイズの画像が表示されます)。

並べ替えワークフローを確認する

BoundField、CheckBoxField、TemplateField などの GridView フィールドにはすべて SortExpression プロパティがあり、これは、そのフィールドの並べ替えヘッダー リンクがクリックされたときに、データの並べ替えに使用する式を示します。 GridView にも SortExpression プロパティがあります。 並べ替えヘッダー LinkButton をクリックすると、GridView はそのフィールドの SortExpression 値をその SortExpression プロパティに割り当てます。 次に、データが ObjectDataSource から再取得され、GridView の SortExpression プロパティに従って並べ替えられます。 次の一覧では、エンド ユーザーが GridView でデータを並べ替えたときに発生する手順のシーケンスについて詳しく説明します。

  1. GridView の並べ替えイベントが発生します
  2. GridView の SortExpression プロパティは、並べ替えヘッダー LinkButton がクリックされたフィールドの SortExpression に設定されます
  3. ObjectDataSource は、BLL からすべてのデータを再取得し、GridView の SortExpression を使用してデータを並べ替えます
  4. GridView の PageIndex プロパティは 0 にリセットされます。つまり、並べ替え時に、ユーザーはデータの最初のページに戻ります (ページングのサポートが実装されていると仮定します)
  5. GridView の Sorted イベントが発生します

既定のページングと同様に、既定の並べ替えオプションは BLL から "すべて" のレコードを再取得します。 ページングなしで並べ替えを使用する場合、または既定のページングで並べ替えを使用する場合、このパフォーマンス ヒットを回避する方法はありません (データベース データのキャッシュが不足しています)。 しかし、今後のチュートリアルで説明するように、カスタム ページングを使用するときにデータを効率的に並べ替えることができます。

GridView のスマート タグのドロップダウン リストを使用して ObjectDataSource を GridView にバインドすると、各 GridView フィールドには、ProductsRow クラス内のデータ フィールドの名前にその SortExpression プロパティが自動的に割り当てられます。 たとえば、ProductName BoundField の SortExpression は、次の宣言型マークアップに示すように ProductName に設定されます。

<asp:BoundField DataField="ProductName" HeaderText="Product"
    SortExpression="ProductName" />

フィールドは、SortExpression プロパティをクリアして (空の文字列に割り当てます)、並べ替えできないように構成できます。 これを説明するために、顧客に製品を価格で並べ替えられないようにしたいとします。 UnitPrice BoundField の SortExpression プロパティは、宣言型マークアップから、または [フィールド] ダイアログ ボックス (GridView のスマート タグの [列の編集] リンクをクリックしてアクセスできます) から削除できます。

Screenshot of the Fields window with Price and SortExpression highlighted.

図 13: 結果が UnitPrice の昇順で並べ替えられている

UnitPrice BoundField の SortExpression プロパティが削除されると、ヘッダーはリンクではなくテキストとしてレンダリングされるため、ユーザーは価格でデータを並べ替えることができなくなります。

By Removing the SortExpression Property, Users Can No Longer Sort the Products By Price

図 14: SortExpression プロパティを削除すると、ユーザーは製品を価格で並べ替えることができなくなる (クリックするとフルサイズの画像が表示されます)。

プログラムによる GridView の並べ替え

GridView の Sort メソッドを使用して、プログラムで GridView の内容を並べ替えることもできます。 SortDirection (Ascending または Descending) と一緒に並べ替える SortExpression 値を渡すだけで、GridView のデータがもう一度並べ替えられます。

UnitPrice による並べ替えをオフにした理由は、顧客が単に最低価格の製品のみを購入することを心配していたからだと想像してください。 しかし、顧客に最も高価な製品を買うよう促したいので、製品を価格で並べ替えられるようにしたいと考えていますが、最も高価な価格から最も安価なものへしか並べ替えることができません。

これを行うには、Button Web コントロールをページに追加し、その ID プロパティを SortPriceDescending に、Text プロパティに [価格で並べ替え] を設定します。 次に、デザイナーで [ボタン コントロール] をダブルクリックして、ボタンの Click イベントのイベント ハンドラーを作成します。 このイベント ハンドラーに次のコードを追加します。

protected void SortPriceDescending_Click(object sender, EventArgs e)
{
    // Sort by UnitPrice in descending order
    Products.Sort("UnitPrice", SortDirection.Descending);
}

このボタンをクリックすると、最も高価なものから最も安価なものへ、製品が価格で並べ替えられた最初のページにユーザーを返します (図 15 を参照)。

Clicking the Button Orders the Products From the Most Expensive to the Least

図 15: ボタンをクリックすると、製品が最も高価なものから最も安価なものの順番になる (クリックするとフルサイズの画像が表示されます)

まとめ

このチュートリアルでは、既定のページングと並べ替えの機能を実装する方法について説明しました。どちらも、チェックボックスをオンにするのと同じくらい簡単でした。 ユーザーがデータの並べ替えやページングを行うと、同様のワークフローが展開されます。

  1. ポストバックが発生します
  2. データ Web コントロールの事前レベルのイベントが発生します (PageIndexChanging または Sorting)
  3. ObjectDataSource によってすべてのデータが再取得されます
  4. データ Web コントロールの事後レベルのイベントが発生します (PageIndexChanged または Sorted)

基本的なページングと並べ替えの実装は簡単ですが、より効率的なカスタム ページングを利用したり、ページングや並べ替えインターフェイスをさらに強化したりするには、より多くの労力を必要とします。 今後のチュートリアルでは、これらのトピックについて説明します。

プログラミングに満足!

著者について

7 冊の ASP/ASP.NET 書籍の著者であり、4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジを扱っています。 Scott は、独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズは24時間で2.0 ASP.NET 自分自身を教えています。 にアクセスするか、ブログを使用して にアクセスmitchell@4GuysFromRolla.comできます。これは でhttp://ScottOnWriting.NET見つけることができます。

次へ