.NET TIPS

[ASP.NET]DataPagerコントロールでページャのレイアウトをテンプレート定義するには?[3.5、C#、VB]

山田 祥寛
2009/12/24

 「TIPS:[ASP.NET]DataPagerコントロールでListViewコントロールにページャを追加するには?」では、DataPagerコントロールでListViewコントロールにページャ(=ページングのためのナビゲーション・リンク)を生成する方法について解説した。DataPagerコントロールを利用することで、ListViewコントロールの配置に依存することなく、ページャを自由な位置に配置できるというメリットがある。

 先述のTIPSでも見たように、DataPagerコントロールにはあらかじめNextPreviousPagerField(次/前のページャ・フィールド)、NumericPagerField(数値ページャ・フィールド)のようなフィールドが用意されているので、これらのフィールドを利用すれば、まず定型的なページャを定義するのは難しいことではないはずだ。

 もっとも、ページャのレイアウトによっては、これらのフィールドだけでは賄えないような情報――例えば、ページ・サイズや総ページ数、総レコード数などを表示したいこともあるだろう。そのようなケースでは、TemplatePagerFieldフィールドを利用することで、ページャの表示をより自由にカスタマイズすることができる。TemplatePagerFieldフィールドは、名前のとおり、あらかじめ定義されたテンプレートに従ってページャを生成するためのフィールドである。

 本稿では、このTemplatePagerFieldフィールドを利用して、「TIPS:[ASP.NET]ListViewコントロールで非定型のリストを表示するには?」で作成したサンプルに、以下の画面のようなページャを追加する例を紹介する。

TemplatePagerFieldフィールドで作成したページャ
標準的な前後ページャに対して「<ページ番号>/<総ページ数>ページ」という表記を付与している。

 それではさっそく、具体的な手順を見ていくことにしよう。なお、非定型リストを生成する基本的な方法については、先述のTIPSを参照していただきたい。本稿でも、以降では前述のTIPSで作成したListView.aspxをベースに、差分のコードのみを紹介するものとする。

1. DataPagerコントロールを配置する

 既存のListView.aspxに対して、以下の画面の要領で、DataPagerコントロールを配置する。

ListView.aspxのフォーム・レイアウト(変更分のみ)
以下のコントロールを配置。
  DataPagerコントロール(IDは「pager」)。

 また、DataPagerコントロールのPagedControlIDプロパティに、関連付けるListViewコントロールのID値(ここでは「ListView1」)を指定しておこう。

2. ページャのフィールドを編集する

 DataPagerコントロールで表示するページャのフィールドを追加する。フィールドを追加するには、コントロール右肩のタスク・メニューから[ページャのフィールドを編集]を選択すればよい。

[フィールド]ダイアログ

 上の画面のような[フィールド]ダイアログが表示されるので、左上の[表示可能なフィールド]欄から[次/前のページャ フィールド]と[テンプレート ページャ フィールド]をそれぞれ選択し、[追加]ボタンをクリックする。

 追加されたフィールドは、[選択されたフィールド]欄に表示されるので、[次/前のページャ フィールド]を選択状態にしたうえで、右側のプロパティ・シートからButtonTypeプロパティ(ボタンの種類)を「Button」に設定しておく。

3. テンプレートを定義する

 [フィールド]ダイアログを閉じたら、次にテンプレート・ページャ・フィールド(TemplatePagerFieldフィールド)で使用するテンプレートを作成する。

 テンプレートを編集するには、タスク・メニューから[テンプレートの編集]を選択し、表示をテンプレート編集モードに切り替えることでも行えるが、かえって作業が煩雑となるので、ここではコード・エディタから直接にコードを編集することにしよう*1

*1 テンプレートをフォーム・エディタから編集する方法については、「TIPS:[ASP.NET]GridViewコントロールで編集用のテキストボックスをカスタマイズするには?」などでも紹介しているので、併せて参照してほしい。

<asp:DataPager ID="pager" runat="server" PagedControlID="ListView1"
  PageSize="10">
  <Fields>
    <asp:NextPreviousPagerField ButtonType="Button" />
    <asp:TemplatePagerField>
      <PagerTemplate>
        <asp:Label ID="lblCurrent" runat="server"
          Text="<%# Container.StartRowIndex / Container.PageSize + 1 %>" />/
        <asp:Label runat="server" ID="lblTotal"
          Text="<%# Math.Ceiling((double)Container.TotalRowCount / Container.PageSize) %>" />
        ページ
      </PagerTemplate>
    </asp:TemplatePagerField>
  </Fields>
</asp:DataPager>
<asp:DataPager ID="pager" runat="server" PagedControlID="ListView1"
  PageSize="5">
  <Fields>
    <asp:NextPreviousPagerField ButtonType="Button" />
    <asp:TemplatePagerField>
      <PagerTemplate>
        <asp:Label ID="Label1" runat="server"
          Text="<%# Container.StartRowIndex / Container.PageSize + 1 %>" />/
        <asp:Label runat="server" ID="lblTotal"
          Text="<%# Math.Ceiling(CDbl(Container.TotalRowCount) / Container.PageSize) %>" />
        ページ
      </PagerTemplate>
    </asp:TemplatePagerField>
  </Fields>
</asp:DataPager>
TemplatePagerFieldフィールドによるページャ・テンプレート(ListView.aspx)

 自分で追記しているのは太字の部分である。

 テンプレート本体は、<asp:TemplatePagerField>−<PagerTemplate>要素の配下に記述する。テンプレートに動的な値を埋め込むには、<%# …… %>ブロックを利用すればよい。<%# …… %>ブロックの中身(バインド式)は実行時に解釈され、その値は指定されたプロパティ値に対して反映されることになる。

 バインド式に含まれるContainerオブジェクトは、テンプレートのコンテナを指す特殊なオブジェクトで、この場合はDataPagerコントロールのインスタンスを表す*2。つまり、テンプレートの中では、このContainerオブジェクトを経由することで、DataPagerコントロールのプロパティ(ページャ表示に必要な諸情報)にアクセスすることができるということだ。

*2 Containerオブジェクトについては、「TIPS:[ASP.NET]Container.DataItemの正体は?」も併せて参照してほしい。

 DataPagerコントロールの主なプロパティは、以下のとおりである。

プロパティ 概要
PageSize ページ当たりのレコード数
StartRowIndex 現在ページの先頭レコード(インデックス番号)
TotalRowCount 総レコード数
DataPagerコントロールの主なプロパティ

 ここでは、で現在のページ番号を、で総ページ数をそれぞれ求め、LabelコントロールのTextプロパティに埋め込んでいる。

 以上を理解したら、サンプルを実行してみよう。冒頭の画面のように、ページャの末尾に「<ページ番号>/<総ページ数>ページ」という表示が追加されていればテンプレートは正しく認識されている。End of Article

利用可能バージョン:.NET Framework 3.5
カテゴリ:Webフォーム 処理対象:ListViewコントロール
使用ライブラリ:ListViewコントロール
関連TIPS:[ASP.NET]DataPagerコントロールでListViewコントロールにページャを追加するには?
関連TIPS:[ASP.NET]ListViewコントロールで非定型のリストを表示するには?
関連TIPS:[ASP.NET]GridViewコントロールで編集用のテキストボックスをカスタマイズするには?
関連TIPS:[ASP.NET]Container.DataItemの正体は?

この記事と関連性の高い別の.NET TIPS
[ASP.NET]DataPagerコントロールでListViewコントロールにページャを追加するには?
[ASP.NET]DataGridコントロールのページ移動ボタンをカスタマイズするには?
[ASP.NET]ListViewコントロールで非定型のリストを表示するには?
[ASP.NET]GridViewコントロールで各列の表示をカスタマイズするには?
[ASP.NET]GridViewコントロールで編集用のテキストボックスをカスタマイズするには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム 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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間