DataGridにレコードを選択する機能を追加したサンプル
図 DataGridにレコードを選択する機能を追加したサンプル
このサンプルは、DataGridから得意先を選択してRepeaterに詳細を表示します。DataGridから得意先を選択するには、レコードセレクター
か得意先名をクリックします。得意先を選択すると、DataGridの右側のRepeaterに得意先の詳細が表示されます。
◆プログラムDataGridSelectingRow.aspxのポイント
¶ポイント１ 任意の場所をクリックして行を選択するには
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イベントを登録するには、DataGridのOnItemDataBoundイベントで行います。
Dim lbtn As LinkButton
= CType(e.Item.FindControl("lbtnSelect"), LinkButton)
e.Item.Attributes("onClick")
= GetPostBackClientHyperlink(lbtn, "")
¶ポイント２ テキストに影を付けて表示するには
このサンプルでは、Webページにプログラム名を表示するときテキストを影付で表示しています。テキストに影を付けるには、CSSのfilterプロパティの値にshadow()を指定します。
td.shadow {
filter:shadow(color=#cccccc)
}
<td class="shadow">
<h3>DataGridSelectingRow.aspx</h3>
</td>
¶ポイント３ DataGridのヘッダをボタンのように表示するには
このサンプルでは、DataGridのヘッダをボタンのように浮き出た状態で表示しています。ヘッダをボタンのように表示するには、CSSのborder-styleプロパティにoutsetを設定します。
.dgrdHeader {
border-style:outset;
background-color:gainsboro;
color:black
}
<asp:BoundColumn
HeaderText="<div class='dgrdHeader'>得意先名</div>"
DataField="CompanyName" />
¶ポイント４ 角が丸みのあるボックスを表示するには
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を設定して、カラムの自動生成機能を抑止しています。行102のCssClassプロパティには、dgrdShadowを設定してDataGridに影を付けています。行108-124の<Columns>…</Columns>では、TemplateColumnとBoundColumnを定義しています。行109-119のTemplateColumnでは、ItemTemplateにLinkButtonを定義しています。行110では、TemplateColumnのHeaderTextプロパティに、「<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では、ItemTemplateにLinkButtonを定義しています。行113では、LinkButtonのCommandNameプロパティにSelectを設定しています。Selectを設定すると、LinkButtonをクリックしたときにその行が選択された状態になり、行107のSelectedItemStyleが適用されます。CssClassのdgrdSelectedItemStyleでは、background-colorプロパティにSteelBlueを設定していますので、選択行の背景色が「はがね色（暗青灰色）」で表示されます。
.dgrdSelectedItemStyle
{
background-color:
SteelBlue;
color: White;
font-size: x-small;
}
行114では、LinkButtonのTextプロパティに、「<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-118のItemStyleでは、LinkButtonをButtonコントロールのように表示させています。
行120-123のBoundColumnでは、得意先テーブルの得意先名をバインドしています。行121のHeaderTextプロパティに、「<div class='dgrdHeader'>得意先名</div>」を設定していますので、DataGridのヘッダがボタンのように表示されます。
.dgrdHeader {
border-style:outset;
background-color:gainsboro;
color:black
}
行122のDataFieldプロパティには、得意先テーブルの得意先名のカラムCompanyNameを設定しています。
行128-165では、Repeaterを定義しています。行129-164のItemTemplateでは、<table>のセルに得意先テーブルの得意先ID、得意先名、担当者名、部署役職、電話番号、ファックスをバインド（連結）しています。得意先テーブルのカラム（フィールド）をバインドするには、データ連結タグ<%# …. %>を使用します。
<%#
Container.DataItem("CustomerID") %>
行133-160の<fieldset>…</fieldset>は、角が丸みのあるボックスを表示します。
図 Repeaterに得意先の詳細を表示した例
リスト DataGridSelectingRow.aspxのソースコード（HTML編）
|
70: <html> 115:
Visible="True" /> |
◆ プログラムDataGridSelectingRow.aspxの解説（コード編）
ここでは、プログラムのコード編を解説します。このプログラムは、Page_LoadなどのイベントとSub/Functionから構成されています。ASP.NETのプログラムは、Windo
ASP.NETのプログラムを理解するには、最初にPage_Loadイベントを解析します。次に、Button、DataGridなどWebコントロールのイベントを解析していきます。なお、イベントには、クライアント側のブラウザで実行されるものと、Webサーバ側で実行されるものがありますの注意してください。
Sub Page_Load()イベントの処理
このイベントでは、BindDataGrid()を呼び出してDataGridに得意先テーブルを表示します。このイベントは、ページがロードされたときに発生します。
行7-9のIf…End Ifでは、ページが最初にロードされたか調べています。最初にロードされたときは、BindDataGrid()を呼びます。BindDataGrid()は、DataGridに得意先テーブルをバインドします。
|
6: Sub Page_Load() |
Sub dgrdCustomers_ItemDataBound()イベントの処理
このイベントでは、DataGridのItem(DataGridItem)にクライアント側で動作するonClickイベントを登録します。onClickイベントでは、マウスで行をクリックしたときにWebページをポストバックします。DataGridのOnItemDataBoundイベントは、DataGridのDataBind()メソッドを実行したときに発生します。
行40-46のIf…End Ifでは、ItemTypeがItem、AlternatingItem、SeletedItemか調べています。行43では、Item(DataGridItem)のFindControl()メソッドでLinkButtonを検索しています。TemplateColumnに定義されたコントロールは、セルを直接参照しないでFindControl()メソッドで検索します。行44では、Item(DataGridItem)のAttributesコレクションにクライアント側で動作するonClickイベントを登録しています。onClickイベントが発生したときに実行されるJavaScriptは、Page.GetPostBackClientHyperlink()メソッドで生成しています。このメソッドは、WebページをポストバックさせるJavaScriptを生成します。このメソッドの引数には、ポストバックされてときに実行されるWebコントロールとパラメータを指定します。
行45では、Item(DataGridItem)のStyleコレクションにCSSのcursor: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"
ItemのAttributesとStyleコレクションに追加したonClickとcursorは、以下のように生成されます。
<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) |
Sub dgrdCustomers_ItemCommand()イベントの処理
このイベントでは、DataGridから選択した行の詳細を表示します。このイベントは、DataGridから行をクリックしたときに発生します。DataGridから行をクリックすると、クライアント側で動作するonClickイベントが実行されてWebページがポストバックされます。Webページがポストバックされると、OnItemCommandイベントに制御が渡ります。
行32では、DataGridのDataKeysコレクションから選択した行の主キー(得意先ID)を取得しています。DataGridの行を選択するとDataGridのSelectedIndexプロパティに、選択した行のインデックス番号が自動的に設定されます。SelectedIndexにインデックス番号が設定される、その行は選択行となりSelectedItemStyleが適用されます。このサンプルでは、選択行の背景色が「はがね色（暗青灰色）」で表示されます。行34では、BindRepeater()を呼び出してRepeaterに得意先の詳細を表示します。BindRepeater()の引数には、得意先IDを指定します。
|
30: Sub
dgrdCustomers_ItemCommand(s As Object, e As DataGridCommandEventArgs) 36: End Sub |
Sub
BindDataGrid()の処理
このサブプロシージャでは、得意先テーブルのDataReaderを作成してDataGridにバインドします。BindDataGridは、Page_Loadイベントからページが最初にロードされたときに呼ばれます。
行13では、得意先テーブルの先頭から10件のレコードを抽出するSQLを生成しています。行14-18のWith…End Withでは、DataGridに得意先テーブルをバインドしています。行15では、DataGridのDataSourceプロパティにCreateDataReader()関数の戻り値を設定しています。CreateDataReader()からは、戻り値として得意先テーブルのDataReaderオブジェクトが返されます。行16では、DataGridのDataKeyFieldプロパティに、得意先テーブルの主キー(得意先ID)を設定しています。ここで設定した得意先IDは、DataGridからアイテムを選択したときに使用します。行17では、DataGridのDataBind()メソッドで、DataReaderをバインドします。
|
12: Sub BindDataGrid() 19: End Sub |
Sub BindRepeater()の処理
このサブプロシージャでは、得意先テーブルから特定のレコードを抽出してRepeaterにバインドします。BindRepeaterは、DataGridのOnItemCommandイベントから呼ばれます。
行22-23では、得意先テーブルからレコードを抽出するSQLを生成しています。このSQLには、WHERE句でCustomerID=が指定されていますので、DataGridから選択した得意先が抽出されます。行24-27のWith…End Withでは、Repeaterに得意先テーブルをバインドして表示しています。行25では、RepeaterのDataSourceプロパティにCreateDataReader()関数の戻り値を設定しています。CreateDataReader()からは、得意先テーブルのDataReaderオブジェクトが返されます。行26では、RepeaterのDataBind()メソッドで、DataReaderをバインドしています。これで、Repeaterに得意先の詳細が表示されます。
|
21: Sub
BindRepeater(intCustomerID As Integer) |
Function CreateDataReader()関数の処理
この関数は、DataReaderを生成して返します。CreateDataReaderは、BindDataGrid()とBindRepeater()から呼ばれます。
行51-52では、Connectionのインスタンスを生成しています。Connectionの引数には、Web.Configに登録されているデータベースの接続文字列を指定しています。Web.Configに登録されている内容を取得するには、ConfigurationSettingsのAppSettings()メソッドを使用します。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の引数には、SQLとConnectionオブジェクトを指定しています。
行54では、ConnectionのOpen()メソッドでNwind.mdbデータベースを開いています。行55では、CommandのExecuteReader()メソッドでSQLのSELECTステートメントを実行して得意先テーブルからレコードを読み込んでDataReaderを作成します。ExecuteReader()の引数に、CommandBehavior.CloseConnectionを指定すると、DataReaderが解放されたときに、ConnectionのClose()メソッドを実行してNwind.mdbデータベースを閉じます。
|
49: Function
CreateDataReader(strSQL As String, _ |
リスト DataGridSelectingRow.aspxのソースコード（コード編）
|
1: <%@ Page
language="vb" debug="true" %> |