ASP.NET GridViewのホームへ戻る

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

 

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

 

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

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

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

  LinkButtonコントロールの使い方

 

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

 

 

 

1. 新規Webページ作成

 

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

 

2. コントロール作成

 

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

 

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>

   ・・・

  </Columns>

  <PagerTemplate>

    <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のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。ブラウザが起動されて、GridViewCustomersテーブルが表示されます。ページャーには、ページ移動ボタンとページ番号が表示されます。

 

 

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

 

 

◆解説

 

GridViewのページャーをカスタマイズするには、<PagerTemplate>…</PagerTempalte>を使用します。ページャーにページ移動ボタンを表示するには、LinkButtonを使用します。LinkButtonCommandNameプロパティには「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を指定すると、ページ移動ボタンの下線が表示されません。

 

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

 

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

 

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

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

 

<style>

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

</style>

 

<PagerTemplate>

  <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.NET GridViewのホームへ戻る