レポート データのページングと並べ替え (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

PagingAndSorting フォルダーを作成し、チュートリアル ASP.NET ページを追加する

図 1: PagingAndSorting フォルダーを作成し、チュートリアル ASP.NET ページを追加する

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

SectionLevelTutorialListing.ascx ユーザー コントロールを Default.aspx に追加する

図 2: SectionLevelTutorialListing.ascx ユーザー コントロールを Default.aspx に追加する

作成するページングと並べ替えのチュートリアルを箇条書きに表示するには、サイト マップに追加する必要があります。 ファイルを 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>

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

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

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

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

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

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

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

[更新]、[挿入]、[削除] タブの [Drop-Down リスト] で [(なし)] オプションを選択します

図 5: UPDATE、INSERT、DELETE の各タブの Drop-Down リストで [(なし)] オプションを選択する

次に、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 つの画面に一覧表示され、各製品の名前、カテゴリ、仕入先、価格、および廃止された状態が表示されます。

各製品が一覧表示されます

図 6: 各製品が一覧表示されます (フルサイズの画像を表示する場合はクリックします)

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

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

[ページングを有効にする] チェック ボックスをオンにしてページング サポートを追加する

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

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

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

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

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

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

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

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

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

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

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

<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 の [ページングを有効にする] チェック ボックスをオンにし PagerStyle 、ファイルを使用して と PagerSettings の構成を行った後にブラウザーからアクセスした場合の Web ページを GridView.skin 示しています。 10 個のレコードのみが表示され、ページング インターフェイスはデータの最初のページを表示していることを示します。

ページングを有効にすると、レコードのサブセットのみが一度に表示されます

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

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

ページ番号をクリックするとポストバックが発生し、レコードの適切なサブセットが表示されます

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

Server-Side ワークフローのページング

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

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

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

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

注意

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

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

手順 4: ページング エクスペリエンスのカスタマイズ

データ Web コントロールには、ユーザーのページング エクスペリエンスを向上させるために使用できるプロパティが多数用意されています。 たとえば、 プロパティは PageCount 合計ページ数を示し PageIndex 、 プロパティは現在アクセス中のページを示し、ユーザーを特定のページにすばやく移動するように設定できます。 これらのプロパティを使用してユーザーのページング エクスペリエンスを向上させる方法を説明するために、現在アクセスしているページをユーザーに通知する Label Web コントロールと、特定のページにすばやくジャンプできる DropDownList コントロールを追加しましょう。

まず、Label Web コントロールをページに追加し、そのプロパティを IDPagingInformation設定し、そのプロパティを 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);
}

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

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

現在のページ番号と合計ページ数が表示されます

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

Label コントロールに加えて、現在表示されているページが選択されている GridView のページ番号を一覧表示する DropDownList コントロールも追加しましょう。 ここでの考え方は、ユーザーは DropDownList から新しいページ インデックスを選択するだけで、現在のページから別のページにすばやくジャンプできるということです。 まず、DropDownList をDesignerに追加し、そのプロパティを IDPageList設定し、スマート タグから [自動ポストバックを有効にする] オプションをオンにします。

次に、イベント ハンドラーに 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;
}

このコードは、まず DropDownList 内の項目を PageList クリアすることから始まります。 ページ数が変わるとは思わないが、他のユーザーがシステムを同時に使用し、テーブルからレコードを追加または削除している可能性があるため、これは余分に Products 見えるかもしれません。 このような挿入や削除により、データのページ数が変更される可能性があります。

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

最後に、DropDownList イベント SelectedIndexChanged のイベント ハンドラーを作成する必要があります。これは、ユーザーがリストから別のアイテムを選択するたびに発生します。 このイベント ハンドラーを作成するには、Designerで 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 が選択されています。

ページ 6 Drop-Down リスト アイテムを選択すると、ユーザーは 6 番目のページに自動的に移動します

図 11: ページ 6 Drop-Down リスト アイテムを選択すると、ユーザーは 6 番目のページに自動的に移動します (フルサイズの画像を表示する をクリックします)

手順 5: Bi-Directional 並べ替えサポートの追加

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

注意

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

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

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

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

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

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

[簡易ページング & 並べ替え] ウィンドウのスクリーンショット。[価格] 列で昇順で並べ替えられた結果が表示されています。

図 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 フィールドには SortExpression 、クラス内のデータ フィールドの名前にそのプロパティが自動的に ProductsRow 割り当てられます。 たとえば、 ProductName BoundFields SortExpression は、次の宣言型マークアップに示すように に ProductName設定されます。

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

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

Price と SortExpression が強調表示されている [フィールド] ウィンドウのスクリーンショット。

図 13: 結果は UnitPrice で昇順で並べ替えられています

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

SortExpression プロパティを削除すると、ユーザーは製品を価格で並べ替えできなくなります

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

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

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

による並べ替えをオフにした理由は、顧客が単に最低価格の UnitPrice 製品のみを購入することを心配していたからだとします。 しかし、私たちは彼らに最も高価な製品を購入するように促したいので、私たちは彼らに製品を価格で並べ替えることができるようにしたいと考えていますが、最も高価な価格から最も低いものまでです。

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

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

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

ボタンをクリックすると、製品が最も高価なものから最も低いものに注文されます

図 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見つけることができます。