GridViewのページャーをカスタマイズする

■GridViewのページャーをカスタマイズする (GridView03StepUp2.apsx)

GridViewにページング機能を追加するとページャーにページ番号またはページ移動ボタンが表示されます。ここでは、ページ移動ボタンとページ番号(1/99)を同時に表示するサンプルを作成します。このサンプルでは、以下のノウハウを習得することができます。

▼ Webページに<style>…</style>タグを追加する方法

▼ <PagerTemplate>…</PagerTemplate>の使い方

▼ データ表現式(<%=…%>の使い方

▼ LinkButtonコントロールの使い方

図　ページャーにページ移動ボタンをページ番号を表示

1. 新規Webページ作成

ソリューションエクスプローラのプロジェクトの右クリックから[新しい項目の追加]を選択して、新規Webページ「GridView03StepUp2.aspx」を作成します。

2. コントロール作成

GridView03.aspxのデザイナならGridView1とSqlDataSource1のオブジェクトをコピーしたら、GridView03StepUp2.aspxのデザイナに貼り付けします。デザイナにGridView1とSqlDataSource1のオブジェクトが作成されます。

3. PagerTempalte追加

デザインの最下位から[ソース]をクリックしてソースビューに切り替えます。<head>…</head>タグに次の<style>…</style>タグとスタイルシート(CSS)を追加します。

<style>

.PagerStyle { font-family: Webdings; text-decoration: none }

</style>

GridViewに次のような<PagerTemplate>…</PagerTempalte>タグを追加します。

<asp:GridView ID="GridView1" runat="server"

AllowPaging="True" AllowSorting="True" ・・・>

　・・・

・・・

</Columns>

<asp:LinkButton ID="LinkButton1" runat="server"

CommandName="Page" CommandArgument="First"

CssClass="PagerStyle" >7</asp:LinkButton>

<asp:LinkButton ID="LinkButton2" runat="server"

CommandName="Page" CommandArgument="Prev"

CssClass="PagerStyle" >3</asp:LinkButton>

(<%= GridView1.PageIndex + 1 %> / <%=GridView1.PageCount %>)

<asp:LinkButton ID="LinkButton3" runat="server"

CommandName="Page" CommandArgument="Next"

CssClass="PagerStyle" >4</asp:LinkButton>

<asp:LinkButton ID="LinkButton4" runat="server"

CommandName="Page" CommandArgument="Last"

CssClass="PagerStyle" >8</asp:LinkButton>

</PagerTemplate>

　・・・

</asp:GridView>

4. ブラウザに表示

VWD 2005のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。ブラウザが起動されて、GridViewにCustomersテーブルが表示されます。ページャーには、ページ移動ボタンとページ番号が表示されます。

図　ページャーにページ移動ボタンとページ番号が表示された

◆解説

GridViewのページャーをカスタマイズするには、<PagerTemplate>…</PagerTempalte>を使用します。ページャーにページ移動ボタンを表示するには、LinkButtonを使用します。LinkButtonのCommandNameプロパティには「Page」、CommandArgumentにはボタンの種類として「First」、「Prev」、「Next」、「Last」を設定します。

CssCalassプロパティには、<Style>…</Style>タグで定義したスタイルシートのクラス名を設定します。スタイルシートには、font-familyを指定してページ移動ボタンのテキストが左右の矢印で表示されるようにします。Font-familyに「Webdings」を指定すると、数字の「7」が左向きの三角(2個分)に代わります。同様に「3」が左向きの三角(1個)、「4」が右向きの三角(1個)、「8」が右向きの三角(2個)に代わります。

スタイルシートにtext-decoration: noneを指定すると、ページ移動ボタンの下線が表示されません。

カレントのページ番号と総ページ番号は、GridVewのPageIndexとPageCountプロパティに格納されています。PageIndexは「0」から開始されますので、カレントページ番号を表示するには「PageIndex＋１」のように記述します。

HTMLからGridViewのプロパティ値を表示するには、<%=…%>で囲って記述します。このデータ表現式は、ResponseオブジェクトのWriteメソッドと同等の働きをします。

<%= GridView1.PageIndex + 1 %> ⇒カレントのページ番号表示

<%= GridView1.PageCount %> ⇒総ページ番号表示