DataGridにレコードを選択する機能を追加したサンプル

 

DataGridにレコードを選択する機能を追加したサンプル

 

このサンプルは、DataGridから得意先を選択してRepeaterに詳細を表示します。DataGridから得意先を選択するには、レコードセレクターか得意先名をクリックします。得意先を選択すると、DataGridの右側のRepeaterに得意先の詳細が表示されます。

 

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

 

¶ポイント1 任意の場所をクリックして行を選択するには

 

DataGridにアイテムを選択する機能を付加するには、ButtonColumnを使用します。たとえば、DataGridに以下のようなカラムを追加して、選択ボタンをクリックするとその行が選択された状態になります。CommandNameプロパティにSelectを設定することに注意してください。

 

<Columns>

  <asp:ButtonColumn

    Text="選択"

    ButtonType="PushButton"

    CommandName="Select" />

</Columns>

 

ところが、選択ボタン以外のカラムをクリックすると行が選択されません。ここで解説するサンプルは、任意のカラムをクリックしたときにも、行を選択することができます。この機能を実現するには、DataGridの行(DataGridItem)にクライアント側で動作する、onClickイベントを登録します。onClickイベントでは、Webページをポストバックさせて、選択ボタンをクリックしたときと同じ動作をさせます。クライアント側で動作するonClickイベントからWebページをポストバックさせるには、GetPostBackClientHyperlink()メソッドを使用してJavaScriptを生成します。DataGridItemにクライアント側で動作するonClickイベントを登録するには、DataGridOnItemDataBoundイベントで行います。

 

Dim lbtn As LinkButton = CType(e.Item.FindControl("lbtnSelect"), LinkButton)

e.Item.Attributes("onClick") = GetPostBackClientHyperlink(lbtn, "")

 

¶ポイント2 テキストに影を付けて表示するには

 

このサンプルでは、Webページにプログラム名を表示するときテキストを影付で表示しています。テキストに影を付けるには、CSSfilterプロパティの値にshadow()を指定します。

 

td.shadow {

filter:shadow(color=#cccccc)

}

<td class="shadow">
  <h3>DataGridSelectingRow.aspx</h3>
</td>

 

 

¶ポイント3 DataGridのヘッダをボタンのように表示するには

 

このサンプルでは、DataGridのヘッダをボタンのように浮き出た状態で表示しています。ヘッダをボタンのように表示するには、CSSborder-styleプロパティにoutsetを設定します。

 

.dgrdHeader {

border-style:outset;

background-color:gainsboro;

color:black

}

<asp:BoundColumn

  HeaderText="<div class='dgrdHeader'>得意先名</div>"

  DataField="CompanyName" />

 

 

¶ポイント4 角が丸みのあるボックスを表示するには

 

HTML<fieldset>…</fieldset>を使用すると、ボックスの角に丸みを持たせることができます。ボックスに凡例を表示するには<legend>…</legend>を使用します。

 

<fieldset>

  <legend>

    [凡例]

  </legend>

</fieldset>

 

 

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

 

ここでは、プログラムのHTML編を解説します。行71-74<head>…</head>内には、<title><link>が記述されています。<title>…</title>で記述された内容は、ブラウザのタイトルバーに表示されます。<link>では、cssディレクトリに格納されているCSS(Cascading Style Sheets)の外部ファイルを取り込んでいます。外部ファイルdataGrid.cssには、HTMLタグやWebコントロールに対して前景色、背景色などのプロパティを定義しています。

 

73: <link rel="stylesheet" href="../css/dataGrid.css">

 

CSSの外部ファイルdataGrid.cssの内容

 

77-83<table>…</table>では、.aspxのファイル名に影を付けて表示しています。行79<td>には、class=CSSのクラスshadowを指定しています。このクラスには、filter:shadow(color=#cccccc)のようなCSSが定義されています。行80<h3>…</h3>では、テキストを表示しています。<h3>には、h3{color:lightcyan;}のようなCSSが定義されています。これで、テキストが浮き出たように表示されます。

 

79:   <td class="shadow">
 80:     <h3>DataGridSelectingRow.aspx</h3>
 81:   </td>

 

テキストを影付で表示した例

 

95-125では、DataGridを定義しています。このDataGridには、レコードセレクターと得意先名を表示します。

 

DataGridにレコードセレクターと得意先名表示

 

96では、AutoGenerateColumnsプロパティにFalseを設定して、カラムの自動生成機能を抑止しています。行102CssClassプロパティには、dgrdShadowを設定してDataGridに影を付けています。行108-124<Columns>…</Columns>では、TemplateColumnBoundColumnを定義しています。行109-119TemplateColumnでは、ItemTemplateLinkButtonを定義しています。行110では、TemplateColumnHeaderTextプロパティに、「<div class='dgrdHeaderBox'>1</div>」を設定しています。CSSのクラスdgrdHeaderBoxでは、font-familyプロパティにWebdingsを設定していますので数字の1は、のように表示されます。

 

.dgrdHeaderBox {

border-style:outset;

background-color:gainsboro;

color:black;

font-family:Webdings;

font-size:9pt;

}

 

111-116では、ItemTemplateLinkButtonを定義しています。行113では、LinkButtonCommandNameプロパティにSelectを設定しています。Selectを設定すると、LinkButtonをクリックしたときにその行が選択された状態になり、行107SelectedItemStyleが適用されます。CssClassdgrdSelectedItemStyleでは、background-colorプロパティにSteelBlueを設定していますので、選択行の背景色が「はがね色(暗青灰色)」で表示されます。

 

.dgrdSelectedItemStyle {

background-color: SteelBlue;

color: White;

font-size: x-small;

}

 

114では、LinkButtonTextプロパティに、「<div class='dgrdItemArrow'>4</div>」を設定しています。CSSのクラスdgrdItemArrowでは、font-familyプロパティにWebdingsを設定していますので数字の4は、(iconSelector.gif)のように表示されます。

 

.dgrdItemArrow {

border-style:outset;

background-color:gainsboro;

color:black;

font-family:Webdings;

font-size:9pt;

}

 

117-118ItemStyleでは、LinkButtonButtonコントロールのように表示させています。

 

120-123BoundColumnでは、得意先テーブルの得意先名をバインドしています。行121HeaderTextプロパティに、「<div class='dgrdHeader'>得意先名</div>」を設定していますので、DataGridのヘッダがボタンのように表示されます。

 

.dgrdHeader {

border-style:outset;

background-color:gainsboro;

color:black

}

 

122DataFieldプロパティには、得意先テーブルの得意先名のカラムCompanyNameを設定しています。

 

128-165では、Repeaterを定義しています。行129-164ItemTemplateでは、<table>のセルに得意先テーブルの得意先ID、得意先名、担当者名、部署役職、電話番号、ファックスをバインド(連結)しています。得意先テーブルのカラム(フィールド)をバインドするには、データ連結タグ<%# …. %>を使用します。

 

<%# Container.DataItem("CustomerID") %>

 

133-160<fieldset>…</fieldset>は、角が丸みのあるボックスを表示します。

 

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

 

 

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

70: <html>
 71: <head>
 72:   <title>DataGridSelectingRow.aspx</title>
 73:   <link rel="stylesheet" href="../css/dataGrid.css">
 74: </head>
 75:
 76: <body>
 77: <table cellSpacing="2" cellPadding="2" class="title">
 78: <tr>
 79:   <td class="shadow">
 80:     <h3>DataGridSelectingRow.aspx</h3>
 81:   </td>
 82: </tr>
 83: </table>
 84:
 85: <form runat="server">
 86: <p>
 87: <table border="0" cellPadding="0" cellSpacing="0">
 88: <tr>
 89: <td colspan="2">
 90: </td>
 91: </tr>
 92:
 93: <tr>
 94: <td valign="top" style="width:130">
 95:   <asp:DataGrid id="dgrdCustomers" runat="server"
 96:     AutoGenerateColumns="False"
 97:     OnItemCommand="dgrdCustomers_ItemCommand"
 98:     OnItemDataBound="dgrdCustomers_ItemDataBound"
 99:     BorderColor="gainsboro"
100:     GridLines="Vertical"
101:     CellPadding="0"
102:     CssClass="dgrdShadow"
103:     EnableViewState="True">
104:     <HeaderStyle CssClass="dgrdHeaderStyle" />
105:     <ItemStyle CssClass="dgrdItemStyle" />
106:     <AlternatingItemStyle CssClass="dgrdAlternatingItemStyle" />
107:     <SelectedItemStyle CssClass="dgrdSelectedItemStyle" />
108:     <Columns>
109:       <asp:TemplateColumn
110:         HeaderText="<div class='dgrdHeaderBox'>1</div>">
111:         <ItemTemplate>
112:           <asp:LinkButton id="lbtnSelect" runat="server"
113:             CommandName="Select"
114:             Text="<div class='dgrdItemArrow'>4</div>"

115:             Visible="True" />
116:         </ItemTemplate>
117:         <ItemStyle CssClass="recSelector"
118:           HorizontalAlign="Center" />
119:       </asp:TemplateColumn>
120:       <asp:BoundColumn ItemStyle-Width="180"
121:         HeaderText="<div class='dgrdHeader'>
得意先名</div>"
122:         DataField="CompanyName">
123:       </asp:BoundColumn>
124:     </Columns>
125:   </asp:DataGrid>
126: </td>
127: <td valign="top">
128:   <asp:Repeater id="rptCustomer" runat="server">
129:     <ItemTemplate>
130:     <table >
131:     <tr>
132:       <td style="background-color:whitesmoke">
133:       <fieldset>
134:       <table border="0" cellPadding="3" cellSpacing="8">
135:       <tr>
136:         <td class="header">ID</td>
137:         <td class="text"> <%# Container.DataItem("CustomerID") %> </td>
138:       </tr>
139:       <tr>
140:         <td class="header">
得意先名</td>
141:         <td class="text"> <%# Container.DataItem("CompanyName") %> </td>
142:       </tr>
143:       <tr>
144:         <td class="header">
担当者名</td>
145:         <td class="text"> <%# Container.DataItem("ContactName") %> </td>
146:       </tr>
147:       <tr>
148:         <td class="header">
部署役職</td>
149:         <td class="text"> <%# Container.DataItem("ContactTitle") %> </td>
150:       </tr>
151:       <tr>
152:         <td class="header">
電話番号</td>
153:         <td class="text"> <%# Container.DataItem("Phone") %> </td>
154:       </tr>
155:       <tr>
156:         <td class="header">
ファックス</td>
157:         <td class="text"> <%# Container.DataItem("Fax") %> </td>
158:       </tr>
159:       </table>
160:       </fieldset>
161:       </td>
162:     </tr>
163:     </table>
164:     </ItemTemplate>
165:   </asp:Repeater>
166: </td>
167: </tr>
168: </table>
169: </form>
170: </body>
170: </html>

 

 

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

 

ここでは、プログラムのコード編を解説します。このプログラムは、Page_LoadなどのイベントとSub/Functionから構成されています。ASP.NETのプログラムは、Windowsのプログラムと同様イベントドリブン型の構造になっています。WebページがロードされるとPage_Loadイベントが発生します。Page_Loadイベントでは、通常Webページの初期化を行っています。

 

ASP.NETのプログラムを理解するには、最初にPage_Loadイベントを解析します。次に、ButtonDataGridなどWebコントロールのイベントを解析していきます。なお、イベントには、クライアント側のブラウザで実行されるものと、Webサーバ側で実行されるものがありますの注意してください。

 

Sub Page_Load()イベントの処理

 

このイベントでは、BindDataGrid()を呼び出してDataGridに得意先テーブルを表示します。このイベントは、ページがロードされたときに発生します。

 

7-9If…End Ifでは、ページが最初にロードされたか調べています。最初にロードされたときは、BindDataGrid()を呼びます。BindDataGrid()は、DataGridに得意先テーブルをバインドします。

 

6: Sub Page_Load()
  7:   If Not IsPostBack Then
  8:     BindDataGrid()
  9:   End If
 10: End Sub

 

 

Sub dgrdCustomers_ItemDataBound()イベントの処理

 

このイベントでは、DataGridItem(DataGridItem)にクライアント側で動作するonClickイベントを登録します。onClickイベントでは、マウスで行をクリックしたときにWebページをポストバックします。DataGridOnItemDataBoundイベントは、DataGridDataBind()メソッドを実行したときに発生します。

 

40-46If…End Ifでは、ItemTypeItemAlternatingItemSeletedItemか調べています。行43では、Item(DataGridItem)FindControl()メソッドでLinkButtonを検索しています。TemplateColumnに定義されたコントロールは、セルを直接参照しないでFindControl()メソッドで検索します。行44では、Item(DataGridItem)Attributesコレクションにクライアント側で動作するonClickイベントを登録しています。onClickイベントが発生したときに実行されるJavaScriptは、Page.GetPostBackClientHyperlink()メソッドで生成しています。このメソッドは、WebページをポストバックさせるJavaScriptを生成します。このメソッドの引数には、ポストバックされてときに実行されるWebコントロールとパラメータを指定します。

 

45では、Item(DataGridItem)StyleコレクションにCSScursor:handを追加しています。このスタイルを設定すると、DataGridの行にマウスを移動したときに、マウスが「手」の形に変化します。

 

43:     Dim lbtn As LinkButton = CType(e.Item.FindControl("lbtnSelect"), LinkButton)
 44:     e.Item.Attributes("onClick") = GetPostBackClientHyperlink(lbtn, "")
 45:     e.Item.Style("cursor") = "hand"

 

ItemAttributesStyleコレクションに追加したonClickcursorは、以下のように生成されます。

 

<tr class="dgrdItemStyle"

  onClick="javascript:__doPostBack('dgrdCustomers:_ctl2:lbtnSelect','')"

  style="cursor:hand;">

  <td class="recSelector" align="Center">

    <a id="dgrdCustomers__ctl2_lbtnSelect"

      href="javascript:__doPostBack('dgrdCustomers:_ctl2:lbtnSelect','')"

      style="width:10px;">

      <div class='dgrdItemArrow'>4</div>

    </a>

  </td>

  <td style="width:180px;">喫茶たいむましん</td>

<tr>

 

 

38: Sub dgrdCustomers_ItemDataBound(s As Object, e As DataGridItemEventArgs)
 39:   Dim lit As ListItemType = e.Item.ItemType
 40:   If lit = ListItemType.Item OrElse _
 41:     lit = ListItemType.AlternatingItem OrElse _
 42:     lit = ListItemType.SelectedItem  Then
 43:     Dim lbtn As LinkButton = CType(e.Item.FindControl("lbtnSelect"), LinkButton)
 44:     e.Item.Attributes("onClick") = GetPostBackClientHyperlink(lbtn, "")
 45:     e.Item.Cells(1).Style("cursor") = "hand"
 46:   End If
 47: End Sub

 

 

Sub dgrdCustomers_ItemCommand()イベントの処理

 

このイベントでは、DataGridから選択した行の詳細を表示します。このイベントは、DataGridから行をクリックしたときに発生します。DataGridから行をクリックすると、クライアント側で動作するonClickイベントが実行されてWebページがポストバックされます。Webページがポストバックされると、OnItemCommandイベントに制御が渡ります。

 

32では、DataGridDataKeysコレクションから選択した行の主キー(得意先ID)を取得しています。DataGridの行を選択するとDataGridSelectedIndexプロパティに、選択した行のインデックス番号が自動的に設定されます。SelectedIndexにインデックス番号が設定される、その行は選択行となりSelectedItemStyleが適用されます。このサンプルでは、選択行の背景色が「はがね色(暗青灰色)」で表示されます。行34では、BindRepeater()を呼び出してRepeaterに得意先の詳細を表示します。BindRepeater()の引数には、得意先IDを指定します。

 

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

36: End Sub

 

 

Sub BindDataGrid()の処理

 

このサブプロシージャでは、得意先テーブルのDataReaderを作成してDataGridにバインドします。BindDataGridは、Page_Loadイベントからページが最初にロードされたときに呼ばれます。

 

13では、得意先テーブルの先頭から10件のレコードを抽出するSQLを生成しています。行14-18With…End Withでは、DataGridに得意先テーブルをバインドしています。行15では、DataGridDataSourceプロパティにCreateDataReader()関数の戻り値を設定しています。CreateDataReader()からは、戻り値として得意先テーブルのDataReaderオブジェクトが返されます。行16では、DataGridDataKeyFieldプロパティに、得意先テーブルの主キー(得意先ID)を設定しています。ここで設定した得意先IDは、DataGridからアイテムを選択したときに使用します。行17では、DataGridDataBind()メソッドで、DataReaderをバインドします。

 

12: Sub BindDataGrid()
 13:   Dim strSQL As String = "Select top 10 * From Customers"
 14:   With dgrdCustomers
 15:     .DataSource = CreateDataReader(strSQL)
 16:     .DataKeyField = "CustomerID"
 17:     .DataBind()
 18:   End With

19: End Sub

 

 

Sub BindRepeater()の処理

 

このサブプロシージャでは、得意先テーブルから特定のレコードを抽出してRepeaterにバインドします。BindRepeaterは、DataGridOnItemCommandイベントから呼ばれます。

 

22-23では、得意先テーブルからレコードを抽出するSQLを生成しています。このSQLには、WHERE句でCustomerID=が指定されていますので、DataGridから選択した得意先が抽出されます。行24-27With…End Withでは、Repeaterに得意先テーブルをバインドして表示しています。行25では、RepeaterDataSourceプロパティにCreateDataReader()関数の戻り値を設定しています。CreateDataReader()からは、得意先テーブルのDataReaderオブジェクトが返されます。行26では、RepeaterDataBind()メソッドで、DataReaderをバインドしています。これで、Repeaterに得意先の詳細が表示されます。

 

21: Sub BindRepeater(intCustomerID As Integer)
 22:   Dim strSQL As String = "Select * From Customers " & _
 23:     "Where CustomerID=" & intCustomerID.ToString
 24:   With rptCustomer
 25:     .DataSource = CreateDataReader(strSQL)
 26:     .DataBind()
 27:   End With
 28: End Sub

 

 

Function CreateDataReader()関数の処理

 

この関数は、DataReaderを生成して返します。CreateDataReaderは、BindDataGrid()BindRepeater()から呼ばれます。

 

51-52では、Connectionのインスタンスを生成しています。Connectionの引数には、Web.Configに登録されているデータベースの接続文字列を指定しています。Web.Configに登録されている内容を取得するには、ConfigurationSettingsAppSettings()メソッドを使用します。AppSettings()メソッドの引数には、<add>タグのkeyを指定します。

 

51:   Dim con As New OleDbConnection( _
 52:     ConfigurationSettings.AppSettings("conStringAccNw"))

 

<appSettings>

  <add key="conStringAccNw"

   value="PROVIDER=Microsoft.Jet.OLEDB.4.0;

DATA Source=C:\WebMatrix\webdb\Nwind.mdb" />

</appSettings>

 

53では、Commandのインスタンスを生成しています。Commandの引数には、SQLConnectionオブジェクトを指定しています。

 

54では、ConnectionOpen()メソッドでNwind.mdbデータベースを開いています。行55では、CommandExecuteReader()メソッドでSQLSELECTステートメントを実行して得意先テーブルからレコードを読み込んでDataReaderを作成します。ExecuteReader()の引数に、CommandBehavior.CloseConnectionを指定すると、DataReaderが解放されたときに、ConnectionClose()メソッドを実行してNwind.mdbデータベースを閉じます。

 

 

49: Function CreateDataReader(strSQL As String, _
 50:   Optional strConnectionString As String = "conStringAccNw") As OleDbDataReader
 51:   Dim con As New OleDbConnection( _
 52:     ConfigurationSettings.AppSettings(strConnectionString))
 53:   Dim cmd As New OleDbCommand(strSQL, con)
 54:   con.Open()
 55:   Return cmd.ExecuteReader(CommandBehavior.CloseConnection)
 56: End Function

 

 

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

  1: <%@ Page language="vb" debug="true" %>
  2: <%@ Import Namespace="System.Data" %>
  3: <%@ Import Namespace="System.Data.OleDb" %>
  4:
  5: <script language="vb" runat="server">
  6: Sub Page_Load()
 10: End Sub
 11:
 12: Sub BindDataGrid()
 19: End Sub
 20:
 21: Sub BindRepeater(intCustomerID As Integer)
 28: End Sub
 29:
 30: Sub dgrdCustomers_ItemCommand(s As Object, e As DataGridCommandEventArgs)
 36: End Sub
 37:
 38: Sub dgrdCustomers_ItemDataBound(s As Object, e As DataGridItemEventArgs)
 47: End Sub
 48:
 49: Function CreateDataReader(strSQL As String, _
 56: End Function
 68: </script>

 

 

ASP.NET DataGrid2のホームへ戻る