●DataGridに行の選択機能追加 (ch65DataGrid1.aspx)

 

DataGridにOracleデータベースのCustomers表をバインドして表示します。Customers表から行（レコード）を抽出するには、パッケージ(CustomerPackage)に登録されているストアドプロシージャ(GetCustomers)を使用します。

 

iSQL*PlusまたはSQL*Plusを起動して、事前にパッケージ仕様部(C:\vbora\sql\CustomerPackage.sql)とパッケージ本体部(C:\vbora\sql\CustomerPackageBody.sql)を作成してください。

 

パッケージ仕様部(CustomerPackage.sql)

CREATE OR REPLACE PACKAGE CustomerPackage AS

TYPE rcurCustomers IS REF CURSOR;

  PROCEDURE GetCustomers(

    orcurCustomers OUT rcurCustomers);

END CustomerPackage;

 

パッケージ本体部(CustomerPackageBody.sql)

CREATE OR REPLACE PACKAGE BODY CustomerPackage AS

  PROCEDURE GetCustomers(

    orcurCustomers OUT rcurCustomers) IS

  BEGIN

    OPEN orcurCustomers FOR

      SELECT *

      FROM Customers

      ORDER BY CustomerID;

  END GetCustomers;

END CustomerPackage;

 

このサンプルでは、以下のノウハウを習得することができます。

 

▼DataGridのプロパティビルダから選択ボタン列を作成する方法

▼DataGridのSelectedIndexChangedイベントの使い方

▼DataGridのSelectedItemプロパティの使い方

 

1. Webフォーム追加

 

ソリューションエクスプローラからフォルダ[ch6]を右クリックして、新規Webフォーム「ch65DataGrid1」を追加します。

 

2. Label作成

 

ツールボックスの[Web フォーム]から、Labelをドラッグ＆ドロップします。デザイナに、Label1のオブジェクトが作成されます。プロパティビルダから[Label1]を選択したら、「Text」プロパティの値を消去して空白にします。

 

3. DataGrid作成

 

カーソルをLabel1の直後に移動したら、[Enter]キーを押して改行します。ツールボックスの[Webフォーム]から、DataGridをドラッグ＆ドロップします。デザイナにDataGrid1のオブジェクトが作成されます。DataGrid1の右クリックから[自動フォーマット]を選択します。「自動フォーマット」が表示されたら、「スキームの選択」から[クラシック1]を選択して[OK]をクリックして閉じます。

 

DataGrid1の右クリックから[プロパティビルダ]を選択します。「DataGrid1プロパティ」が表示されたら、左側から[列]を選択します。[実行時に自動的に列を作成する]をクリックしてチェックを外します。「使用可能な列」から[連結列]を選択してiconRightArrowをクリックします。右側の「選択された列」に連結列が表示されます。連結列(BoundColumn)プロパティの「ヘッダーテキスト」に「得意先」、「データフィールド」に「CompanyName」を入力します。同様の手順で、「担当」、「電話」の連結列を作成します。「担当」と「電話」の[可視]をクリックしてチェックを外します。

 

 

表 連結列(BoundColumn)のプロパティ

ヘッダーテキスト

データフィールド

可視

得意先

CompanyName

チェック

担当

ContactName

 

電話

Phone

 

 

「使用可能な列」のリストボックスから[ボタン列]をクリックして展開します。[選択]を選択したら、iconRightArrowをクリックします。「選択された列」に選択ボタン列が表示されます。選択ボタン列(ButtonColumn)プロパティの「ボタンの種類」から[PushButton]を選択します。

 

fig6-5-1

図 プロパティビルダの[列]から選択ボタン列を追加

 

 

「プロパティビルダ」の左側から[書式]を選択します。画面中央の「オブジェクト」から[ヘッダー]を選択して「水平方向の配置」から[中央]を選択します。「オブジェクト」から[列]をクリックして展開したら、[Columns[3]]の[項目]を[中央]揃えにします。最後に、[OK]をクリックして「プロパティビルダ」を閉じます。

 

4. コードビューに切り替え

 

メニューバーから[表示]→[コード]を選択してコードビューに切り替えます。クラスモジュールの先頭に、以下のImportsステートメントを追加します。

 

Imports System.Data

Imports Oracle.DataAccess.Client

Imports Oracle.DataAccess.Types

 

Page_Loadイベントに以下のコードを追加します。

 

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)

cccHandles MyBase.Load

  If Not IsPostBack Then

    BindGrid()

  End If

End Sub

 

クラスモジュールの最後に、Sub BindGridとFunction CreateDataSetを追加します。

 

Private Sub BindGrid()

  With DataGrid1

    .DataSource = CreateDataSet("CustomerPackage.GetCustomers")

    .DataKeyField = "CustomerID"

    .DataBind()

  End With

End Sub

 

Private Function CreateDataSet(ByVal strPackage As String) As DataSet

  Dim con As New OracleConnection(ConfigurationSettings.AppSettings("conStringOraNw"))

  Dim cmd As New OracleCommand(strPackage, con)

  Dim da As New OracleDataAdapter

  Dim ds As New DataSet

 

  cmd.CommandType = CommandType.StoredProcedure

  cmd.Parameters.Add("1", OracleDbType.RefCursor, ParameterDirection.Output)

  da.SelectCommand = cmd

  da.Fill(ds)

  Return ds

End Function

 

コードビュー左上の「クラス名」のドロップダウンリストから[DataGrid1]、右上の「メソッド名」のドロップダウンリストから[SelectedIndexChanged]を選択します。DataGrid1_SelectedIndexChangedイベントが生成されたら、以下のコードを追加します。

 

Private Sub DataGrid1_SelectedIndexChanged(ByVal sender As Object,

cccByVal e As System.EventArgs)

cccHandles DataGrid1.SelectedIndexChanged

  Dim strCompanyName As String

  Dim strContactName As String

  Dim strPhone As String

 

  With DataGrid1.SelectedItem

    strCompanyName = .Cells(0).Text

    strContactName = .Cells(1).Text

    strPhone = .Cells(2).Text

  End With

  Label1.Text = String.Format("{0}<br>{1}<br>{2}", _

    strCompanyName, strContactName, strPhone)

End Sub

 

5. ブラウザに表示

 

ソリューションエクスプローラから[ch65DataGrid1.aspx]を右クリックしてブラウザに表示します。DataGridにCustomers表が表示されます。[選択]をクリックすると、ラベルに得意先、担当、電話が表示されます。

 

fig6-5-2

図 DataGridから[選択]をクリックすると詳細が表示される

 

■解説

 

DataGridに行の選択機能を追加するには、DataGrid1の右クリックから[プロパティビルダ]を選択して「DataGrid1プロパティ」を表示します。左側の[列]から[実行時に自動的に列を作成する]をクリックしてチェックを外します。「使用可能な列」から[連結列]を選択して「得意先」、「担当」、「電話」の連結列を作成します。「担当」と「電話」の[可視]をクリックして不可視にします。「使用可能な列」から[選択]を選択して「選択」ボタン列を作成します。[OK]をクリックして「プロパティビルダ」を閉じると、以下のようなコマンド列が生成されます。

 

<asp:DataGrid id="DataGrid1" runat="server"

  AutoGenerateColumns="False">

  <Columns>

    <asp:BoundColumn DataField="CompanyName"

      HeaderText="得意先">

    </asp:BoundColumn>

    <asp:BoundColumn Visible="False"

      DataField="ContactName" HeaderText="担当">

    </asp:BoundColumn>

    <asp:BoundColumn Visible="False"

      DataField="Phone" HeaderText="電話">

    </asp:BoundColumn>

    <asp:ButtonColumn Text="選択"

      ButtonType="PushButton" CommandName="Select">

    </asp:ButtonColumn>

  </Columns>

</asp:DataGrid>

 

DataGridから[選択]をクリックすると、Page_Load→DataGrid1_SelectedIndexChangedの順にイベントが発生します。

 

Page_Loadイベントでは、IsPostBackプロパティを調べて初期ロードならBindGridメソッドを実行します。

 

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)

cccHandles MyBase.Load

  If Not IsPostBack Then

    BindGrid()

  End If

End Sub

 

BindGridメソッドは、CreateDataSetメソッドを実行してCustomers表が格納されているDataSetオブジェクトを作成します。CreateDataSetメソッドの引数には、パッケージ(CustomerPackage)に登録されているストアドプロシージャ(GetCustomers)を指定します。DataGridオブジェクトのDataSourceプロパティにDataSetオブジェクトを設定したら、DataBindメソッドを実行してバインドします。これで、DataGridにCustomers表が表示されます。

 

Private Sub BindGrid()

  With DataGrid1

    .DataSource = CreateDataSet("CustomerPackage.GetCustomers")

    .DataKeyField = "CustomerID"

    .DataBind()

  End With

End Sub

 

CreateDataSetメソッドは、OracleDataAdapterオブジェクトのFillメソッドを実行してCustomers表をDataSetに取り込みます。

 

Private Function CreateDataSet(ByVal strPackage As String) As DataSet

  Dim con As New OracleConnection(ConfigurationSettings.AppSettings("conStringOraNw"))

  Dim cmd As New OracleCommand(strPackage, con)

  Dim da As New OracleDataAdapter

  Dim ds As New DataSet

 

  cmd.CommandType = CommandType.StoredProcedure

  cmd.Parameters.Add("1", OracleDbType.RefCursor, ParameterDirection.Output)

  da.SelectCommand = cmd

  da.Fill(ds)

  Return ds

End Function

 

DataGrid1_SelectedIndexChangedイベントでは、DataGridオブジェクトのSelectedItemプロパティから選択された行のDataGridItemオブジェクトを取得します。DataGridItemオブジェクトのCellsコレクションのTextプロパティから得意先、担当、電話を取得したら、LabelオブジェクトのTextプロパティに格納して表示します。

 

Private Sub DataGrid1_SelectedIndexChanged(ByVal sender As Object,

cccByVal e As System.EventArgs)

cccHandles DataGrid1.SelectedIndexChanged

  Dim strCompanyName As String

  Dim strContactName As String

  Dim strPhone As String

 

  With DataGrid1.SelectedItem

    strCompanyName = .Cells(0).Text

    strContactName = .Cells(1).Text

    strPhone = .Cells(2).Text

  End With

  Label1.Text = String.Format("{0}<br>{1}<br>{2}", _

    strCompanyName, strContactName, strPhone)

End Sub