ASP.NET GridViewのホームへ戻る

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

 

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

 

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

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

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

 

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

 

 

1. 新規Webページ作成

 

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

 

 

2. コントロール作成

 

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

 

 

図デザイナにLabelGridViewを配置する

 

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

 

 

CustomersテーブルからCustomerIDCompanyNameKenの列を選択

 

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

 

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

 

 

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

 

Tip

Webページがポストバックされてときに選択した行の位置を保持するには

 

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

 

<%@ Page Language="VB" MaintainScrollPositionOnPostback="true" ・・・  %>

 

 

 

◆解説

 

GridViewから選択した行の値を取得するには、SelectedIndexChanedイベントハンドラを追加します。選択した行(GridViewRow)は、GridViewSelectedRowプロパティに格納されています。行から得意先ID、得意先名を取得するには、GridViewRowCellsコレクションにセルのインデックス番号(先頭が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イベントハンドラを追加します。このイベントハンドラから、GridViewSelectEventArgsCancelプロパティにTrueを設定すると[選択]ボタンをクリックした動作がキャンセルされます。SelectedIndexChangingイベントハンドラが発生した時点では、SelectedRowプロパティに値が設定されていないため、GridViewRowsコレクションからGridViewRowを取得します。カレントのGridViewRowのインデックス番号は、GridViewSelectEventArgsNewSelectedIndexプロパティに格納されています。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

 

ASP.NET GridViewのホームへ戻る