DataGridにページング機能を追加したサンプル

 

DataGridにページング機能を追加したサンプル

 

このサンプルは、DataGridに表示されているレコードをページングすることができます。DataGridのページを移動するには、ページ番号を選択する方法と移動ボタンをクリックする方法があります。ページ番号を選択して移動するときは、DropDownListから目的のページ番号を選択します。移動ボタンには、4種類あります。ボタンをクリックすると、先頭ページを表示します。ボタンをクリックすると、前ページに移動します。ボタンをクリックすると、次ページに移動します。ボタンをクリックすると、最終ページに移動します。

 

先頭ページが表示されているときは、のボタンが使用不可になります。最終ページが表示されているときは、のボタンが使用不可になります。

 

DataGridから得意先を選択すると、右側のRepeaterに得意先の詳細が表示されます。

 

◆プログラムDataGridPaging.aspxのポイント

 

¶ポイント1 ページ番号とページ移動ボタンの両方を利用できるようにするには

 

Web Matrixのテンプレートを使用すれば、DataGridにページング機能を簡単に追加することができます。Web Matrixのテンプレートは、DataGridのページング機能を利用して実現しています。DataGridのページング機能は、ページ番号と移動ボタンのどちらかしか利用できません。DataGridのページ番号による移動では、すべてのページ番号を表示することができませんので、1回のクリックで目的のページに移動できません。移動ボタンでページを移動するときは、前ページと次ページの2種類のボタンしかサポートしていません。

 

このサンプルでは、ページ番号と移動ボタンの両方を同時に利用することができます。ページ番号で移動するときは、DropDownListにすべてのページ番号が表示されますので任意のページに1回のクリックで移動できます。移動ボタンでページを移動するときは、先頭ページ、前ページ、次ページ、最終ページの4種類のボタンを使用することができます。

 

 

¶ポイント2 ページ番号でページを移動するには

 

ページ番号を指定してページを移動するには、DataGridCurrentPageIndexプロパティに目的のページ番号を設定してDataBind()メソッドを実行します。CurrentPageIndexに設定するページ番号は、0から開始しますので注意してください。たとえば、2ページ目に移動するときは、1を設定します。

 

dgrdCustomers.CurrentPageIndex = PageNumber - 1

 

 

¶ポイント3 ページ移動ボタンで先頭ページ、最終ページに移動するには

 

ページ移動ボタンでDataGridの先頭ページに移動するには、DataGridCurrentPageIndexプロパティに0を設定してDataBind()メソッドを実行します。採集ページに移動するときは、CurrentPageIndexDataGridPageCountプロパティに格納されている総ページ数から-1した値を設定します。

 

dgrdCustomers.CurrentPageIndex = 0 (先頭ページに移動)

dgrdCustomers.CurrentPageIndex = dgrdCustomers.PageCount - 1 (最終ページに移動)

 

 

◆プログラムDataGridPaging.aspxの解説(HTML編)

 

DataGridPaging.aspxのプレゼンテーションコンテンツの部分について解説します。行171-218<table>…</table>では、ページ移動用のWebコントロールを定義しています。行174-185ImageButtonでは、先頭ページと前ページのボタンを定義しています。行186-196では、DropDownListLabelTextBoxを定義してページ番号を表示しています。DropDownListには、AutoPostBackプロパティにTrueを設定して、ページ番号を選択したときにWebページがポストバックされるようにしています。TextBoxReadOnlyプロパティには、Trueを設定して読み込み専用にしています。行197-208ImageButtonでは、次ページと最終ページのボタンを定義しています。行209-215では、LabelTextBoxで件数を表示しています。

 

ここで定義しているページ移動用のImageButonは、OnCommandイベントを共有しています。OnCommandイベントで、どのボタンがクリックされたか認識するために、CommandNameプロパティにfirstprevnextlastを設定しています。OnCommandイベントは、ImageButtonをクリックしたときに発生します。

 

ページ移動用のWebコントロール

 

228-267では、DataGridを定義しています。行229では、AutoGenerateColumnsプロパティにFalseを設定してカラムの自動生成機能を抑止しています。行233では、AllowPagingプロパティにTrueを設定してページング機能を有効にしています。行234では、PageSizeプロパティに10を設定して1ページに10行表示されるようにしています。

 

246-266<Columns>…</Columns>では、TemplateColumnBoundColumnを定義しています。TemplateColumnでは、ItemTemplateLinkButtonを定義しています。LinkButtonは、レコードセレクターとして使用します。BoundColumnでは、得意先テーブルの得意先名と都道府県をバインドしています。

 

DataGridに得意先テーブルを表示した例

 

271-308では、Repeaterを定義しています。Repeaterには、得意先の詳細を表示します。行272-307<ItemTemplate>…</ItemTemplate>では、得意先テーブルの得意先ID、得意先名、部署役職、電話番号、ファクスをバインドして表示しています。行276-303<fieldset>…</fieldset>では、角が丸みのあるボックスを定義しています。行278-281<tr>…</tr>では、得意先IDをバインドしています。得意先テーブルのフィールドをバインドするには、データ連結タグ<%#....%>を使用して記述します。後続する、<tr>…</tr>では、得意先名、部署役職、電話番号、ファックスをバインドしています。

 

Repeaterに得意先の詳細を表示した例

 

 

リスト DataGridPaging.aspxのソースコード(HTML編)

155: <html>
161: <body scroll="no">
170: <form runat="server">
171: <table>
172: <tr>
173:   <td>
174:     <asp:ImageButton id="ibtnFirst" runat="server"
175:       CommandName="first"
176:       OnCommand="ibtnCustomPaging_Command"
177:       Title="First"
179:       />
180:     <asp:ImageButton id="ibtnPrev" runat="server"
181:       CommandName="prev"
182:       OnCommand="ibtnCustomPaging_Command"
183:       Title="Prev"
185:       />

186:     <asp:DropDownList id="dropPages" runat="server"
187:       AutoPostBack="True"
189:       OnSelectedIndexChanged="dropPages_SelectedIndexChanged" />
190:     <asp:Label runat="server"
191:       CssClass="pageNumber"
192:       Text="/" />
193:     <asp:TextBox id="txtPages" runat="server"
195:       Columns="3"
196:       ReadOnly="True" />

197:     <asp:ImageButton id="ibtnNext" runat="server"
198:       CommandName="next"
199:       OnCommand="ibtnCustomPaging_Command"
200:       Title="Next"
202:       />
203:     <asp:ImageButton id="ibtnLast" runat="server"
204:       CommandName="last"
205:       OnCommand="ibtnCustomPaging_Command"
206:       Title="Last"
208:       />
209:     <asp:Label id="lblRows" runat="server"
210:       Text="
件数"
211:       />
212:     <asp:TextBox id="txtRows" runat="server"
214:       Columns="3"
215:       ReadOnly="True" />
216:   </td>
217: </tr>
218: </table>
228: <asp:DataGrid id="dgrdCustomers" runat="server"
229:   AutoGenerateColumns="False"
230:   OnItemCommand="dgrdCustomers_ItemCommand"
231:   OnItemDataBound="dgrdCustomers_ItemDataBound"
233:   AllowPaging="True"
234:   PageSize="10"
235:   OnPageIndexChanged="dgrdCustomers_PageIndexChanged"
240:   EnableViewState="True">
        
・・・

246:   <Columns>
247:     <asp:TemplateColumn
248:       HeaderText="<div class='dgrdHeaderBox'>1</div>">
249:       <ItemTemplate>
250:         <asp:LinkButton id="lbtnSelect" runat="server"
251:           CommandName="Select"
252:           Text="<div class='dgrdItemArrow'>4</div>"
253:           Visible="True" />
254:       </ItemTemplate>
257:     </asp:TemplateColumn>
258:     <asp:BoundColumn
259:       DataField="CompanyName"
260:       HeaderText="<div class='dgrdHeader'>
得意先名</div>">
261:     </asp:BoundColumn>
262:     <asp:BoundColumn
263:       DataField="Ken"
264:       HeaderText="<div class='dgrdHeader'>
都道府県</div>">
265:     </asp:BoundColumn>
266:   </Columns>
267: </asp:DataGrid>
271: <asp:Repeater id="rptCustomer" runat="server">
272:   <ItemTemplate>
273:     <table >
274:     <tr>
275:     <td style="background-color:whitesmoke">
276:       <fieldset>
277:         <table border="0" cellPadding="3" cellSpacing="8">
278:         <tr>
279:           <td class="header">ID</td>
280:           <td class="text"> <%# Container.DataItem("CustomerID") %> </td>
281:         </tr>
             
・・・

302:         </table>
303:       </fieldset>
304:     </td>
305:     </tr>
306:     </table>
307:   </ItemTemplate>
308: </asp:Repeater>
312: </form>
313: </body>
313: </html>

 

 

◆プログラムDataGridPaging.aspxの解説(コード編)

 

DataGridPaging.aspxは、DataGridのページング機能をカスタマイズして使い勝手を改善しています。ページ移動ボタンをクリックしたときは、ImageButtonOnCommandイベントでDataGridCurrentPageIndexプロパティを書き換えてページを移動します。DropDownListからページ番号を選択したときは、OnSelectedIndexChangedイベントでCurrentPageIndexにページ番号を設定して目的のページに移動します。

 

Sub Page_Load()イベントの処理

 

このイベントは、DataGridPaging.aspxがロードされたときに実行されます。このイベントでは、DataGridに得意先テーブルをバインドします。

 

7-10If…End Ifでは、ページが最初にロードされたか調べています。ページが最初にロードされたときは、BindDataGrid()を呼び出して、DataGridに得意先テーブルをバインドします。このサンプルでは、DataGridのページング機能を使用しませんので、DataGridPagerStyleVisibleプロパティにFalseを設定します。この場合、DataGridにページ移動用の行(Pager)が表示されません。

 

  6: Sub Page_Load()
  7:   If Not IsPostBack Then
  8:     BindDataGrid()
  9:     dgrdCustomers.PagerStyle.Visible = False
 10:   End If
 11: End Sub

 

 

Sub dgrdCustomers_ItemDataBound()イベントの処理

 

このイベントは、DataGridDataBind()メソッドが実行されたときに発生します。このイベントでは、DataGridのアイテム(DataGridItem)にクライアント側で動作するonClickイベントを登録しています。これにより、DataGridの任意のセルをクリックして行を選択できるようになります。

 

17: Sub dgrdCustomers_ItemDataBound(s As Object, e As DataGridItemEventArgs)
 18:   Dim lit As ListItemType = e.Item.ItemType
 19:
 20:   If lit = ListItemType.Item OrElse _
 21:     lit = ListItemType.AlternatingItem OrElse _
 22:     lit = ListItemType.SelectedItem Then
 23:     Dim lbtn As LinkButton = CType(e.Item.FindControl("lbtnSelect"), LinkButton)
 24:     e.Item.Attributes("onClick") = GetPostBackClientHyperlink(lbtn, "")
 25:     e.Item.Style("cursor") = "hand"
 26:   End If
 27: End Sub

 

 

Sub dgrdCustomers_ItemCommand()イベントの処理

 

このイベントは、DataGridから行をクリックしたときに発生します。このイベントでは、DataGridから選択した得意先の詳細をRepeaterに表示します。

 

31では、DataGridDataKeysコレクションから、選択した行の主キー(得意先ID)を取得しています。行32では、BindRepeater()を呼び出してRepeaterに得意先の詳細を表示します。BindRepeaterの引数には、得意先IDを指定します。

 

29: Sub dgrdCustomers_ItemCommand(s As Object, e As DataGridCommandEventArgs)
 30:   If e.CommandName = "Select" Then
 31:     Dim intCustomerID As Integer = dgrdCustomers.DataKeys(e.Item.ItemIndex)
 32:     BindRepeater(intCustomerID)
 33:   End If
 34: End Sub

 

 

Sub dgrdCustomers_PageIndexChanged()イベントの処理

 

このイベントは、DataGridのページ移動行(Pager)からページ番号、ページ移動ボタンをクリックしたときに発生します。このイベントではDataGridに、ページ移動行から選択したページを表示します。このサンプルでは、DataGridのページ移動行(Pager)を非可視状態にしていますので、このイベントは発生しません。

 

dgrdCustomers.PagerStyle.Visible = False

 

61: Sub dgrdCustomers_PageIndexChanged(s As Object, e As DataGridPageChangedEventArgs)
 62:   dgrdCustomers.CurrentPageIndex = e.NewPageIndex
 63:   BindDataGrid()
 64: End Sub

 

 

Sub ibtnCustomPaging_Command()イベントの処理

 

このイベントは、DataGridの上に表示されているページ移動ボタンをクリックしたときに発生します。このイベントでは、どのボタンがクリックされたか調べてボタンに対応したページを表示します。

 

37では、ImageButtonCommadNameプロパティに設定されている値を取得しています。CommandNameプロパティには、firstprevnextlastが格納されています。

 

38-51Select…End Selectでは、CommandNameの値に対応してDataGridCurrentPageIndexプロパティを書き換えます。先頭ページのボタンをクリックしたときは、CurrentPageIndex0を設定します。前ページのボタンをクリックしたときは、CurrentPageIndex-1します。ただし、CurrentPageIndex0のときは書き換えません。次ページのボタンをクリックしたときは、CurrentPageIndex+1します。ただし、CurrentPageIndexが最終ページのときは書き換えません。最終ページのボタンをクリックしたときは、CurrentPageIndexに最終ページ番号を設定します。

 

52では、BindDataGrid()を呼び出してCurrentPageIndexに設定されているページを表示します。

 

36: Sub ibtnCustomPaging_Command(s As Object, e As CommandEventArgs)
 37:   Dim strDirection As String = e.CommandName
 38:   Select Case strDirection
 39:     Case "first"
 40:       dgrdCustomers.CurrentPageIndex = 0
 41:     Case "prev"
 42:       If dgrdCustomers.CurrentPageIndex > 0 Then
 43:         dgrdCustomers.CurrentPageIndex -= 1
 44:       End If
 45:     Case "next"
 46:       If dgrdCustomers.CurrentPageIndex < (dgrdCustomers.PageCount - 1) Then
 47:         dgrdCustomers.CurrentPageIndex += 1
 48:       End If
 49:     Case "last"
 50:       dgrdCustomers.CurrentPageIndex = dgrdCustomers.PageCount - 1
 51:   End Select
 52:   BindDataGrid()
 53: End Sub

 

 

Sub dropPages_SelectedIndexChanged()イベントの処理

 

このイベントは、DropDownListからページ番号を選択したときに発生します。このイベントでは、DropDownListから選択したページ番号をDataGridCurrentPageIndexプロパティに設定してページを移動します。

 

56では、DropDownListSelectedItem.Textプロパティから、選択したページ番号を取得しています。行57では、取得したページ番号をCurrentPageIndexに設定しています。CurrentPageIndexのページ番号は、0から始まりますのでDropDownListから取得したページ番号を-1しています。行58では、BindDataGrid()を呼び出してCurrentPageIndexに設定されているページを表示します。

 

55: Sub dropPages_SelectedIndexChanged(s As Object, e As EventArgs)
 56:   Dim intNewPageIndex As Integer = Int32.Parse(dropPages.SelectedItem.Text)
 57:   dgrdCustomers.CurrentPageIndex = intNewPageIndex - 1
 58:   BindDataGrid()
 59: End Sub

 

 

Sub BindDataGrid()の処理

 

このサブプロシージャでは、DataGridに得意先テーブルをバインドして表示します。BindDataGridは、Page_LoaddropPages_SelectedIndexChangedibtnCustomPaging_Commandイベントから呼ばれます。

 

67では、得意先テーブルからレコードを抽出するSQLを生成しています。行68では、CreateDataSet()関数を呼び出して得意先テーブルのDataSetを作成しています。

 

69-74With…End Withでは、DataGridに得意先テーブルのDataViewをバインドしています。行70では、DataGridDataSourceプロパティに得意先テーブルのDataViewを設定しています。行71では、DataKeyFieldプロパティに得意先テーブルの主キーのカラム(得意先ID)を設定しています。行72では、DataBind()メソッドでDataViewをバインドしています。行73では、SelectedIndexプロパティに-1を設定して以前に選択された行を解除しています。

 

76-79With…End Withでは、RepeaterDataSourceプロパティにNothingを設定して初期化しています。

 

81-85With…End Withでは、DropDownListにページ番号(1から最終ページまで)をバインドして表示します。DropDownListDataSourceプロパティには、CreatePageArray()関数で作成したArrayListを設定してバインドします。行84では、DropDownListSelectedIndexプロパティにDataGridCurrentPageIndexを設定してカレントのページが選択された状態にします。

 

86では、TextBoxに総ページ数を設定します。総ページ数は、DataGridPageCountプロパティに格納されています。行87では、TextBoxにレコード件数を設定します。レコード件数は、DataTableRowsコレクションのCountプロパティに格納されています。

 

88では、SetButtons()を呼び出してページ移動ボタンを条件付で使用可能にします。

 

66: Sub BindDataGrid()
 67:   Dim strSQL As String = "Select * From Customers"
 68:   Dim ds AS DataSet = CreateDataSet(strSQL)
 69:   With dgrdCustomers
 70:     .DataSource = ds.Tables(0).DefaultView()
 71:     .DataKeyField = "CustomerID"
 72:     .DataBind()
 73:     .SelectedIndex = -1
 74:   End With
 75:
 76:   With rptCustomer
 77:     .DataSource = Nothing
 78:     .DataBind()
 79:   End With
 80:
 81:   With dropPages
 82:     .DataSource = CreatePageArray()
 83:     .DataBind()
 84:     .SelectedIndex = dgrdCustomers.CurrentPageIndex
 85:   End With
 86:   txtPages.Text = dgrdCustomers.PageCount.ToString()
 87:   txtRows.Text = ds.Tables(0).Rows.Count.ToString()
 88:   SetButtons()
 89: End Sub

 

 

Sub BindRepeater()の処理

 

このサブプロシージャでは、Repeaterに得意先の詳細を表示します。BindRepeaterは、DataGridの行を選択したときにOnItemCommandイベントから呼ばれます。

 

116-117では、得意先テーブルから、選択したレコードを抽出するSQLを生成しています。行118-121With…End Withでは、RepeaterDataSourceプロパティにCreateDataReader()関数で作成したDataReaderを設定しています。行120では、RepeaterDataBind()メソッドでDataReaderをバインドしています。

 

115: Sub BindRepeater(intCustomerID As Integer)
116:   Dim strSQL As String = "Select * From Customers " & _
117:     "Where CustomerID=" & intCustomerID.ToString
118:   With rptCustomer
119:     .DataSource = CreateDataReader(strSQL)
120:     .DataBind()
121:   End With             
122: End Sub

 

 

Sub SetButtons()の処理

 

このサブプロシージャは、ページ移動ボタンのEnabledプロパティをTrue/Falseに再設定します。SetButtonsは、BindDataGrid()から呼ばれます。

 

92-99では、ImageButtonImageUrlプロパティとEnabledプロパティを初期化しています。行102-105では先頭ページを表示するとき、先頭ページと前ページのボタンを使用不可にしています。行107-110では最終ページを表示するとき、次ページと最終ページのボタンを使用不可にしています。

 

91: Sub SetButtons()
 92:   ibtnFirst.imageurl = "../img/first.gif"
 93:   ibtnPrev.imageurl = "../img/prev.gif"             
 94:   ibtnNext.imageurl = "../img/next.gif"
 95:   ibtnLast.imageurl = "../img/last.gif"
 96:   ibtnFirst.Enabled = True
 97:   ibtnPrev.Enabled = True
 98:   ibtnNext.Enabled = True
 99:   ibtnLast.Enabled = True
100:   With dgrdCustomers
101:     If .CurrentPageIndex = 0 Then
102:       ibtnFirst.imageurl = "../img/firstoff.gif"
103:       ibtnPrev.imageurl = "../img/prevoff.gif"
104:       ibtnFirst.Enabled = False
105:       ibtnPrev.Enabled = False
106:     ElseIf .CurrentPageIndex = .PageCount-1 Then
107:       ibtnNext.imageurl = "../img/nextoff.gif"
108:       ibtnLast.imageurl = "../img/lastoff.gif"
109:       ibtnNext.Enabled = False
110:       ibtnLast.Enabled = False
111:     End If
112:   End With
113: End Sub

 

 

Function CreatePageArray()関数の処理

 

この関数は、DataGridのページ番号が格納されているArrayList()を作成して返します。CreatePageArrayは、BindDataGrid()から呼ばれます。

 

124: Function CreatePageArray() As ArrayList
125:   Dim arrPages As New ArrayList
126:   Dim intPage As Integer
127:
128:   For intPage = 1 To dgrdCustomers.PageCount
129:     arrPages.Add(intPage)
130:   Next
131:   Return arrPages
132: End Function

 

 

Function CreateDataReader()関数の処理

 

この関数は、データベースからレコードを抽出してDataReaderを作成して返します。CreateDataReaderは、BindRepeater()から呼ばれます。CreateDataReaderの引数には、strSQLstrConnectionStringを指定します。strSQLには、データベースからレコードを抽出するSELECTステートメントを指定します。strConnectionStringには、Web.Configに登録されている<add>タグのkeyを指定します。strConnectionStringを省略したときは、デフォルトとしてconStringAccNwを使用します。

 

<add key="conStringAccNw"

  value="PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA Source=C:\WebMatrix\webdb\Nwind.mdb" />

 

134: Function CreateDataReader(strSQL As String, _
135:   Optional strConnectionString As String = "conStringAccNw") As OleDbDataReader
136:   Dim con As New OleDbConnection( _
137:     ConfigurationSettings.AppSettings(strConnectionString))
138:   Dim cmd As New OleDbCommand(strSQL, con)
139:   con.Open()
140:   Return cmd.ExecuteReader(CommandBehavior.CloseConnection)
141: End Function

 

 

Function CreateDataSet()関数の処理

 

この関数は、データベースからレコードを抽出してDataSetを作成して返します。CreateDataSetは、BindDataGrid()から呼ばれます。CreateDataSetのの引数には、strSQLstrConnectionStringを指定します。strSQLには、データベースからレコードを抽出するSELECTステートメントを指定します。strConnectionStringには、Web.Configに登録されている<add>タグのkeyを指定します。strConnectionStringを省略したときは、デフォルトとしてconStringAccNwを使用します。

 

<add key="conStringAccNw"

  value="PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA Source=C:\WebMatrix\webdb\Nwind.mdb" />

 

143: Function CreateDataSet(strSQL As String, _
144:   Optional strConnectionString As String = "conStringAccNw") As DataSet
145:   Dim con As New OleDbConnection( _
146:     ConfigurationSettings.AppSettings(strConnectionString))
147:   Dim da As New OleDbDataAdapter(strSQL, con)
148:   Dim ds As New DataSet()
149:   da.Fill(ds)
150:   Return ds
151: End Function

 

 

リスト DataGridPaging.aspxのソースコード(コード編)

  1: <%@ Page language="vb" %>
  2: <%@ Import Namespace="System.Data" %>
  3: <%@ Import Namespace="System.Data.OleDb" %>
  4:
  5: <script language="vb" runat="server">
  6: Sub Page_Load()
 11: End Sub
 12:
 13: Sub dgrdCustomers_ItemCreated(s As Object, e As DataGridItemEventArgs)
 15: End Sub
 16:
 17: Sub dgrdCustomers_ItemDataBound(s As Object, e As DataGridItemEventArgs)
 27: End Sub
 28:
 29: Sub dgrdCustomers_ItemCommand(s As Object, e As DataGridCommandEventArgs)
 34: End Sub
 35:
 36: Sub ibtnCustomPaging_Command(s As Object, e As CommandEventArgs)
 53: End Sub
 54:
 55: Sub dropPages_SelectedIndexChanged(s As Object, e As EventArgs)
 59: End Sub
 60:
 61: Sub dgrdCustomers_PageIndexChanged(s As Object, e As DataGridPageChangedEventArgs)
 64: End Sub
 65:
 66: Sub BindDataGrid()
 89: End Sub
 90:
 91: Sub SetButtons()
113: End Sub

114:
115: Sub BindRepeater(intCustomerID As Integer)
122: End Sub
123:
124: Function CreatePageArray() As ArrayList
132: End Function
133:
134: Function CreateDataReader(strSQL As String, _
135:   Optional strConnectionString As String = "conStringAccNw") As OleDbDataReader
141: End Function
142:
143: Function CreateDataSet(strSQL As String, _
144:   Optional strConnectionString As String = "conStringAccNw") As DataSet
151: End Function
153: </script>

 

ASP.NET DataGrid2のホームへ戻る