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

  • [アーティクル]

更新 : 2007 年 11 月

このチュートリアルでは、データ アクセス専用にデザインされたコントロールを使用して、単純なデータ バインド ページを作成する方法について説明します。

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

  • Microsoft Visual Web Developer Web 開発ツールで Microsoft SQL Server データベースに接続します。

  • ドラッグ アンド ドロップ編集を使用して、コードのないページで使用できるデータ アクセス要素を作成します。

  • SqlDataSource コントロールを使用して、データ アクセスおよびバインディングを管理します。

  • データと GridView コントロールを表示します。

  • GridView コントロールを設定して、並べ替えおよびページングを実行できるようにします。

  • 選択したレコードだけを表示する、フィルタ処理されたクエリを作成します。

前提条件

このチュートリアルを完了させるための要件を次に示します。

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

    tw738475.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 バージョンのアップグレードが必要になる場合があります。現在の MDAC バージョンをダウンロードするには、Microsoft Universal Data Access にアクセスしてください。

Web サイトの作成

「チュートリアル : Visual Web Developer での基本的な Web ページの作成」を完了して、Visual Web Developer で Web サイトを既に作成している場合は、その Web サイトを使用して、次のセクションに移動できます。それ以外の場合は、次の手順に従って、新しい 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 という名前の新しいページが作成されます。

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

ASP.NET Web ページにデータを表示するための要件を、次に示します。

  • データ ソース (データベースなど) に対する接続。

    次の手順では、SQL Server Northwind データベースへの接続を作成します。

  • ページのデータ ソース コントロール。クエリを実行し、クエリの結果を管理します。

  • データを実際に表示するページのコントロール。

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

これらの要素を Web サイトに個別に追加できます。ただし、最も簡単な開始方法は、GridView コントロールを使用してデータ表示を視覚化し、ウィザードを使用して接続およびデータ ソース コントロールを作成することです。次の手順では、ページにデータを表示するために必要な 3 つの要素をすべて作成する方法について説明します。

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

  1. Visual Web Developer でデザイン ビューに切り替えます。

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

  3. [GridView タスク] ショートカット メニューが表示されない場合、GridView コントロールを右クリックし、[スマート タグの表示] をクリックします。

  4. [GridView タスク] メニューの [データ ソースの選択] ボックスで、[<新しいデータ ソース>] をクリックします。

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

    データ ソース構成ウィザード

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

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

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

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

    データ ソースの構成ウィザードが表示され、接続を選択できるページが表示されます。

    [接続の選択] ダイアログ ボックス

  7. [新しい接続] をクリックします。

  8. [データ ソースの選択] ダイアログ ボックスの [データ ソース] で、[Microsoft SQL Server] をクリックし、[続行] をクリックします。

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

  9. [サーバー名] ボックスに使用する SQL Server の名前を入力します。

    [接続の追加] ダイアログ ボックス

  10. ログオン資格情報については、SQL Server データベースにアクセスするのに適したオプション (統合セキュリティまたは特定の ID とパスワード) を選択します。必要に応じて、ユーザー名とパスワードを入力します。

  11. [データベースの選択または入力] をクリックし、「Northwind」と入力します。

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

    データ ソースの構成 - <DataSourceName> ウィザードが表示され、接続情報が読み込まれます。

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

    ウィザードが表示され、接続文字列を構成ファイルに保存するためのページが表示されます。接続文字列を構成ファイルに格納すると、次の 2 つの利点があります。

    1. この方が接続文字列をページ内に格納するよりも安全です。

    2. 複数のページで同じ接続文字列を再利用できます。

  14. [はい、この接続を次の名前で保存します] チェック ボックスがオンになっていることを確認して、[次へ] をクリックします (既定の接続文字列名 NorthwindConnectionString のままにしておくこともできます)。

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

  15. [テーブルまたは表示から列を指定します] の [コンピュータ] ボックスで、[Customers] をクリックします。

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

    ウィザードが表示され、ページの下部のボックスに作成中の SQL ステートメントが表示されます。

    ステートメントの構成ペイン

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

    ウィザードを使用すると、選択基準 (WHERE 句) およびその他の SQL クエリ オプションを指定できます。チュートリアルのこの部分では、選択または並べ替えオプションのない単純なステートメントを作成します。

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

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

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

    ウィザードが閉じ、ページに戻ります。ウィザードの実行により、次の 2 つのタスクが完了しました。

    • SqlDataSource1 という名前の SqlDataSource コントロールが作成および設定されました。このコントロールにより、指定した接続およびクエリ情報が取り込まれます。

    • GridView コントロールが SqlDataSource にバインドされました。したがって、GridView コントロールには、SqlDataSource コントロールによって返されたデータが表示されます。

    SqlDataSource コントロールのプロパティを表示すると、ウィザードにより ConnectionString プロパティおよび SelectQuery プロパティの値が作成されたことがわかります。

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

    GridView コントロールの外観は、簡単に変更できます。デザイン ビューで、GridView コントロールを右クリックし、[スマート タグの表示] をクリックします。[GridView タスク] メニューの [オートフォーマット] をクリックして、スキームを適用します。

ページのテスト

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

ページをテストするには

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

    ブラウザにページが表示されます。GridView コントロールに、Customers テーブルからすべてのデータ行が表示されます。

  2. ブラウザを閉じます。

並べ替えとページングの追加

コードを記述することなく、GridView コントロールに並べ替えとページングを追加できます。

並べ替えとページングを追加するには

  1. デザイン ビューで、GridView コントロールを右クリックし、[スマート タグの表示] をクリックします。

  2. [GridView タスク] ショートカット メニューの [並べ替えを有効にする] チェック ボックスをオンにします。

    GridView コントロールの列見出しがリンクに変わります。

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

    ページ番号のリンクを持つ GridView コントロールにフッターが追加されます。

  4. オプションで、[プロパティ] を使用して、PageSize プロパティの値を 10 からより小さいページ サイズに変更することもできます。

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

    列見出しをクリックすると、その列の内容で並べ替えを実行できるようになります。GridView コントロールのページ サイズよりも多くのレコードがデータ ソース内にある場合は、GridView コントロールの下部にあるページ移動リンクを使用すると、ページ間を移動できます。

  6. ブラウザを閉じます。

フィルタ処理の追加

選択したデータだけをページに表示する場合も多くあります。このチュートリアルでは、SqlDataSource コントロールのクエリを変更して、ユーザーが特定の都市の顧客レコードを選択できるようにします。

まず、TextBox コントロールを使用して、ユーザーが都市の名前を入力できるテキスト ボックスを作成します。次に、パラメータ付きのフィルタ (WHERE 句) を含めるようにクエリを変更します。このプロセスの一部として、SqlDataSource コントロールのパラメータ要素を作成します。パラメータ要素により、SqlDataSource コントロールがパラメータ付きのクエリ、つまりテキスト ボックスから値を取得する方法が設定されます。

チュートリアルのこの部分を完了すると、ページがデザイン ビューで次のように表示されます。

デザイン ビューのデータ フィルタ

都市を指定するためのテキスト ボックスを追加するには

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

    Button コントロールは、ページをサーバーにポストするためだけに使用されます。このコントロールのコードを記述する必要はありません。

  2. TextBox コントロールの [プロパティ] で、[ID] を「textCity」に設定します。

  3. 必要に応じて、キャプションとして機能するテキスト ボックスの前に「City」のようなテキストを入力します。

  4. Button コントロールの [プロパティ] で、[テキスト] を「Submit」に設定します。

これで、フィルタを含めるようにクエリを変更できます。

パラメータ付きフィルタを使用してクエリを変更するには

  1. SqlDataSource コントロールを右クリックし、[スマート タグの表示] をクリックします。

  2. [SqlDataSource タスク] メニューの [データ ソースの構成] をクリックします。

    データ ソースの構成 - <Datasourcename> ウィザードが表示されます。

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

    ウィザードには、SqlDataSource コントロールに現在設定されている SQL コマンドが表示されます。

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

    [WHERE 句の追加] ページが表示されます。

  5. [列] ボックスの [City] をクリックします。

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

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

  8. [パラメータのプロパティ] の [コントロール ID] ボックスで、[textCity] をクリックします。

    [Where 句の追加] ダイアログ ボックス

    前の 5 つの手順では、クエリが、前の手順で追加した TextBox コントロールから [City] の検索値を取得することを指定します。

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

    作成した WHERE 句がページの下部のボックスに表示されます。

  10. [OK] をクリックして、[WHERE 句の追加] ページを閉じます。

  11. データ ソースの構成 - <DataSourceName> ウィザードの [次へ] をクリックします。

  12. [クエリのテスト] ページの [クエリのテスト] をクリックします。

    ウィザードが表示され、[パラメータ値のエディタ] ページが表示されます。このページは、WHERE 句で使用する値の入力を要求します。

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

    London の顧客レコードが表示されます。

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

これで、フィルタ処理をテストできます。

フィルタ処理をテストするには

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

  2. テキスト ボックスに「London」と入力し、[送信] をクリックします。

    London からの顧客の一覧が GridView コントロールに表示されます。

  3. 「Buenos Aires」、「Berlin」など、その他の都市も試してみます。

次の手順

データ アクセスは、多くの Web アプリケーションにとって重要です。このチュートリアルでは、Web ページのデータを処理する方法の概要のみを説明しました。データ アクセスの追加機能を試すこともできます。たとえば、次の操作を実行できます。

参照

概念

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