チュートリアル : 入れ子の GridView コントロールの作成

[アーティクル]
10/22/2014

更新 : 2007 年 11 月

GridView コントロールは、データをグリッド (HTML テーブル) に表示します。グリッドの 1 行ごとにデータ行が 1 つずつ表示されます。このチュートリアルでは、GridView コントロールの機能を拡張して、個々のグリッド行に関連データテーブルのデータを表示できるようにする方法を説明します。関連データは入れ子の GridView コントロールに表示されます。つまり、親 GridView コントロールのグリッド行に GridView コントロールが表示されます。

たとえば、顧客リストを表示する GridView コントロールがあるとします。この GridView コントロールが表示するリストの各行に、その顧客の注文情報を表示する別の GridView コントロールが入っている場合、データは入れ子になっています。

このチュートリアルでは、どちらの GridView コントロールも、SqlDataSource コントロールを使用してデータソースからデータを取得します。

このチュートリアルでは、次の作業を行う方法について説明します。

Microsoft Visual Web Developer から SQL Server データベースに接続します。
SqlDataSource コントロールを使用して、データアクセスとバインディングの管理を行います。
GridView コントロールに、データベースから返されたデータを表示します。
GridView コントロールを使用して、入れ子のコントロールを表示する TemplateField を作成します。
実行時の条件に応じて、各行の表示を動的にカスタマイズします。
必要に応じて、SqlDataSource コントロールを使用してデータをキャッシュし、データベースへの要求回数を減らします。

必要条件

このチュートリアルを実行するために必要な項目や条件は、次のとおりです。

Visual Web Developer (Visual Studio)。
MDAC (Microsoft Data Access Components) Version 2.7 以降。

Microsoft Windows XP または Windows Server 2003 を使用している場合、MDAC 2.7 は既に存在します。ただし、Microsoft Windows 2000 を使用している場合は、コンピュータに既にインストールされている MDAC のアップグレードが必要になる場合があります。詳細については、MSDN ライブラリのトピック「Microsoft Data Access Components (MDAC) Installation」を参照してください。
SQL Server Northwind データベースへのアクセス。SQL Server の Northwind サンプルデータベースをダウンロードし、インストールする方法については、Microsoft SQL Server の Web サイトの「サンプルデータベースのインストール」を参照してください。

メモ :

SQL Server が実行されているコンピュータにログオンする方法については、サーバー管理者にお問い合わせください。

メモ :
SQL Server が実行されているコンピュータにログオンする方法については、サーバー管理者にお問い合わせください。

Web サイトの作成

「チュートリアル : Visual Web Developer での基本的な Web ページの作成」の手順を完了して Visual Web Developer で既に Web サイトを作成してある場合はその Web サイトを使用できるので、次のセクションに進んでください。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。

ファイルシステム Web サイトを作成するには

Visual Web Developer を開きます。
[ファイル] メニューの [新規作成] をポイントし、[Web サイト] をクリックします。Visual Web Developer Express を使用している場合は、[ファイル] メニューの [新しい Web サイト] をクリックします。

[新しい Web サイト] ダイアログボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
最初の [場所] ボックスで、[ファイルシステム] をクリックし、次に、Web サイトのページを格納するフォルダの名前を入力します。

たとえば、「C:\WebSites\NestedGridView」というフォルダ名を入力します。
[言語] ボックスの一覧で、作業に使用するプログラミング言語をクリックします。
[OK] をクリックします。

Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。

GridView コントロールのデータソースの追加

ASP.NET Web ページにデータを表示するための要件は、次のとおりです。

データベースなどのデータソースに対する接続。次の手順では、SQL Server Northwind データベースへの接続を作成します。
ページ上の、データを表示するためのコントロール。

次の手順では、GridView コントロールにデータを表示します。GridView コントロールは、SqlDataSource コントロールからデータを取得します。

GridView コントロールのデータソースを追加するには

Default.aspx ページを開くか、そのページに切り替えます。
デザインビューに切り替えます。
ツールボックスの [データ] グループから、SqlDataSource コントロールをページにドラッグします。

[SqlDataSource タスク] スマートタグが表示されない場合は、SqlDataSource コントロールを右クリックし、[スマートタグの表示] をクリックします。
[SqlDataSource タスク] パネルの [データソースの構成] をクリックします。

データソースの構成ウィザードが表示されます。
[新しい接続] をクリックします。

[接続の追加] ダイアログボックスが表示されます。
- [データソース] ボックスの一覧に [Microsoft SQL Server (SqlClient)] が表示されない場合は、[変更] をクリックして、[データソースの変更] ダイアログボックスの [Microsoft SQL Server] を選択します。
- [接続のプロパティ] ダイアログボックスではなく [データソースの選択] ダイアログボックスが表示された場合は、[データソース] ボックスの一覧から使用するデータソースの種類を選択します。このチュートリアルでは、データソースの種類として [Microsoft SQL Server] を選択します。[データプロバイダ] ボックスの一覧で、[.NET Framework SQL Server 用データプロバイダ] をクリックし、[続行] をクリックします。
[接続の追加] ページの [サーバー名] ボックスに、Northwind サンプルデータベースを実行している SQL Server の名前を入力します。
[サーバーにログオンする] で、実行中の SQL Server データベースのアクセスに使用する適切なオプション (統合セキュリティまたは特定の ID およびパスワード) を選択します。必要な場合は、ユーザー名とパスワードを入力します。
パスワードを入力した場合は、[パスワードの保存] チェックボックスをオンにします。
[データベースの選択または入力] をクリックし、「Northwind」と入力します。
[接続の確認] をクリックして、接続を確認したら [OK] をクリックします。
データソースの構成ウィザードの [次へ] をクリックします。
[はい、この接続を次の名前で保存します] チェックボックスがオンになっていることを確認します。
NorthwindConnectionString という接続名を指定し、[次へ] をクリックします。
[Select ステートメント構成] のウィザードステップで、[テーブルまたは表示から列を指定します] をクリックします。
[名前] ボックスの一覧の [Customers] をクリックします。
[列] パネルで、[CustomerID] と [CompanyName] の列を選択します。
[次へ] をクリックします。
[完了] をクリックします。

データを表示する GridView コントロールの追加

データの取得元のデータソースを設定できたら、データを表示するためのコントロールをページに追加します。

次の手順では、GridView コントロールにデータを表示します。GridView コントロールは、あらかじめ追加してある SqlDataSource コントロールからデータを取得します。

データを表示するために GridView コントロールを追加および設定するには

Default.aspx ページのデザイン ビューで作業中であることを確認します。
ツールボックスの [データ] グループから、GridView コントロールをページにドラッグします。
[GridView タスク] パネルの [データソースの選択] リストボックスの一覧で、先に追加した SqlDataSource コントロールである SqlDataSource1 をクリックします。
[ページングを有効にする] チェックボックスをオンにします。
[プロパティ] ウィンドウで、GridView コントロールの RowStyle プロパティを展開し、VerticalAlign プロパティを Top に設定します。グリッド行のテキストの配置が上詰めになります。入れ子のグリッドには複数の行が表示されるため、このように設定します。

関連データを表示する入れ子の GridView コントロールの追加

各行の関連データを表示するため、入れ子になったデータソースと GridView コントロールを作成します。このために、次の操作を実行します。

GridView コントロールで表示される行の TemplateField を作成します。
各行の関連データを表示するため、入れ子になった GridView コントロールと SqlDataSource コントロールを TemplateField に追加します。
入れ子になった SqlDataSource コントロールの選択パラメータ値を設定するため、親 GridView コントロールの RowDataBound イベントを処理するプロシージャを追加します。

データを表示する入れ子の GridView コントロールを追加および設定するには

Default.aspx ページのデザイン ビューで作業中であることを確認します。
GridView コントロールを右クリックし、[スマートタグの表示] をクリックします。
[列の編集] をクリックします。

[フィールド] ダイアログボックスが表示されます。
[使用できるフィールド] パネルで、[TemplateField] をクリックし、[追加] をクリックします。
[TemplateField プロパティ] パネルで、[HeaderText] に「注文」と入力します。
[OK] をクリックします。
[GridView タスク] パネルの [テンプレートの編集] をクリックします。
[テンプレート編集モード] パネルの [表示] ボックスの一覧の [ItemTemplate] をクリックします。
ツールボックスの [データ] グループから、SqlDataSource コントロールを ItemTemplate の編集可能な領域にドラッグします。

[SqlDataSource タスク] スマートタグが表示されない場合は、SqlDataSource コントロールを右クリックし、[スマートタグの表示] をクリックします。
[SqlDataSource タスク] スマートタグの [データソースの構成] をクリックします。

データソースの構成ウィザードが表示されます。
[データ接続の選択] ページで、このチュートリアルで前に作成した [NorthwindConnectionString] をクリックし、[次へ] をクリックします。
[Select ステートメント構成] のウィザードステップで、[テーブルまたは表示から列を指定します] をクリックします。
[名前] ボックスの一覧の [Orders] をクリックします。
[列] パネルで、[OrderID] と [OrderDate] の列を選択します。
[WHERE] をクリックして、SELECT ステートメントのパラメータを追加します。
[WHERE 句の追加] ウィンドウの [列] ボックスの一覧の [CustomerID] をクリックします。
[ソース] ボックスの一覧の [なし] をクリックします。
[追加] をクリックします。

親 GridView コントロールにバインドされた各行の CustomerID 値に設定する選択パラメータが作成されます。
[OK] をクリックします。
[次へ] をクリックします。
[完了] をクリックします。
ツールボックスの [データ] グループから、GridView コントロールを ItemTemplate の編集可能な領域にドラッグします。

[GridView タスク] スマートタグが表示されない場合は、GridView コントロールを右クリックし、[スマートタグの表示] をクリックします。
[GridView タスク] スマートタグの [データソースの選択] ボックスの一覧で、入れ子の SqlDataSource コントロールである SqlDataSource2 の名前をクリックします。
親 GridView コントロールである GridView1 を右クリックし、[スマートタグの表示] をクリックします。
[GridView タスク] パネルの [テンプレート編集の終了] をクリックします。

メモ :

入れ子の GridView コントロールはデザインビューには表示されません。
GridView1 の [プロパティ] パネルの [イベント] をクリックします。
[RowDataBound] ボックスに「GridView1_RowDataBound」と入力し、Enter キーを押します。

Visual Web Developerにより、GridView コントロールの RowDataBound イベントのイベントハンドラが作成されます。コードは、次のコード例のようになります。
```
Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

End Sub
```
```
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{

}
```

メモ :
入れ子の GridView コントロールはデザインビューには表示されません。

プロシージャに次のコードを追加します。

If e.Row.RowType = DataControlRowType.DataRow Then
    Dim s As SqlDataSource = CType(e.Row.FindControl("SqlDataSource2"), SqlDataSource)
    s.SelectParameters(0).DefaultValue = e.Row.Cells(0).Text
End If

if (e.Row.RowType == DataControlRowType.DataRow)
{
    SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
    s.SelectParameters[0].DefaultValue = e.Row.Cells[0].Text;
}

このコードは、現在の行の CustomerID 値を取得し、これを入れ子の SqlDataSource コントロールである SqlDataSource2 の選択パラメータ値として設定します。

変更内容をファイルに保存します。

ページのテスト

ここでページを実行できます。

ページをテストするには

Ctrl キーを押しながら F5 キーを押してページを実行します。

GridView コントロールは、Northwind の Customers テーブルのデータ行を表示し、各顧客の行に対して Northwind の Orders テーブルのデータを入れ子の状態で表示します。
ブラウザを閉じます。

入れ子の GridView コントロールによるキャッシュの使用

ここまでの手順で、入れ子の GridView コントロールが含まれるページを作成しました。前に説明したように、ページは一度親 GridView コントロール用にデータベースクエリしてから、再び入れ子になっている個々の GridView コントロール用にデータベースをクエリします。

データベースの負荷を削減するには、入れ子のクエリがすべての行を返すよう変更し、その結果をキャッシュに格納します。次に、入れ子になった個々の GridView コントロール用にキャッシュされた結果をフィルタします。

メモ :
大規模なデータベースの場合、これは実用的な解決策ではありません。大規模なデータベースからデータを取得する場合は、必要な行だけを取得するデータオブジェクトを構築し、ObjectDataSource コントロールを使用してバインドします。詳細については、「ObjectDataSource Web サーバーコントロールの概要」を参照してください。

大規模なデータベースの場合、これは実用的な解決策ではありません。大規模なデータベースからデータを取得する場合は、必要な行だけを取得するデータオブジェクトを構築し、ObjectDataSource コントロールを使用してバインドします。詳細については、「ObjectDataSource Web サーバーコントロールの概要」を参照してください。

クエリの結果をキャッシュに格納するように入れ子の SqlDataSource コントロールを構成するには

Default.aspx ページのデザイン モードで作業中であることを確認します。
親 GridView コントロールである GridView1 を右クリックし、[テンプレートの編集] をクリックします。
[Orders] 列の ItemTemplate で、入れ子の SqlDataSource コントロールである SqlDataSource2 を選択します。
[プロパティ] ウィンドウで、EnableCaching プロパティを true に設定します。
FilterExpression プロパティを CustomerID='{0}' に設定します。
FilterParameters プロパティの省略記号ボタン () をクリックして、[パラメータコレクションエディタ] ウィンドウを開きます。
[パラメータコレクションエディタ] ウィンドウの [パラメータの追加] をクリックします。
[名前] ボックスに「CustomerID」と入力します。
[OK] をクリックします。
入れ子の SqlDataSource コントロールである SqlDataSource2 を右クリックし、[スマートタグの表示] をクリックします。
[データソースの構成] をクリックします。
接続情報は変更しないで、[次へ] をクリックします。
[Select ステートメント構成] ステップの [テーブルまたは表示から列を指定します] をクリックします。
[コンピュータ] ボックスの一覧の [Orders] をクリックします。
[列] セクションの [OrderID]、[CustomerID]、および [OrderDate] の各列をオンにし、[次へ] をクリックします。
[完了] をクリックします。
入れ子の GridView コントロールである GridView2 のフィールドとキーを更新するかどうかを確認するプロンプトが表示されたら、[いいえ] をクリックします。

入れ子の GridView コントロールによって表示される列は変更されません。

入れ子の SqlDataSource コントロールである SqlDataSource2 の構成が完了しました。今後、このコントロールは、データベースからすべての注文データを取得し、ローカルにキャッシュするようになります。入れ子の GridView コントロールがデータにバインドされると、現在の行の CustomerID 値に関連する注文だけが表示されるようにフィルタ処理が行われます。
分離コードページを使用する場合は、ページの何も表示されていない領域を右クリックし、[コードの表示] をクリックします。

RowDataBound イベントハンドラのコードを次のように変更します。

If e.Row.RowType = DataControlRowType.DataRow Then
    Dim s As SqlDataSource = CType(e.Row.FindControl("SqlDataSource2"), SqlDataSource)
    s.FilterParameters(0).DefaultValue = e.Row.Cells(0).Text
End If

if (e.Row.RowType == DataControlRowType.DataRow)
{
    SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
    s.FilterParameters[0].DefaultValue = e.Row.Cells[0].Text;
}

このバージョンのコードでは、SqlDataSource コントロールの SelectParameters コレクションではなく、FilterParameters コレクションに値が設定されます。

ファイルを保存します。

ページのテスト

ここでページを実行できます。

ページをテストするには

Ctrl キーを押しながら F5 キーを押してページを実行します。

GridView コントロールは、Northwind の Customers テーブルのデータ行を表示し、各顧客の行に対して Northwind の Orders テーブルのデータを入れ子の状態で表示します。ただし、GridView コントロールにバインドされたすべてのデータは、最初の行がデータバインドされたときに一度だけ要求されます。データは、GridView コントロールの残りの行で使用できるようにキャッシュに格納されます。
ブラウザを閉じます。

次に行う作業

このチュートリアルでは、GridView コントロールの機能を拡張して、ASP.NET Web ページ上の入れ子の GridView コントロールを使用して関連データを表示できるようにする方法を説明しました。アプリケーションの機能を拡張して、データの更新や削除を有効にしたり、ユーザーが DetailsView コントロールや FormView コントロールを使用して新しいレコードを挿入できるようにすることも可能です。TextBox コントロール以外のコントロール、たとえば DropDownList コントロールなどを使用して値を変更することもできます。詳細については、次のトピックを参照してください。

参照

処理手順

方法 : データソースコントロールを使用するときに接続文字列をセキュリティ保護する

チュートリアル : GridView Web サーバーコントロールの編集中のドロップダウンリストの表示

チュートリアル : Web ページでの基本的なデータアクセス

次の方法で共有

チュートリアル : 入れ子の GridView コントロールの作成

必要条件

Web サイトの作成

ファイルシステム Web サイトを作成するには

GridView コントロールのデータソースの追加

GridView コントロールのデータソースを追加するには

データを表示する GridView コントロールの追加

データを表示するために GridView コントロールを追加および設定するには

関連データを表示する入れ子の GridView コントロールの追加

データを表示する入れ子の GridView コントロールを追加および設定するには

ページのテスト

ページをテストするには

入れ子の GridView コントロールによるキャッシュの使用

クエリの結果をキャッシュに格納するように入れ子の SqlDataSource コントロールを構成するには

ページのテスト

ページをテストするには

次に行う作業

参照

処理手順

その他のリソース

次の方法で共有

チュートリアル : 入れ子の GridView コントロールの作成

必要条件

Web サイトの作成

ファイル システム Web サイトを作成するには

GridView コントロールのデータ ソースの追加

GridView コントロールのデータ ソースを追加するには

データを表示する GridView コントロールの追加

データを表示するために GridView コントロールを追加および設定するには

関連データを表示する入れ子の GridView コントロールの追加

データを表示する入れ子の GridView コントロールを追加および設定するには

ページのテスト

ページをテストするには

入れ子の GridView コントロールによるキャッシュの使用

クエリの結果をキャッシュに格納するように入れ子の SqlDataSource コントロールを構成するには

ページのテスト

ページをテストするには

次に行う作業

参照

処理手順

その他のリソース

ファイルシステム Web サイトを作成するには

GridView コントロールのデータソースの追加

GridView コントロールのデータソースを追加するには