Tweet

.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。

<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コントロールのプロパティ（ページャ表示に必要な諸情報）にアクセスすることができるということだ。

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

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

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

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

この記事と関連性の高い別の.NET TIPS ［ASP.NET］DataPagerコントロールでListViewコントロールにページャを追加するには？ ［ASP.NET］DataGridコントロールのページ移動ボタンをカスタマイズするには？ ［ASP.NET］ListViewコントロールで非定型のリストを表示するには？ ［ASP.NET］GridViewコントロールで各列の表示をカスタマイズするには？ ［ASP.NET］GridViewコントロールで編集用のテキストボックスをカスタマイズするには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）