チュートリアル : GridView Web サーバー コントロールの編集中のドロップダウン リストの表示
更新 : 2007 年 11 月
GridView コントロールには、既定で、編集用のテキスト ボックスが表示されます。ASP.NET の GridView コントロールに組み込まれた高度な機能を使用すると、編集画面にドロップダウン リストを追加できます。これを Web フォームで行うためにフォームの分離コードを作成する必要はありません。このチュートリアルでは、以下のタスクを行います。
SQL データを表示できるように GridView コントロールを設定します。
GridView コントロールにデータを表示します。
GridView コントロールでの編集中にドロップダウン リストを表示します。
前提条件
このチュートリアルを実行するための要件は次のとおりです。
Microsoft Visual Web Developer (Visual Studio)。
SQL Server Express Edition。SQL Server がインストールされている場合、代わりに使用することもできますが、いくつかの手順を微調整する必要があります。
コンピュータにインストールされた Northwind サンプル データベース。SQL Server の Northwind サンプル データベースをダウンロードし、インストールする方法については、Microsoft SQL Server の Web サイトの「サンプル データベースのインストール」を参照してください。
.gif "メモ")
メモ :Northwind データベースに接続する方法は他にもあります。
Web サイトおよびページの作成
次の手順に従って、新しい Web サイトおよびページを作成します。
ファイル システム Web サイトを作成するには
Visual Web Developer を開きます。
[ファイル] メニューの [新規作成] をポイントし、[Web サイト] をクリックします。Visual Web Developer Express を使用している場合は、[ファイル] メニューの [新しい Web サイト] をクリックします。
[新しい Web サイト] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[場所] ボックスで、[ファイル システム] をクリックし、Web サイトを格納するフォルダの名前を入力します。
たとえば、フォルダ名を「C:\WebSites\DropDownEdit」と入力します。
[言語] ボックスで、作業に使用する言語をクリックします。
[OK] をクリックします。
Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。
SQL データ ソースへの接続の作成
最初に、Northwind データベースへの接続を作成します。
SQL Server に対する接続を作成するには
サーバー エクスプローラで [データ接続] を右クリックし、[接続の追加] をクリックします。Visual Web Developer Express を使用している場合は、データベース エクスプローラを使用します。
[接続の追加] ダイアログ ボックスが表示されます。
[データ ソース] ボックスの一覧に [Microsoft SQL Server データベース ファイル (SqlClient)] が表示されない場合、[変更] をクリックして [データ ソースの変更] ダイアログ ボックスを開き、[Microsoft SQL Server データベース ファイル (SqlClient)] を選択します。
[データ ソースの選択] ページが表示されたら、[データ ソース] ボックスで、使用するデータ ソースの種類を選択します。このチュートリアルでは、データ ソースの種類として [Microsoft SQL Server] をクリックします。[データ プロバイダ] ボックスの [.NET Framework SQL Server 用データ プロバイダ] をクリックし、[続行] をクリックします。
メモ :Visual Web Developer で [サーバー エクスプローラ] タブが表示されない場合は、[表示] メニューの [サーバー エクスプローラ] をクリックします。[データベース エクスプローラ] タブが表示されない場合は、[表示] メニューの [データベース エクスプローラ] をクリックします。
[データベース ファイル名] ボックスに Northwind サンプル データベースをインストールした場所を入力するか、参照して指定します。
Northwnd.mdf データベース ファイルを選択し、[開く] をクリックします。
[パスワードの保存] チェック ボックスをオンにします。
[接続の確認] をクリックし、接続を確認したら [OK] をクリックします。
サーバー エクスプローラの [データ接続] の下に、新しい接続が作成されます。
データベースのデータを表示するための GridView コントロールの構成
ここでは、グリッドにデータを動的に代入します。
単純な並べ替えを有効にするには
Default.aspx ページに切り替えるか開きます。
デザイン ビューに切り替えます。
ツールボックスの [データ] グループから、GridView コントロールをページにドラッグします。
[GridView タスク] メニューの [データ ソースの選択] ボックスの [<新しいデータ ソース>] をクリックします。
データ ソース構成ウィザードが表示されます。
[データベース] をクリックします。
これにより、SQL Server などの OLE DB 互換データベースを含む、SQL ステートメントをサポートするデータベースからデータを取得するように指定します。
[データ ソースに ID を指定します] ボックスに、既定のデータ ソース コントロール名 SqlDataSource1 が表示されます。この名前はそのままにしておいてかまいません。
[OK] をクリックします。
データ ソースの構成ウィザードが表示されます。
[アプリケーションがデータベースへの接続に使用するデータ接続] ボックスで、「SQL Server に対する接続を作成するには」で作成した接続名を入力し、[次へ] をクリックします。
ウィザードに、接続文字列を構成ファイルに保存するためのページが表示されます。接続文字列を構成ファイルに格納すると、次の 2 つの利点があります。
この方がページ内に格納するよりも安全です。
同じ接続文字列を複数のページで使用できます。
[はい、この接続を次の名前で保存します] チェック ボックスをオンにし、[次へ] をクリックします。
ウィザードに、データベースから取得するデータを指定するためのページが表示されます。
[テーブルまたは表示から列を指定します] の下の [コンピュータ] ボックスの [Employees] をクリックします。
[列] の下の、[EmployeeID]、[LastName]、[FirstName]、[HireDate]、および [City] の各チェック ボックスをオンにします。
ウィザードにより、作成中の SQL ステートメントがページの下部にあるボックスに表示されます。
メモ :ウィザードでは、選択基準 (WHERE 句) やその他の SQL クエリ オプションを指定できます。このチュートリアルでは、選択オプションや並べ替えオプションを指定しない簡単なステートメントを作成します。
[詳細設定] をクリックし、[INSERT、UPDATE、および DELETE ステートメントの生成] チェック ボックスをオンにし、[OK] をクリックします。
これで、前に構成した Select ステートメントに基づいて、SqlDataSource1 コントロール用の Insert、Update、および Delete の各ステートメントが作成されます。
メモ :これらのステートメントは、[カスタム SQL ステートメントまたはストアド プロシージャを指定する] を選択し、SQL クエリを入力する方法によって、手動でも作成できます。
[次へ] をクリックします。
[クエリのテスト] をクリックし、必要なデータが取得されることを確認します。
[完了] をクリックします。
GridView コントロールを右クリックし、[スマート タグの表示] をクリックします。[GridView タスク] メニューの [編集を有効にする] ボックスをクリックします。
ここでページをテストできます。
ページをテストするには
Ctrl キーを押しながら F5 キーを押してページを実行します。
[GridView] コントロールに [EmployeeID]、[LastName]、[FirstName]、[HireDate]、および [City] の各列が表示されます。
行の横の [編集] リンクをクリックします。
編集するために選択した行が、[LastName]、[FirstName]、[HireDate]、および [City] の各列が編集可能なテキスト ボックスになった状態で表示されます。[EmployeeID] はキー フィールドであり、編集ができないため、テキスト ボックスには表示されません。
[LastName] などのフィールドを変更し、[更新] をクリックします。
[GridView] コントロールに [EmployeeID]、[LastName]、[FirstName]、[HireDate]、および [City] の各列が表示されます。[LastName] 列は新しい値で更新されています。
ブラウザを閉じます。
GridView コントロールの編集中のドロップダウン リストの表示
ここでは、グリッドで行を編集しているときに選択可能なドロップダウン リストを追加できます。
編集中にドロップダウン リストを表示するには
ツールボックスの [データ] ノードから、SqlDataSource コントロールをページにドラッグします。
SqlDataSource2 という名前の新しいデータ ソース コントロールが作成されます。
[SqlDataSource タスク] メニューの [データ ソースの選択] をクリックします。
[アプリケーションがデータベースへの接続に使用するデータ接続] ボックスに、前に作成した接続名を入力します。
[次へ] をクリックします。
[Select ステートメントの構成] ページで、[テーブルまたは表示から列を指定します] を選択し、[コンピュータ] ボックスの [Employees] をクリックします。
[City] 列だけを選択し、[一意の行のみ返す] チェック ボックスをオンにします。[次へ] をクリックします。
[クエリのテスト] をクリックしてデータをプレビューし、[完了] をクリックします。
GridView コントロールを右クリックし、[スマート タグの表示] をクリックします。[GridView タスク] メニューの [列の編集] をクリックします。
[フィールド] ダイアログ ボックスの [選択されたフィールド] ボックスの [City] をクリックします。
[このフィールドを TemplateField に変換します。] リンクをクリックします。
[OK] をクリックして、[フィールド] ダイアログ ボックスを閉じます。
GridView コントロールを右クリックし、[スマート タグの表示] をクリックします。[GridView タスク] メニューの [テンプレートの編集] をクリックします。
[表示] ドロップダウン リストの [EditItemTemplate] をクリックします。
テンプレートにある既定の TextBox コントロールを右クリックし、[削除] を選択すると、このコントロールを削除できます。
ツールボックスの [標準] タブから、DropDownList コントロールをテンプレートにドラッグします。
DropDownList コントロールを右クリックし、[スマート タグの表示] をクリックします。[DropDownList タスク] メニューの [データ ソースの選択] をクリックします。
SqlDataSource2 を選択します。
[OK] をクリックします。
[DropDownList タスク] メニューの [DataBindings の編集] をクリックします。[Databindings] ダイアログ ボックスで、DropDownList コントロールの SelectedValue プロパティが選択されています。
[フィールドのバインド] をクリックし、[バインドするフィールド] を [City] に設定します。
[両方向のデータバインド] チェック ボックスをオンにします。
[OK] をクリックします。
GridView コントロールを右クリックし、[スマート タグの表示] をクリックします。[GridView タスク] メニューの [テンプレート編集の終了] をクリックします。
.gif "セキュリティに関するメモ")
セキュリティに関するメモ :ASP.NET Web ページのユーザー入力には、悪意のあるクライアントのスクリプトが含まれている可能性があります。既定では、ASP.NET Web ページは、ユーザー入力にスクリプトまたは HTML 要素が含まれていないことを検証します。この検証が有効の場合は、ユーザー入力にスクリプトや HTML 要素が含まれているかどうかを明示的に確認する必要はありません。詳細については、「スクリプトによる攻略の概要」を参照してください。
ここでページをテストできます。
ページをテストするには
Ctrl キーを押しながら F5 キーを押してページを実行します。
[GridView] コントロールに [EmployeeID]、[LastName]、[FirstName]、[HireDate]、および [City] の各列が表示されます。
行の横の [編集] リンクをクリックします。
ドロップダウン リストでは、現在の [City] の値があらかじめ選択されています。
[City] のドロップダウン リストで別の値をクリックし、[更新] をクリックします。
[City] フィールドの値がドロップダウン リストで選択した値に更新されます。
次の手順
このチュートリアルでは、コントロールにバインドされた列から値をドロップダウン リストに設定する方法を説明しましたが、これ以外にもドロップダウン リストに値を設定する方法は数多くあります。ドロップダウン リストに別のテーブルから値を設定する方法については、DataItem の例を参照してください。
参照
処理手順
チュートリアル : Web ページでの基本的なデータ アクセス
方法 : データ ソース コントロールを使用するときに接続文字列をセキュリティ保護する