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

.NET TIPS

［ASP.NET］DataGridコントロールでページ表示するには？

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

　データを表形式で一覧表示するDataGridコントロールには、ブラウザの1画面に収まりきらないような数のデータをページに分割して表示する「ページング機能」が備わっている。この機能は、指定されたページの作成やページ移動のためのリンクの作成など、本来であれば非常に面倒な処理のほとんどを実装しているため、ごくわずかなコーディングでデータのページ分割表示が実現できる。本稿では、このページング機能の基本的な使い方についてまとめる。

　なお、ここでは「TIPS：［ASP.NET］DataGridコントロールの行に通し番号を付けるには？」で示したサンプル・プログラム（numberdg.aspx）をベースとしてページング機能の実装手順を示していく。そのサンプル・プログラムに必要最低限なコーディングを追加してページング機能を実装した今回のサンプル・プログラムの実行画面を次に示す。

ページング機能を実装したサンプル・プログラム（pagingdg.aspx）の実行結果

pagingdg.aspxの実行（www.iwebmethod.netのページ）

　グリッドの左下に小さく表示されている2つの下線付き不等号が、デフォルトの設定で表示されるページ移動のためのリンクである。もちろんこれはカスタマイズ可能だ（これについては「TIPS：［ASP.NET］DataGridコントロールでページ番号によりページ移動を行うには？」で解説している）。

　ここではDataGridコントロールでページング機能を有効にするために最低限必要な3つの手順について解説する。

手順1：<asp:DataGrid>タグにAllowPaging="true"属性を追加

　ページング機能を有効にするためには、<asp:DataGrid>タグにAllowPaging="true"属性がまずは必要となる。この属性の追加だけで、表示されるグリッドの一番下の行にはページ移動のためリンクボタン（外見はハイパーリンクであるが、機能的にはボタンの役目を果たすコントロール）が表示される。

　また、デフォルトでは1ページに表示される行の数は10であるため、グリッドに表示される行もデータソースの先頭から10個の要素までとなる。なお、1ページに表示される行数はPageSize属性で指定することができる。

手順2：<asp:DataGrid>タグにOnPageIndexChanged属性でメソッドを指定

　AllowPaging="true"属性を追加しただけでは、表示されたリンクボタンをクリックしてもページの移動は起こらない。リンクボタンがクリックされたときには、最低でも新しいページ番号をDataGridコントロールに設定してからデータ連結を行うという処理が必要となるためである。この処理はリンクボタンがクリックされたときにのみ行えばよく、リンクボタンのクリック時にはPageIndexChangedイベントが発生する。よってそのイベントが発生したときに呼び出されるイベント・ハンドラとなるメソッドを用意し、それらの処理を記述すればよい。

　PageIndexChangedイベントに対応するイベント・ハンドラの設定は、<asp:DataGrid>タグのOnPageIndexChanged属性でそのメソッド名を指定して行う。

　ここまでに解説した2つの属性を追加した<asp:DataGrid>要素の記述例は次のようになる。

<asp:DataGrid id="MyGrid" AllowPaging="true" PageSize="5" OnPageIndexChanged="MyGrid_Paging" runat="server"> …… </asp:DataGrid>

　この例ではPageSize属性も記述して、1ページあたりの行数を5行としている。PageIndexChangedイベントを処理するメソッドとしては「MyGrid_Paging」という名前のメソッドを指定している。

手順3：PageIndexChangedイベントに対応するイベント・ハンドラの記述

　次に、いまOnPageIndexChanged属性で指定した名前のメソッドを定義する。すでに述べたように、このメソッドでは新しいページ番号をDataGridコントロールに設定してデータ連結を行えばよい。メソッドの定義は次のようなものになる（データソースの設定部分は省略している）。

void MyGrid_Paging(object sender, DataGridPageChangedEventArgs e) { MyGrid.CurrentPageIndex = e.NewPageIndex; MyGrid.DataSource = …… MyGrid.DataBind(); }

　イベント・ハンドラとなるメソッドのシグネチャ（メソッドの戻り値の型やパラメータの型、個数）はあらかじめ決められている。PageIndexChangedイベントの場合には、第2パラメータはDataGridPageChangedEventArgsクラス（System.Web.UI.WebControls名前空間）のオブジェクトとなり、そのNewPageIndexプロパティから、ユーザーにより指定された移動先のページ番号を取得することができる。その値をDataGridコントロールのCurrentPageIndexプロパティに設定し、データソースを設定してからDataBindメソッドを呼び出してデータ連結を行えば、ページ移動のための処理は完了だ。

　ページングを行っている場合（AllowPaging属性がtrueの場合）には、データ連結により、データソース内の一部分の要素（CurrentPageIndex * PageSize番目からPageSize個分の要素）がグリッドに表示されることになる。ちなみに表示されるページ番号は1から始まるが、CurrentPageIndexプロパティなどで設定するページ番号は0始まりである。

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

　上記の3つの手順により、「TIPS：［ASP.NET］DataGridコントロールの行に通し番号を付けるには？」で示したサンプル・プログラム（numberdg.aspx）にページング機能を実装したサンプル・プログラムのコードを次に示す。今回のポイントとなる部分を太字で示した。このプログラムの実行結果はすでに本稿の冒頭で示している。

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

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



<html>

<head>

  <script runat="server">

    void BindMyGrid() {

      DataSet ds = new DataSet();

      ds.ReadXml("http://www.atmarkit.co.jp/rss/fdotnet/rss2dc.xml");



      MyGrid.DataSource = ds.Tables["item"];

      MyGrid.DataBind();

    }



    void Page_Load(object s, EventArgs e) {

      if (!IsPostBack) {

        BindMyGrid();

      }

    }



    void MyGrid_Paging(object sender, DataGridPageChangedEventArgs e) {

      MyGrid.CurrentPageIndex = e.NewPageIndex;

      BindMyGrid();

    }

  </script>

</head>



<body>

  <form runat="server">

    <asp:DataGrid id="MyGrid"

        AllowPaging="true"

        PageSize="5"

        OnPageIndexChanged="MyGrid_Paging"

        AutoGenerateColumns="false"

        runat="server">



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

      <ItemStyle   BackColor="#FFEEEE" />

      <AlternatingItemStyle BackColor="#FFDDDD" />



      <Columns>

        <asp:TemplateColumn HeaderText="No">

          <ItemTemplate>

            <%# Container.DataSetIndex + 1 %>

          </ItemTemplate>

        </asp:TemplateColumn>



        <asp:BoundColumn

          DataField="title" HeaderText="タイトル" />

        <asp:BoundColumn

          DataField="description" HeaderText="概要" />

      </Columns>



    </asp:DataGrid>

  </form>

</body>

</html>

ページング機能を実装したC#のサンプル・プログラム（pagingdg.aspx）

pagingdg.aspxのダウンロード

　元のサンプル・プログラム（numberdg.aspx）と少し異なり、このプログラムではデータソースを設定しデータ連結を行う処理をBindMyGridメソッドにまとめている。これはプログラムの2つの個所でその処理が必要となったためだ。

　BindMyGridメソッドの呼び出しは、PageIndexChangedイベントの発生時に加えて、ページのロード時、特にユーザーがページに初めてアクセスしたときにも必要となる。なぜならPageIndexChangedイベントはリンクボタンがクリックされたときにのみ発生するからである。

　ページが初めてアクセスされた場合には、DataGridコントロールのCurrentPageIndexプロパティはデフォルト値である0となっているため、次のようにして単にデータ連結だけを行えばよい。

void Page_Load(object s, EventArgs e) { if (!IsPostBack) { BindMyGrid(); } }

　ページのロード時に呼び出されるイベント・ハンドラであるこのメソッドは、ポストバック時も含めてページが作成されるときに毎回呼び出されるが、初回のアクセス時以外はこのメソッドでのデータ連結は不要だ。

　なお、ページング機能を使用する場合には、DataGridコントロールのビューステートを無効にしてはいけない（デフォルトでは有効）。その理由の1つは、DataGridコントロールが現在のページ番号をビューステート内に保持しているためだ。ビューステートを無効にしたままページング機能を使用する方法については「TIPS：［ASP.NET］DataGridコントロールでビューステートを使用せずにページ表示するには？」で解説している。

カテゴリ：Webフォーム　処理対象：DataGridコントロール
使用ライブラリ：DataGridコントロール
関連TIPS：［ASP.NET］DataGridコントロールでページ番号によりページ移動を行うには？
関連TIPS：［ASP.NET］DataGridコントロールの行に通し番号を付けるには？
関連TIPS：［ASP.NET］DataGridコントロールでビューステートを使用せずにページ表示するには？

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

		［ASP.NET］DataGridコントロールでビューステートを使用せずにページ表示するには？
		［ASP.NET］DataGridコントロールで大量のデータをページ表示するには？
		［ASP.NET］DataGridコントロールですべての行にアクセスするには？
		［ASP.NET］DataGridコントロールのページ移動ボタンをカスタマイズするには？
		［ASP.NET］DataGridコントロールの編集用テキストボックスを大きくするには？

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

generated by

更新履歴

【2003/10/10】 関連TIPSとして、［ASP.NET］DataGridコントロールでページ番号によりページ移動を行うには？と［ASP.NET］DataGridコントロールでビューステートを使用せずにページ表示するには？についての記述を追加しました。

「.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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える