チュートリアル : DetailsView Web サーバー コントロールによる Web ページのデータの編集と挿入
更新 : 2007 年 11 月
Microsoft Visual Web Developer を使用すると、わずか数行のコードを使用して、データベースのレコードを更新または挿入するための新しいデータ入力フォームを作成できます。データ アクセスをカプセル化するデータ ソース コントロールと、編集可能な形式でレコードを表示する DetailsView コントロールおよび GridView コントロールを組み合わせて使用することにより、ユーザーがコードを一切使用しないで既存のレコードを編集したり新しいレコードを挿入したりできるデータ入力ページを作成できます。
このチュートリアルでは、次の作業を行う方法について説明します。
データ入力ページを作成します。
データベースの更新と挿入を行うために必要な情報を使用してデータ ソース コントロールを構成します。
DetailsView コントロールを使用して、個々のレコードの表示、変更、および新しいレコードの挿入を行います。
GridView コントロールを使用して、データ入力ページからデータベースを変更できるようにします。
前提条件
このチュートリアルを実行するための要件は次のとおりです。
Visual Web Developer。
MDAC (Microsoft Data Access Components) Version 2.7 以降。
Microsoft Windows XP または Windows Server 2003 を使用している場合、MDAC 2.7 はこれらのオペレーティング システムに含まれています。ただし、Microsoft Windows 2000 Server を使用している場合は、コンピュータに既にインストールされている MDAC のアップグレードが必要になる場合があります。現在の MDAC バージョンをダウンロードするには、Microsoft Universal Data Access にアクセスしてください。
SQL Server Northwind データベースへのアクセス。SQL Server の Northwind サンプル データベースをダウンロードし、インストールする方法については、Microsoft SQL Server の Web サイトの「サンプル データベースのインストール」を参照してください。
.gif "メモ")
メモ :SQL Server が実行されているコンピュータにログオンする方法については、サーバー管理者にお問い合わせください。
Northwind サンプル データベースのデータを変更する権限。
Web サイトおよびページの作成
次の手順に従って、新しい Web サイトおよびページを作成します。
新しいファイル システム Web サイトを作成するには
Visual Web Developer を開きます。
[ファイル] メニューの [新規作成] をポイントし、[Web サイト] をクリックします。Visual Web Developer Express を使用している場合は、[ファイル] メニューの [新しい Web サイト] をクリックします。
[新しい Web サイト] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[場所] ボックスで、[ファイル システム] をクリックし、Web サイトのページを格納するフォルダの名前を入力します。
たとえば、「C:\WebSites\EditData」というフォルダ名を入力します。
[言語] ボックスで、作業に使用するプログラミング言語をクリックします。
選択したプログラミング言語は Web サイトでの既定として設定されます。ただし、プログラミング言語をページごとに設定することもできます。
[OK] をクリックします。
Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。
SQL Server への接続
次の手順では、SQL Server データベースへの接続を確立します。
SQL Server データベースへの接続を作成するには
サーバー エクスプローラで [データ接続] を右クリックし、[接続の追加] をクリックします。Visual Web Developer Express を使用している場合は、データベース エクスプローラを使用します。
[接続の追加] ダイアログ ボックスが表示されます。
[データ ソース] ボックスに [Microsoft SQL Server (SqlClient)] が表示されない場合は、[変更] をクリックし、[データ ソースの変更] ダイアログ ボックスの [Microsoft SQL Server] を選択します。
[データ ソースの選択] ページが表示されたら、[データ ソース] ボックスで、使用するデータ ソースの種類を選択します。このチュートリアルでは、データ ソースの種類として [Microsoft SQL Server] をクリックします。[データ プロバイダ] ボックスの [.NET Framework SQL Server 用データ プロバイダ] をクリックし、[続行] をクリックします。
メモ :Visual Web Developer で [サーバー エクスプローラ] タブが表示されない場合は、[表示] メニューの [サーバー エクスプローラ] をクリックします。Express Edition で [データベース エクスプローラ] タブが表示されない場合は、[表示] メニューの [データベース エクスプローラ] をクリックします。
[接続の追加] ボックスで、[サーバー名] ボックスにサーバー名を入力します。
[サーバーにログオンする] セクションでは、実行中の SQL Server データベースにアクセスするためのオプション (統合セキュリティまたは個別の ID とパスワード) を選択し、必要に応じてユーザー名とパスワードを入力します。パスワードを入力した場合は、[パスワードの保存] チェック ボックスをオンにします。
[データベースの選択または入力] の下に「Northwind」と入力します。
[接続の確認] をクリックして、接続を確認できたら [OK] をクリックします。
サーバー エクスプローラの [データ接続] の下に、新しい接続が作成されます。
データ入力ページの作成
ここでは、データ入力ページを作成し、DetailsView コントロールを構成して、Northwind データベースの Employees テーブルに格納されている従業員データを表示できるようにします。ページへのデータ アクセスを処理するために、SQL データ ソース コントロールを構成します。
データ入力ページを作成し DetailsView コントロールを構成するには
[Web サイト] メニューの [新しい項目の追加] をクリックします。
[新しい項目の追加] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。次に、[名前] ボックスに「EditEmployees.aspx」と入力します。
[追加] をクリックします。
EditEmployees.aspx ページを開きます。
デザイン ビューに切り替えます。
「Edit Employees」と入力し、このテキストを選択し、見出しとして書式指定します。
ツールボックスの [データ] グループから、DetailsView コントロールをページにドラッグします。
DetailsView コントロールを右クリックしてから [プロパティ] をクリックし、[AllowPaging] を true に設定します。
これにより、個々の従業員のエントリをページごとに表示できます。
次の手順では、データベースのクエリに使用するデータ ソース コントロールを作成し、構成します。データ ソース コントロールの作成方法はいくつかあり、サーバー エクスプローラまたはデータベース エクスプローラからデータ要素をページにドラッグする方法はその 1 つです。このチュートリアルでは、最初に DetailsView コントロールを操作し、その後でデータ ソース コントロールを構成します。
データ ソース コントロールを構成するには
DetailsView コントロールを右クリックし、[スマート タグの表示] をクリックします。
[DetailsView タスク] メニューの [データ ソースの選択] ボックスの [<新しいデータ ソース>] をクリックします。
[データ ソース構成ウィザード] ダイアログ ボックスが表示されます。
[データ ソースの種類を選びます。] の下の [データベース] をクリックします。
既定の名前 SqlDataSource1 はそのままにし、[OK] をクリックします。
データ ソースの構成ウィザードによって、[データ接続の選択] ページが表示されます。
[アプリケーションがデータベースへの接続に使用するデータ接続] ボックスに、「SQL Server データベースへの接続を作成するには」で作成した接続を入力し、[次へ] をクリックします。
ウィザードに、接続文字列を構成ファイルに格納するためのページが表示されます。接続文字列を構成ファイルに格納すると、次の 2 つの利点があります。
この方がページ内に格納するよりも安全です。
同じ接続文字列を複数のページで使用できます。
[はい、この接続を次の名前で保存します] チェック ボックスをオンにし、[次へ] をクリックします。
ウィザードに、データベースから取得するデータを指定するためのページが表示されます。
[Select ステートメントの構成] ページで、[テーブルまたは表示から列を指定します] を選択し、[コンピュータ] ボックスの [employees] をクリックします。
[列] の下の [EmployeeID]、[LastName]、[FirstName]、および [HireDate] の各チェック ボックスをオンにし、[次へ] をクリックします。
[クエリのテスト] をクリックしてデータのプレビューを確認し、[完了] をクリックします。
ここで従業員レコードの表示ページをテストできます。
従業員レコードの表示をテストするには
Ctrl キーを押しながら F5 キーを押してページを実行します。
最初の従業員レコードが DetailsView コントロールに表示されます。
ページ番号のリンクをクリックし、他の従業員レコードを確認します。
ブラウザを閉じます。
GridView コントロールでの編集の有効化
この時点では、従業員レコードを表示できますが、編集できません。ここでは、GridView コントロールを追加して構成し、個々のレコードを編集できるようにします。
| メモ : |
|---|
GridView コントロールには、レコードのリストが表示され、レコードを編集できます。ただし、レコードの挿入はできません。このチュートリアルの後半で、DetailsView コントロールを使用して、新しいレコードを追加できるようにします。 |
編集をサポートするには、更新を実行する SQL ステートメントを使用して、先ほど作成したデータ ソース コントロール (SqlDataSource1) を構成する必要があります。
GridView コントロールを追加して編集できるようにするには
ツールボックスの [データ] グループから、GridView コントロールをページにドラッグします。
GridView コントロールを右クリックし、[スマート タグの表示] をクリックします。次に、[GridView タスク] メニューの [データ ソースの選択] ボックスの [SqlDataSource1] をクリックします。
[GridView タスク] メニューの [データ ソースの選択] をクリックします。
[次へ] をクリックし、ウィザードの [Select ステートメントの構成] ページに進みます。
[Select ステートメントの構成] ページの [詳細設定] をクリックし、[INSERT、UPDATE、および DELETE ステートメントの生成] チェック ボックスをオンにし、[OK] をクリックします。
これで、前に構成した Select ステートメントに基づいて、SqlDataSource1 コントロール用の Insert、Update、および Delete の各ステートメントが作成されます。
メモ :これらのステートメントは、[カスタム SQL ステートメントまたはストアド プロシージャを指定する] を選択し、SQL クエリを入力する方法によって、手動でも作成できます。
[次へ] をクリックし、[完了] をクリックします。
SqlDataSource コントロールに追加の SQL ステートメントが構成されました。
メモ :ウィザードによって生成されたステートメントをチェックするには、SqlDataSource コントロールを選択し、DeleteQuery、InsertQuery、および UpdateQuery の各プロパティを表示します。また、ソース ビューに切り替え、コントロールのマークアップを調べて、更新されたコントロールのプロパティを確認することもできます。
[GridView タスク] メニューの [ページングを有効にする] チェック ボックスと [編集を有効にする] チェック ボックスをオンにします。
.gif "セキュリティに関するメモ")
セキュリティに関するメモ :ASP.NET Web ページのユーザー入力には、悪意のあるクライアントのスクリプトが含まれている可能性があります。既定では、ASP.NET Web ページは、ユーザー入力にスクリプトまたは HTML 要素が含まれていないことを検証します。この検証が有効の場合は、ユーザー入力にスクリプトや HTML 要素が含まれているかどうかを明示的に確認する必要はありません。詳細については、「スクリプトによる攻略の概要」を参照してください。
ここで従業員レコードの編集をテストできます。
GridView コントロールの編集をテストするには
Ctrl キーを押しながら F5 キーを押してページを実行します。
テキスト ボックスにデータが入力された状態で GridView コントロールが表示されます。
GridView コントロール内の任意の行を選択し、[編集] をクリックします。
そのレコードに対して変更を行い、[更新] をクリックします。
更新されたデータが、GridView コントロールと DetailsView コントロールの両方に表示されます。
ブラウザを閉じます。
DetailsView コントロールによる編集、削除、および挿入の有効化
GridView コントロールを使用する場合、レコードの編集はできますが、データを挿入することはできません。ここでは、DetailsView コントロールを変更し、個々のレコードの表示や、レコードの削除、挿入、更新を行うことができるようにします。
DetailsView コントロールを使用して削除、挿入、および更新を行うことができるようにするには
DetailsView コントロールを右クリックし、[スマート タグの表示] をクリックします。
[DetailsView タスク] メニューの [挿入を有効にする]、[編集を有効にする]、および [削除を有効にする] の各チェック ボックスをオンにします。
このチュートリアルの前の手順で DetailsView コントロールを使用したときは、編集、挿入、および削除を有効にするためのオプションは利用できませんでした。その理由は、DetailsView がバインドされている SqlDataSource1 コントロールに、必要な SQL ステートメントが定義されていなかったからです。データ ソース コントロールを構成して更新ステートメントを含めたので、DetailsView コントロールで更新オプションを利用できます。
ここで DetailsView コントロールの削除、挿入、および更新をテストできます。
DetailsView コントロールでの更新、挿入、および削除をテストするには
Ctrl キーを押しながら F5 キーを押してページを実行します。
DetailsView コントロールに従業員レコードが表示されます。
DetailsView コントロールで、[編集] をクリックします。
DetailsView コントロールのテキスト ボックスにデータが表示されます。
そのレコードに対して変更を行い、[更新] をクリックします。
更新されたレコードがコントロールに表示されます。
DetailsView コントロールで、[新規作成] をクリックします。
コントロールの各列に空白のテキスト ボックスが表示されます。
各列に値を入力します。
Employees テーブルには自動インクリメント キー列があるため、レコードを保存すると、[EmployeeID] の値が自動的に割り当てられます。
作業が終了したら、[挿入] をクリックします。
新しいレコードが、最後のレコードとして追加されます。
メモ :このチュートリアルで Employees テーブルに新しいレコードを挿入した際、エラーは生成されません。ただし、本番データを操作する場合は、テーブルに制約 (外部キー制約など) がある可能性があるので、DetailsView コントロールを構成する際にこの点に注意する必要があります。
DetailsView コントロールのページングを使用して最後のレコードに移動し、[削除] をクリックします。
新しいレコードが削除されます。
メモ :データを挿入する場合と同様、削除できるように DetailsView コントロールを構成するときは常に、データ行に適用される制約を注意する必要があります。
次の手順
このチュートリアルでは、ユーザーがデータ レコードを変更できる Web ページの作成方法に関する基本的な操作を示しました。ASP.NET Web ページの他のデータ機能を試してみることができます。たとえば、次の操作を実行できます。
関連し合うテーブル内のレコードを操作します。詳細については、「チュートリアル : Visual Studio でのマスター/詳細 Web ページの作成」を参照してください。
データ アクセスのための中間層コンポーネントを使用します。詳細については、「チュートリアル : カスタム ビジネス オブジェクトへのデータ バインディング 」を参照してください。
他の方法で Web ページのデータ アクセスを構成します。詳細については、「チュートリアル : Web ページでの基本的なデータ アクセス」を参照してください。
参照
処理手順
チュートリアル : Access データベースのデータを表示する Web ページの作成