.NET TIPS ［ASP.NET］DataGridコントロールで大量のデータをページ表示するには？ - C# Webフォーム

.NET TIPS

［ASP.NET］DataGridコントロールで大量のデータをページ表示するには？

デジタルアドバンテージ
2003/10/17

　簡単なイベント・ハンドラの記述でページ表示が可能となるページング機能は、DataGridコントロールの便利な機能の1つだ。この機能により、一覧表示するデータが多い場合にでも、クライアントへのデータの転送量を減らし、グリッド表示にかかるクライアントの負荷を軽減することができる（ページング機能の使用方法については「TIPS：［ASP.NET］DataGridコントロールでページ表示するには？」や「TIPS：［ASP.NET］DataGridコントロールでページ番号によりページ移動を行うには？」で解説している）。

ページング機能の制約

　ただし、このページング機能には、実際にグリッドで表示している行が全データの一部分であっても、そのDataGridコントロールのデータソースには常に全データを設定しておかなければならないという制約がある。全データの量がそれほど多くない場合には、この制約はほとんど問題とはならないし、データソースに全データがセットされているからこそDataGridコントロールは全ページ数を算出でき、新しいページ番号を指定するだけでそのページに対応したデータを表示することができる。

　しかし、全ページ数が数十ページ、数百ページに渡るような巨大なデータソースを扱う場合、その全データをサーバ側で維持するためにサーバのリソースを大量に消費することになる。ポストバックが発生した場合にも全データを準備しておくためには、通常はページのSessionプロパティにその全データを保存したり、そうでなければ、毎回データベースなどからデータを取得するといった処理が必要となるためである。

DataGridコントロールのカスタム・ページング機能

　このような巨大なデータソースを扱う場合を想定して、DataGridコントロールには「カスタム・ページング」と呼ばれる機能が用意されている。このページングは、常に全データをデータソースとして用意する必要はなく、ユーザーにより指定されたページに必要なデータのみをデータソースに設定してページ表示を行うための仕組みを提供する。

　ただし当然ながら、この機能を利用するには、指定されたページに対応した部分のデータだけを取得できるようなデータソースでなければならない。それがデータベースであれば、問い合わせ条件にマッチしたデータのうち20件目から10件だけを取得するといった処理が可能でなければならない。加えて、あらかじめデータソースとなるデータの全データ数が取得可能でなければならい。この2つの条件を満たすようなデータソースであれば、カスタム・ページング機能を利用して効率的なページ表示が可能となる。

カスタム・ページング機能の実装手順

　カスタム・ページング機能を使用するにはまず、通常のページング機能の使用に必要なAllowPaging="true"属性に加えて、AllowCustomPaging="true"属性を<asp:DataGrid>タグで指定する。この属性を指定した記述例は次のようになる。

<asp:DataGrid id="MyGrid" AllowPaging="true" AllowCustomPaging="true" OnPageIndexChanged="MyGrid_Paging" AutoGenerateColumns="false" runat="server"> …… </asp:DataGrid>

　次に、予測される全データの数をDataGridオブジェクトのVirtualItemCountプロパティに設定する。この値はタグ内で属性としては記述できない。1ページに表示するデータ数は<asp:DataGrid>タグのPageSize属性か、プログラム・コードからはDataGridオブジェクトのPageSizeプロパティにより指定できる（デフォルトは10）。この2つの値から、DataGridコントロールは全ページ数を知ることができ、ページ移動のためのリンクボタンを作成できるようになる。

　ページ移動の際には、新しいページのインデックス番号に基づいて1ページ分のデータをデータソースに設定し、データ連結を行えばよい。

カスタム・ページング機能を使用したサンプル・プログラム

　ここでは、カスタム・ページング機能を利用して次のような画面のサンプル・プログラムを作成してみた。これはグリッドを使ってカレンダーを表示する。ページ移動ボタンで表示する月を選択することができる。

カスタム・ページング機能を利用したサンプル・プログラム（custompg.aspx）の実行画面

このサンプル・プログラムはカレンダーになっており、ページ移動ボタンで表示する月を選択することができる。

custompg.aspxの実行（www.iwebmethod.neのページ）

　プログラムではデータソースとなる1年間分のデータをあらかじめ作成するのではなく、表示されようとしている月に応じて、1カ月分のデータだけを作成するようにしている。例えば「10」がクリックされた場合、10月は31日あるので、このプログラムでは31個のDataTime構造体（System名前空間）のインスタンスを作成し、それをデータソースに設定する。

　DataGridコントロールの正当な使い方とはいえないかもしれないが、カスタム・ページング機能の使用例とはなるだろう。このプログラムのソース・コードは次のようになっている。

<%@ Page Language="C#" Debug="true" %>

<%@ Import Namespace="System.Data" %>

<%@ Import Namespace="System.Globalization" %>



<html>

<head>

  <script runat="server">



    int thisYear = DateTime.Now.Year;

    int thisMonth = DateTime.Now.Month;



    void BindMyGrid(int month) {

      ArrayList al = new ArrayList();

      JapaneseCalendar jc = new JapaneseCalendar();

      for (int d = 1; d <= jc.GetDaysInMonth(thisYear, month); d++) {

        al.Add(new DateTime(thisYear, month, d));

      }

      MyGrid.DataSource = al;

      MyGrid.DataBind();

    }



    void Page_Load(object s, EventArgs e) {

      if (!IsPostBack) {

        MyGrid.VirtualItemCount = 31 * 12;

        MyGrid.PageSize = 31;



        MyGrid.CurrentPageIndex = thisMonth - 1;

        BindMyGrid(thisMonth);

      }

    }



    void MyGrid_Paging(object sender, DataGridPageChangedEventArgs e) {

      MyGrid.CurrentPageIndex = e.NewPageIndex;

      BindMyGrid(e.NewPageIndex + 1);

    }

  </script>

</head>



<body>

  <form runat="server">



    <asp:DataGrid id="MyGrid"

        AllowPaging="true"

        AllowCustomPaging="true"

        OnPageIndexChanged="MyGrid_Paging"

        AutoGenerateColumns="false"

        runat="server">



      <PagerStyle

          Mode="NumericPages"

          PageButtonCount="999999"

          BackColor="#CCCCCC"

          Position="Top" />



      <HeaderStyle BackColor="#BB2255" ForeColor="white"/>

      <ItemStyle   BackColor="#FFEEEE" />

      <AlternatingItemStyle BackColor="#FFDDDD" />



      <Columns>

        <asp:BoundColumn

            DataField="DayOfWeek" HeaderText="曜日" />

        <asp:BoundColumn

            DataField="Day" HeaderText="日付" />

      </Columns>



    </asp:DataGrid>



  </form>

</body>

</html>

カスタム・ページング機能を利用したC#のサンプル・プログラム（custompg.aspx）

custompg.aspxのダウンロード

　プログラムでは、実行した月のカレンダーが最初に表示されるようにしている。なお、VirtualItemCountプロパティやPageSizeプロパティの設定が初回アクセス時のみで問題ないのは、これらの値がビューステートに保存されるためである。

　また、JapaneseCalendarクラス（System.Globalization名前空間）のGetDaysInMonthメソッドは、パラメータで指定した月の日数を取得するためのものである。このクラスはうるう年にも対応している。

カテゴリ：Webフォーム　処理対象：DataGridコントロール
使用ライブラリ：DataGridコントロール
使用ライブラリ：DataTime構造体（System名前空間）
使用ライブラリ：JapaneseCalendarクラス（System.Globalization名前空間）
関連TIPS：［ASP.NET］DataGridコントロールでページ表示するには？
関連TIPS：［ASP.NET］DataGridコントロールでページ番号によりページ移動を行うには？

この記事と関連性の高い別の.NET TIPS

		［ASP.NET］DataGridコントロールでページ表示するには？
		［ASP.NET］DataGridコントロールでビューステートを使用せずにページ表示するには？
		［ASP.NET］DataGridコントロールの行にデータを埋め込むには？
		DataGridコントロールで行の追加／削除およびデータ編集を禁止するには？
		［ASP.NET］DataGridコントロールでデータセットを表示するには？

このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー）により自動抽出したものです。

generated by

「.NET TIPS」

Insider.NET フォーラム新着記事

第2回　簡潔なコーディングのために （2017/7/26）
　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
第1回　明瞭なコーディングのために （2017/7/19）
　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
Presentation Translator （2017/7/18）
　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える