次の方法で共有

チュートリアル : Visual Studio でのマスター/詳細 Web ページの作成

  • [アーティクル]

更新 : 2007 年 11 月

多くの Web ページでは、複数の方法でデータの表示が可能で、関連テーブルのデータを表示することもよくあります。このチュートリアルでは、複数のコントロールおよび複数のテーブル (マスター/詳細リレーションシップを持つものを含む) のデータを操作する方法について説明します。このチュートリアルでは、以下のタスクを行います。

  • ドロップダウン リストにデータベースのデータを読み込みます。

  • WHERE 句を指定した SQL ステートメント (パラメータ クエリ) によるフィルタを作成します。

  • ユーザーによるドロップダウン リストからの選択に基づいてフィルタ処理されたデータを表示します。

  • DetailsView コントロールを使用して選択したレコードの詳細を表示します。

  • あるページで 1 つのレコードを選択し、別のページに関連のレコードを表示します。

前提条件

このチュートリアルを実行するための要件は次のとおりです。

  • SQL Server Northwind データベースへのアクセス。SQL Server の Northwind サンプル データベースをダウンロードし、インストールする方法については、Microsoft SQL Server の Web サイトの「サンプル データベースのインストール」を参照してください。

    stc0szde.alert_note(ja-jp,VS.90).gifメモ :

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

  • 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」を参照してください。

Web サイトの作成

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

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

  1. Visual Web Developer を開きます。

  2. [ファイル] メニューの [新しい Web サイト] をクリックします。

    [新しい Web サイト] ダイアログ ボックスが表示されます。

  3. [Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。

  4. [場所] ボックスに、Web サイトのページを格納するフォルダの名前を入力します。

    たとえば、フォルダ名として「C:\WebSites」と入力します。

  5. [言語] ボックスの一覧で、作業に使用するプログラミング言語をクリックします。

  6. [OK] をクリックします。

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

SQL Server への接続

データを操作するには、データベースへの接続を確立する必要があります。このチュートリアルでは、Web ページやコントロールの操作とは別に接続を作成します。

SQL Server への接続を作成するには

  1. Ctrl キーと Alt キーを押しながら S キーを押してデータベース エクスプローラを表示します。データベース エクスプローラで、[データ接続] を右クリックし、[接続の追加] をクリックします。

    [データ ソースの変更] ダイアログ ボックスが表示されます。

  2. [データ ソースの変更] ダイアログ ボックスで、[Microsoft SQL Server] をクリックし、[OK] をクリックします。

  3. [接続の追加] ダイアログ ボックスで以下の作業を行います。

    • SQL Server コンピュータの名前を入力するか選択します。使用しているコンピュータ上にサーバーがインストールされている場合は、「(local)」と入力します。

    • [SQL Server 認証を使用] をクリックします。

    • ユーザー名とパスワードを入力します。

    • [パスワードの保存] をクリックします。

    • データベースとして [Northwind] を選択します。

  4. [接続の確認] をクリックし、接続を確認したら [OK] をクリックします。

    接続がサーバー エクスプローラに追加されます。

マスターとしてのドロップダウン リストの使用

ここでは、ドロップダウン リストをページに追加し、そのリストに Northwind テーブルからカテゴリの一覧を設定します。ユーザーがカテゴリを選択すると、そのカテゴリに属する製品がページに表示されます。

ドロップダウン リストを作成して値を設定するには

  1. Default.aspx ページに切り替えるか開きます。作成済みの Web サイトを使用して作業する場合、このチュートリアルで作業できるページを追加するか、開きます。

  2. デザイン ビューに切り替えます。

  3. ページに「Select Products By Category」と入力し、ツールボックスの上にある [フォーマットのブロック] ドロップダウン リストを使用して、テキストに見出しの書式指定を行います。

  4. ツールボックスの [標準] グループから、DropDownList コントロールをページにドラッグします。

  5. [DropDownList タスク] の [AutoPostBack を有効にする] チェック ボックスをオンにします。

    これで、一覧から項目が選択されると、ユーザーがボタンをクリックしなくても、ページからサーバーへのポストバックが実行されるようにコントロールが設定されます。

  6. [DropDownList タスク] メニューの [データ ソースの選択] をクリックします。

    データ ソースの選択ウィザードが起動します。

  7. [データ ソースの選択] リストで、[<新しいデータ ソース>] をクリックします。

    [データ ソース構成ウィザード] ダイアログ ボックスが表示されます。

  8. [データベース] をクリックします。

    これにより、SQL ステートメントをサポートするデータベースからデータを取得することが指定されます。これには、SQL Server データベースおよびその他の OLE-DB 互換のデータベースが含まれます。

    [データ ソースに ID を指定します] ボックスに、既定のデータ ソース コントロール名が表示されます (SqlDataSource1)。この名前はそのままにしておいてかまいません。

  9. [OK] をクリックします。

    [データ ソースの構成 - SqlDataSource1] ページに、接続を選択できるページが表示されます。

  10. ドロップダウン リストから、先にチュートリアルで作成した [Northwind] 接続を選択します。

  11. [次へ] をクリックします。

    ウィザードに、接続文字列を構成ファイルに保存するためのページが表示されます。

  12. [はい、この接続を次の名前で保存します] チェック ボックスがオンになっていることを確認し、[次へ] をクリックします。既定の接続文字列名はそのままにしておいてかまいません。

    ウィザードに、データベースから取得するデータを指定するためのページが表示されます。

  13. [テーブルまたは表示から列を指定します] の下の [コンピュータ] の一覧の [カテゴリ] をクリックします。

  14. [列] ボックスで、[CategoryID] チェック ボックスと [CategoryName] チェック ボックスをオンにします。

  15. [次へ] をクリックします。

  16. [クエリのテスト] をクリックして、必要なデータを取得していることを確認します。

  17. [完了] をクリックします。

    データ ソース構成ウィザードが表示され、設定したデータ ソース コントロールの名前が表示されます。

  18. [DropDownList で表示するデータ フィールドの選択] の一覧の [CategoryName] をクリックします。

    stc0szde.alert_note(ja-jp,VS.90).gifメモ :

    一覧に項目が表示されない場合は、[スキーマを最新の情報に更新] リンクをクリックします。

    これで、[CategoryName] フィールドの値がドロップダウン リストの項目のテキストとして表示されるように指定されます。

  19. [DropDownList の値のデータ フィールドの選択] の一覧の [CategoryID] をクリックします。

    これで、いずれかの項目が選択されると、[CategoryID] フィールドがその項目の値として返されるように指定されます。

  20. [OK] をクリックします。

先に進む前に、ドロップダウン リストをテストします。

ドロップダウン リストをテストするには

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

  2. ページが表示されたら、ドロップダウン リストを調べます。

  3. カテゴリを選択して、一覧がポストバックされることを確認します。

    これで、ドロップダウン リストに選択されたカテゴリの製品を表示する準備が整いました。

グリッドを使用した詳細情報の表示

ページを拡張してグリッドを含めます。ユーザーがカテゴリのドロップダウン リストから選択を行うと、グリッドにそのカテゴリの製品が表示されます。

グリッドを使用して詳細情報を表示するには

  1. Default.aspx ページ (または作業中のページ) に切り替えるか開きます。デザイン ビューに切り替えます。

  2. ツールボックスの [データ] グループから、GridView コントロールをページにドラッグします。

  3. [GridView タスク] メニューの [データ ソースの選択] の一覧の [<新しいデータ ソース>] をクリックします。

    データ ソース構成ウィザードが開きます。

  4. [データベース] をクリックします。

    [データ ソースに ID を指定します] ボックスに、既定のデータ ソース コントロール名が表示されます (SqlDataSource2)。この名前はそのままにしておいてかまいません。

  5. [OK] をクリックします。

    接続を選択できるページがウィザードによって表示されます。

  6. 接続ドロップダウン リストから、先にチュートリアルで作成し格納した接続 ([NorthwindConnectionString]) を選択します。

  7. [次へ] をクリックします。

    ウィザードに [データ ソースの構成 - SqlDataSource2] ページが表示され、そのページで SQL ステートメントを作成できます。

  8. [コンピュータ] ボックスの一覧の [Products] をクリックします。

  9. [列] ボックスで、[ProductID]、[ProductName]、および [CategoryID] の各チェック ボックスをオンにします。

  10. [Where] をクリックします。

    [WHERE 句の追加] ダイアログ ボックスが表示されます。

  11. [列] の一覧の [CategoryID] をクリックします。

  12. [演算子] ボックスの [=] をクリックします。

  13. [ソース] ボックスの [コントロール] をクリックします。

  14. [パラメータのプロパティ] の下にある [コントロール ID] ボックスの [DropDownList1] をクリックします。

    最後の 2 つの手順では、クエリにより上で追加した DropDownList コントロールからカテゴリ ID の検索値を取得するように指定しました。

  15. [追加] をクリックします。

  16. [OK] をクリックして、[WHERE 句の追加] ダイアログ ボックスを閉じます。

  17. [次へ] をクリックします。

  18. プレビュー ページで [クエリのテスト] をクリックします。

    ウィザードによって、WHERE 句で使用する値の指定を求めるダイアログ ボックスが表示されます。

  19. ボックスに「4」と入力し、[OK] をクリックします。

    カテゴリ 4 の製品レコードが表示されます。

  20. [完了] をクリックして、ウィザードを閉じます。

これで、マスター/詳細の表示をテストする準備が整いました。

ページをテストするには

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

    ページが表示されると、ドロップダウン リストにある最初の項目の製品が表示されます。

  2. 一覧からカテゴリを 1 つ選択し、それがグリッドに表示された製品と一致することを確認します。

同じページでのマスター/詳細データの表示

ここでは、関連テーブルから取得したデータを同じページに表示します。マスター テーブルのデータは、グリッドに表示され、ユーザーはグリッドの個々の行を選択できます。行を選択すると、ページ上にスクロール可能なコントロールが表示され、そこに 1 つ以上の詳細レコードが表示されます。これを示すために、Northwind の Categories テーブルをマスター テーブルとして使用し、Products テーブルを詳細テーブルとして使用します。

マスター レコードを表示するには

  1. Web サイトに新しいページを追加し、MasterDetails2.aspx と名前を付けます。

  2. デザイン ビューに切り替えます。

  3. ページに「Master/Detail Page」と入力し、このテキストを見出しとして書式指定します。

  4. ツールボックスの [データ] グループから、GridView コントロールをページにドラッグします。

  5. [GridView タスク] メニューの [データ ソースの選択] の一覧の [<新しいデータ ソース>] をクリックし、次の手順に従って GridView コントロールのデータ ソースを構成します。

    1. [データベース] をクリックします。

    2. [OK] をクリックします。

    3. 接続ドロップダウン リストから、先のチュートリアルで作成し格納した接続 ([NorthwindConnectionString]) を選択します。

    4. [次へ] をクリックします。

    5. [コンピュータ] ボックスの一覧の [カテゴリ] をクリックします。

    6. [列] ボックスで、[CategoryID] チェック ボックスと [CategoryName] チェック ボックスをオンにします。

    7. [次へ] をクリックし、[完了] をクリックします。

  6. [GridView] コントロールをクリックし、[GridView タスク] メニューの [列の編集] をクリックします。

    [フィールド] ダイアログ ボックスが表示されます。

  7. [使用できるフィールド] の下の [CommandField] ノードを開き、[選択] をクリックし、次に [追加] をクリックして [選択されたフィールド] の一覧に追加します。

  8. [選択されたフィールド] の一覧で、[選択] をクリックし、次に CommandField プロパティのグリッドでその SelectText プロパティを Details に設定します。

  9. [OK] をクリックして、[フィールド] ダイアログ ボックスを閉じます。

    [Details] ハイパーリンクが表示された新しい列がグリッドに追加されます。

  10. [GridView] コントロールをクリックし、[プロパティ] ウィンドウで DataKeyNames プロパティが「CategoryID」に設定されていることを確認します。

    これにより、グリッドの行を選択すると、現在表示されているカテゴリ レコードのキーを ASP.NET が既知の場所で見つけられるように指定しました。

グリッドでは、個々のカテゴリを選択できます。次の手順では、詳細レコード (選択したカテゴリに関連付けられた製品) を表示する DetailsView コントロールを追加します。DetailsView コントロールでは、データの取得に別の SQL クエリが使用されるので、別のデータ ソース コントロールが必要となります。

関連するレコードを表示するようにクエリを構成するには

  1. 詳細ビューの MasterDetails2.aspx ページで、Enter キーを押して [SqlDataSource1] コントロールの下に空間を作ります。

  2. ツールボックスの [データ] グループから、[DetailsView] コントロールをページにドラッグします。

  3. 次の手順を実行して、2 番目のデータ ソース コントロールを使用するように設定します。

    1. [データ ソースの選択] リストで、[<新しいデータ ソース>] をクリックします。

    2. [データベース] をクリックします。

    3. [OK] をクリックします。

    4. 接続ドロップダウン リストで、先にチュートリアルで作成し格納した接続をクリックします。

    5. [次へ] をクリックします。

    6. [テーブルまたは表示から列を指定します] の下の [コンピュータ] の一覧の [Products] をクリックします。

    7. [列] ボックスで、[ProductID]、[ProductName]、および [CategoryID] の各チェック ボックスをオンにします。

    8. [Where] をクリックします。

      [WHERE 句の追加] ダイアログ ボックスが表示されます。

    9. [列] の一覧の [CategoryID] をクリックします。

    10. [演算子] ボックスの [=] をクリックします。

    11. [ソース] ボックスの [コントロール] をクリックします。

    12. [パラメータのプロパティ] の下の [コントロール ID] ボックスの一覧の [GridView1] をクリックします。2 番目のグリッドのクエリは、最初のグリッドで選択された値をパラメータとして使用します。

    13. [追加] をクリックし、[OK] をクリックして、[WHERE 句の追加] ダイアログ ボックスを閉じます。

    14. [次へ] をクリックします。

    15. プレビュー ページで [クエリのテスト] をクリックします。

      ウィザードによって、WHERE 句で使用する値の指定を求めるダイアログ ボックスが表示されます。

    16. ボックスに「4」と入力し、[OK] をクリックします。

      カテゴリ 4 の製品レコードが表示されます。

    17. [完了] をクリックします。

  4. [DetailsView タスク] メニューの [ページングを有効にする] チェック ボックスをオンにします。

    これにより、個々の製品レコードをスクロールして閲覧できるようになります。

  5. 必要に応じて、[プロパティ] ウィンドウで [PagerSettings] ノードを開き、別の [モード] 値を選択します。

    既定で、ページ番号をクリックしてレコードを閲覧できますが、次のリンクや前のリンクを使用するオプションを選択することもできます。

以上で、マスター グリッドと詳細ビューの組み合わせをテストする準備ができました。

ページをテストするには

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

  2. グリッドで、カテゴリを選択します。

    [DetailsView] コントロールに、選択したカテゴリに関連付けられた製品が表示されます。

  3. [DetailsView] コントロールのページャ リンクを使用して、同じカテゴリの別の製品に移動します。

  4. グリッドで、別のカテゴリを選択します。

  5. [DetailsView] コントロールで、選択したカテゴリの製品を閲覧します。

マスター/詳細データの別々のページでの表示

このチュートリアルの最終段階では、上記の表示方法を変え、マスター レコードと詳細レコードを別々のページに表示します。マスター レコードは、同じく、個々のレコードのハイパーリンクが含まれているグリッドに表示されます。ユーザーがハイパーリンクをクリックすると、別のページに移動し、完全な Products レコードが含まれている DetailsView コントロールで詳細レコードを確認できます。

マスター レコードを表示するには

  1. Web サイトに新しいページを追加し、そのページに「MasterCustomers.aspx」という名前を付けます。

  2. デザイン ビューに切り替えます。

  3. ページに「Customers」と入力し、このテキストを見出しとして書式指定します。

  4. ツールボックスの [データ] フォルダから、[GridView] コントロールをページにドラッグします。

  5. コントロールの [GridView タスク] メニューで、[データ ソースの選択] の一覧の [<新しいデータ ソース>] をクリックし、ウィザードで次の手順を実行します。

    • [データベース] をクリックします。

    • Northwind データベース ([NorthwindConnectionString] 接続) に接続します。

    • [Customers] テーブルから [CustomerID]、[CompanyName]、および [City] の各列を取得します。

  6. 必要に応じて、[GridView タスク] メニューの [ページングを有効にする] チェック ボックスをオンにします。

  7. [GridView タスク] メニューの [列の編集] をクリックします。

    [フィールド] ダイアログ ボックスが表示されます。

  8. [自動生成フィールド] チェック ボックスをオフにします。

  9. [使用できるフィールド] の下の [HyperLinkField] をクリックし、[追加] をクリックし、次のプロパティを設定します。

    プロパティ

    値

    Text

    Details

    DatahrefFields

    CustomerID

    これにより、ハイパーリンクの値が [CustomerID] 列から取得されます。

    DatahrefFormatString

    DetailsOrders.aspx?custid={0}

    これにより、DetailsOrders.aspx ページに移動するためのハードコーディングされたリンクが作成されます。このリンクは、custid という名前のクエリ文字列変数を渡す役割も果たします。この変数の値は、DatahrefFields プロパティで参照されている列を使用して代入されます。

  10. [OK] をクリックして、[フィールド] ダイアログ ボックスを閉じます。

これで、マスタ ページの値を受け取る詳細ページを作成する準備ができました。

詳細ページを作成するには

  1. Web サイトに新しいページを追加し、そのページに「DetailsOrders.aspx」という名前を付けます。

  2. デザイン ビューに切り替えます。

  3. ページに「Orders」と入力し、このテキストを見出しとして書式指定します。

  4. ツールボックスの [データ] フォルダから、[GridView] コントロールをページにドラッグします。

  5. コントロールの [GridView タスク] メニューの [データ ソースの選択] の一覧の [<新しいデータ ソース>] をクリックします。

  6. [データ ソースの種類を選びます。] の一覧で、[データベース] をクリックし、[OK] をクリックします。

  7. 接続の一覧から、先にチュートリアルで作成し格納した接続 ([NorthwindConnectionString]) を選択します。

  8. [次へ] をクリックします。

    SQL ステートメントを作成できるページがウィザードによって表示されます。

  9. [コンピュータ] ボックスの一覧の [Orders] をクリックします。

  10. [列] ボックスで、[OrderID]、[CustomerID]、および [OrderDate] の各チェック ボックスをオンにします。

  11. [Where] をクリックします。

  12. [列] ボックスで、[CustomerID] チェック ボックスをオンにします。

  13. [演算子] ボックスの一覧の [=] をクリックします。

  14. [ソース] ボックスの一覧の [QueryString] をクリックします。

    これにより、クエリ文字列によりページに渡された値を基にクエリがレコードを選択するように指定しました。

  15. [パラメータのプロパティ] の下の [QueryString フィールド] ボックスに「custid」と入力します。

    クエリは顧客 ID の値をクエリ文字列から取得します。このクエリ文字列は、MasterCustomers.aspx ページで [Details] リンクをクリックしたときに作成されたものです。

  16. [追加] をクリックします。

  17. [OK] をクリックして、[WHERE 句の追加] ダイアログ ボックスを閉じます。

  18. [次へ] をクリックし、[完了] をクリックしてウィザードを閉じます。

  19. ツールボックスの [標準] ノードから、[HyperLink] コントロールをページにドラッグします。その Text プロパティを「Return to Customers」に設定し、href プロパティを「MasterCustomers.aspx」に設定します。

これで、関連付けられたマスター/詳細ページをテストする準備が整いました。

ページをテストするには

  1. MasterCustomers.aspx ページに切り替えます。

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

  3. 顧客の [Details] リンクをクリックします。

    ブラウザに、DetailsOrders.aspx ページが開き、選択した顧客の注文が表示されます。ブラウザの [アドレス] ボックスの URL が次のように記述されています。

    DetailsOrder.aspx?custid=x

    x は選択した顧客の ID を示します。

  4. [Return to Customers] リンクをクリックし、別の顧客を選択し、再度 [Details] リンクをクリックして、どの顧客を選択しても注文が表示されることをテストします。

次の手順

このチュートリアルでは、関連テーブルからのデータを表示する方法をいくつか示しました。すべてのシナリオは、パラメータ クエリを使用し、パラメータ値は実行時に自動的にクエリに渡される点が共通しています。関連データを使用した操作方法についてさらに学習できます。たとえば、次の場合です。

参照

概念

データ ソース コントロールの概要

データ ソース コントロールによるデータの変更