DataGridにレコードを選択する機能を追加したサンプルこのサンプルは、DataGridから得意先を選択してRepeaterに詳細を表示します。得意先名をクリックします。得意先を選択すると、DataGridの右側のRepeaterに得意先の詳細が表示されます。任意の場所をクリックして行を選択するにはDataGridにアイテムを選択する機能を付加するには、ButtonColumnを使用します。DataGridに以下のようなカラムを追加して、選択ボタンをクリックするとその行が選択された状態になります。CommandNameプロパティにSelectを設定することに注意してください。/></Columns>ところが、選択ボタン以外のカラムをクリックすると行が選択されません。ここで解説するサンプルは、任意のカラムをクリックしたときにも、行を選択することができます。この機能を実現するには、DataGridの行(DataGridItem)にクライアント側で動作する、onClickイベントを登録します。onClickイベントでは、Webページをポストバックさせて、選択ボタンをクリックしたときと同じ動作をさせます。クライアント側で動作するonClickイベントからWebページをポストバックさせるには、GetPostBackClientHyperlink()メソッドを使用してJavaScriptを生成します。DataGridItemにクライアント側で動作するonClickイベントを登録するには、DataGridのOnItemDataBoundイベントで行います。テキストに影を付けて表示するにはこのサンプルでは、Webページにプログラム名を表示するときテキストを影付で表示しています。テキストに影を付けるには、CSSのfilterプロパティの値にshadow()を指定します。DataGridのヘッダをボタンのように表示するにはこのサンプルでは、DataGridのヘッダをボタンのように浮き出た状態で表示しています。ヘッダをボタンのように表示するには、CSSのborder-styleプロパティにoutsetを設定します。角が丸みのあるボックスを表示するにはHTMLの<fieldset>...</fieldset>を使用すると、ボックスの角に丸みを持たせることができます。ボックスに凡例を表示するには<legend>...</legend>を使用します。<fieldset><legend>[凡例]</legend></fieldset>◆プログラムDataGridSelectingRow.aspxの解説(HTML編)ここでは、プログラムのHTML編を解説します。行71-74の<head>...</head>内には、<title>と<link>が記述されています。<title>...</title>で記述された内容は、ブラウザのタイトルバーに表示されます。Sheets)の外部ファイルを取り込んでいます。外部ファイルdataGrid.cssには、HTMLタグやWebコントロールに対して前景色、背景色などのプロパティを定義しています。行77-83の<table>...</table>では、.aspxのファイル名に影を付けて表示しています。行79の<td>には、class=でCSSのクラスshadowを指定しています。このクラスには、filter:shadow(color=#cccccc)のようなCSSが定義されています。行80の<h3>...</h3>では、テキストを表示しています。<h3>には、h3{color:lightcyan;}のようなCSSが定義されています。これで、テキストが浮き出たように表示されます。行95-125では、DataGridを定義しています。このDataGridには、レコードセレクターと得意先名を表示します。行96では、AutoGenerateColumnsプロパティにFalseを設定して、カラムの自動生成機能を抑止しています。行102のCssClassプロパティには、dgrdShadowを設定してDataGridに影を付けています。行108-124の<Columns>...</Columns>では、TemplateColumnとBoundColumnを定義しています。行109-119のTemplateColumnでは、ItemTemplateにLinkButtonを定義しています。class='dgrdHeaderBox'>1</div>」を設定しています。{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を設定していますので、選択行の背景色が「はがね色(暗青灰色)」で表示されます。class='dgrdItemArrow'>4</div>」を設定しています。(iconSelector.gif)のように表示されます。{border-style:outset;background-color:gainsboro;color:black;font-family:Webdings;font-size:9pt;}行117-118のItemStyleでは、LinkButtonをButtonコントロールのように表示させています。行120-123のBoundColumnでは、得意先テーブルの得意先名をバインドしています。class='dgrdHeader'>得意先名</div>」を設定していますので、DataGridのヘッダがボタンのように表示されます。{border-style:outset;background-color:gainsboro;color:black}行122のDataFieldプロパティには、得意先テーブルの得意先名のカラムCompanyNameを設定しています。行128-165では、Repeaterを定義しています。ファックスをバインド(連結)しています。%>行133-160の<fieldset>...</fieldset>は、角が丸みのあるボックスを表示します。プログラムDataGridSelectingRow.aspxの解説(コード編)ここでは、プログラムのコード編を解説します。このプログラムは、Page_LoadなどのイベントとSub/Functionから構成されています。ASP.NETのプログラムは、Windowsのプログラムと同様イベントドリブン型の構造になっています。WebページがロードされるとPage_Loadイベントが発生します。Page_Loadイベントでは、通常Webページの初期化を行っています。ASP.NETのプログラムを理解するには、最初にPage_Loadイベントを解析します。次に、Button、DataGridなどWebコントロールのイベントを解析していきます。イベントには、クライアント側のブラウザで実行されるものと、Webサーバ側で実行されるものがありますの注意してください。Page_Load()イベントの処理このイベントでは、BindDataGrid()を呼び出してDataGridに得意先テーブルを表示します。このイベントは、ページがロードされたときに発生します。Ifでは、ページが最初にロードされたか調べています。最初にロードされたときは、BindDataGrid()を呼びます。BindDataGrid()は、DataGridに得意先テーブルをバインドします。dgrdCustomers_ItemDataBound()イベントの処理このイベントでは、DataGridのItem(DataGridItem)にクライアント側で動作するonClickイベントを登録します。onClickイベントでは、マウスで行をクリックしたときにWebページをポストバックします。DataGridのOnItemDataBoundイベントは、DataGridのDataBind()メソッドを実行したときに発生します。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の行にマウスを移動したときに、マウスが「手」の形に変化します。"hand"ItemのAttributesとStyleコレクションに追加したonClickとcursorは、以下のように生成されます。dgrdCustomers_ItemCommand()イベントの処理このイベントでは、DataGridから選択した行の詳細を表示します。このイベントは、DataGridから行をクリックしたときに発生します。DataGridから行をクリックすると、クライアント側で動作するonClickイベントが実行されてWebページがポストバックされます。Webページがポストバックされると、OnItemCommandイベントに制御が渡ります。行32では、DataGridのDataKeysコレクションから選択した行の主キー(得意先ID)を取得しています。DataGridの行を選択するとDataGridのSelectedIndexプロパティに、選択した行のインデックス番号が自動的に設定されます。SelectedIndexにインデックス番号が設定される、その行は選択行となりSelectedItemStyleが適用されます。このサンプルでは、選択行の背景色が「はがね色(暗青灰色)」で表示されます。行34では、BindRepeater()を呼び出してRepeaterに得意先の詳細を表示します。BindRepeater()の引数には、得意先IDを指定します。BindDataGrid()の処理このサブプロシージャでは、得意先テーブルのDataReaderを作成してDataGridにバインドします。BindDataGridは、Page_Loadイベントからページが最初にロードされたときに呼ばれます。行13では、得意先テーブルの先頭から10件のレコードを抽出するSQLを生成しています。Withでは、DataGridに得意先テーブルをバインドしています。行15では、DataGridのDataSourceプロパティにCreateDataReader()関数の戻り値を設定しています。CreateDataReader()からは、戻り値として得意先テーブルのDataReaderオブジェクトが返されます。行16では、DataGridのDataKeyFieldプロパティに、得意先テーブルの主キー(得意先ID)を設定しています。ここで設定した得意先IDは、DataGridからアイテムを選択したときに使用します。行17では、DataGridのDataBind()メソッドで、DataReaderをバインドします。BindRepeater()の処理このサブプロシージャでは、得意先テーブルから特定のレコードを抽出してRepeaterにバインドします。BindRepeaterは、DataGridのOnItemCommandイベントから呼ばれます。行22-23では、得意先テーブルからレコードを抽出するSQLを生成しています。このSQLには、WHERE句でCustomerID=が指定されていますので、DataGridから選択した得意先が抽出されます。Withでは、Repeaterに得意先テーブルをバインドして表示しています。行25では、RepeaterのDataSourceプロパティにCreateDataReader()関数の戻り値を設定しています。CreateDataReader()からは、得意先テーブルのDataReaderオブジェクトが返されます。行26では、RepeaterのDataBind()メソッドで、DataReaderをバインドしています。これで、Repeaterに得意先の詳細が表示されます。CreateDataReader()関数の処理この関数は、DataReaderを生成して返します。CreateDataReaderは、BindDataGrid()とBindRepeater()から呼ばれます。行51-52では、Connectionのインスタンスを生成しています。Connectionの引数には、Web.Configに登録されているデータベースの接続文字列を指定しています。Web.Configに登録されている内容を取得するには、ConfigurationSettingsのAppSettings()メソッドを使用します。AppSettings()メソッドの引数には、<add>タグのkeyを指定します。/></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データベースを閉じます。DataGrid2のホームへ戻る。