■GridViewに選択機能を追加する (GridView02.aspx)

 

GridViewにSQL Serverのテーブルを表示して行を選択するサンプルを作成します。このサンプルでは、以下のノウハウを習得することができます。

 

▼  GridViewに行の選択機能を追加する方法

▼  GridViewから選択した行の値を取得する方法

▼  特定の行を選択不可にする方法

 

図　東京都内の得意先のみ選択可能とした例

 

 

1. 新規Webページ作成

 

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

 

 

2. コントロール作成

 

デザイナにGridView02.aspxが表示されたら、ツールボックスの「標準」タブからLabel、GridViewをドラッグ＆ドロップして図のように配置します。

 

 

図デザイナにLabelとGridViewを配置する

 

「GridViewタスク」メニューから[オートフォーマット]を選択したら、「スキームの選択」から[シンプル]を選択して[OK]をクリックします。「GridViewタスク」メニューの「データソースの選択」から「<新しいデータソース>」を選択して「データソース構成ウィザード」を起動したら、NwindSQLデータベースからCustomersテーブルを選択して「CustomerID」、「CompanyName」、「Ken」の列を選択します。

 

 

図 CustomersテーブルからCustomerID、CompanyName、Kenの列を選択

 

「データソース構成」ウィザードが完了したら、「GridViewタスク」メニューから「選択を有効にする」をチェックします。「GridViewタスク」メニューから[列の編集]を選択して「フィールド」ダイアログを表示したら、CommandFieldとBoundFieldのプロパティを表のように設定します。

 

表 CommandField/BoundFieldのプロパティ設定

列	ButtonType	SelectText/HeaderText
CommandField(選択)	Button	選択
BoundField(CustomerID)		ID
BoundField(CompanyName)		得意先
BoundField(Ken)		都道府県

 

 

図 CommandFiled/BoundField列のプロパティを設定

 

 

3. イベントハンドラ追加

 

デザイナの右クリックから[コードの表示]を選択します。コードビューが表示されたら、「(全般)」と「（宣言）」のドロップダウンリストから[GridView1]、[SelectedIndexChanged]を選択します。GridView1_SelectedIndexChangedイベントハンドラが作成された、次のコードを追加します。

 

Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridView1.SelectedIndexChanged

  Dim row As GridViewRow = GridView1.SelectedRow

  lblResult.Text = String.Format("<b>ID:</b> {0}、<b>得意先:</b> {1}", row.Cells(1).Text, row.Cells(2).Text)

End Sub

 

4. ブラウザに表示

 

VWD 2005のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。ブラウザが起動されてGridViewにCustomersテーブルが表示されます。GridViewから[選択]ボタンをクリックすると、WebページがポストバックされてLabelに、選択した行の「ID」と「得意先」が表示されます。

 

 

図 [選択]ボタンをクリックした行のIDと得意先を表示した例

 

Tip

Webページがポストバックされてときに選択した行の位置を保持するには   GridViewから[選択]ボタンをクリックすると、WebページがポストバックされてGridViewの先頭が再表示されます。GridViewをスクロールした状態で[選択]ボタンをクリックしたとき、ポストバックされても選択した行の位置を保持するには、@PageディレクティブにMaintainScrollPositionOnPostback="true"を追加します。   <%@ Page Language="VB" MaintainScrollPositionOnPostback="true" ・・・  %>

 

 

◆解説

 

GridViewから選択した行の値を取得するには、SelectedIndexChanedイベントハンドラを追加します。選択した行(GridViewRow)は、GridViewのSelectedRowプロパティに格納されています。行から得意先ID、得意先名を取得するには、GridViewRowのCellsコレクションにセルのインデックス番号(先頭が0から始まる)を指定します。たとえば、得意先IDを取得するには、「GridViewRow.Cells(1).Text」のように記述します。

 

Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridView1.SelectedIndexChanged

  Dim row As GridViewRow = GridView1.SelectedRow

  lblResult.Text = String.Format("<b>ID:</b> {0}、<b>得意先:</b> {1}", row.Cells(1).Text, row.Cells(2).Text)

End Sub

 

GridViewから特定の行のみ選択可能とするには、SelectedIndexChangingイベントハンドラを追加します。このイベントハンドラから、GridViewSelectEventArgsのCancelプロパティにTrueを設定すると[選択]ボタンをクリックした動作がキャンセルされます。SelectedIndexChangingイベントハンドラが発生した時点では、SelectedRowプロパティに値が設定されていないため、GridViewのRowsコレクションからGridViewRowを取得します。カレントのGridViewRowのインデックス番号は、GridViewSelectEventArgsのNewSelectedIndexプロパティに格納されています。GridViewから「東京都内」の得意先のみ選択させるときは、次のようなコードを追加します。

 

Protected Sub GridView1_SelectedIndexChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewSelectEventArgs) Handles GridView1.SelectedIndexChanging

  Dim row As GridViewRow = GridView1.Rows(e.NewSelectedIndex)

  If row.Cells(3).Text <> "東京都" Then

    e.Cancel = True

    lblResult.Text = "東京都内の得意先を選択してください"

  End If

End Sub