チュートリアル : Visual Studio データ コンポーネントによる Web ページのデータ バインディング
更新 : 2007 年 11 月
多くの Web アプリケーションは複数の層を使用して作成されます。この場合、中間層の 1 つ以上のコンポーネントが、データ アクセスをビジネス ロジックと結びつけます。このチュートリアルでは、Web サイトのデータ アクセス コンポーネントを作成する方法、および Web サーバー コントロール (GridView コントロール) をデータ アクセス コンポーネントによって管理されているデータにバインドする方法を示します。データ コンポーネントは Microsoft SQL Server データベースとやり取りし、データの読み取りと書き込みの両方を行うことができます。
このチュートリアルでは、以下のタスクを行います。
データの読み書きができるコンポーネントを作成します。
Web ページでデータ コンポーネントをデータ ソースとして参照します。
データ コンポーネントから返されたデータにコントロールをバインドします。
データ コンポーネントを使用してデータの読み書きを行います。
前提条件
このチュートリアルを実行するための要件は次のとおりです。
SQL Server の Northwind データベースへのアクセス。SQL Server の Northwind サンプル データベースをダウンロードし、インストールする方法については、Microsoft SQL Server の Web サイトの「サンプル データベースのインストール」を参照してください。
.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 サイトを作成するには
Visual Web Developer を開きます。
[ファイル] メニューの [新しい Web サイト] をクリックします。
[新しい Web サイト] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
左端の [場所] ボックスの [ファイル システム] をクリックします。次に、右端の [場所] ボックスに Web サイトのページを格納するフォルダ名を入力します。
たとえば、「C:\WebSites\ComponentSample」というフォルダ名を入力します。
[言語] ボックスで、作業に使用するプログラミング言語をクリックします。
[OK] をクリックします。
Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。
データ アクセス コンポーネントの作成
このチュートリアルでは、Northwind データベースに対するデータの読み書きを行うコンポーネントを、ウィザードを使用して作成します。コンポーネントには、読み込むデータの定義と、データの読み書きに使用するメソッドを記述したスキーマ ファイル (.xsd) が定義されています。コードを記述する必要はありません。実行時に .xsd ファイルがコンパイルされてアセンブリが生成され、ウィザードで指定したタスクが実行されます。
データ アクセス コンポーネントを作成するには
Web サイトに App_Code フォルダがない場合は、次の手順を実行します。
ソリューション エクスプローラで、Web サイト名を右クリックします。
[フォルダの追加] をポイントし、[App_Code フォルダ] をクリックします。
App_Code フォルダを右クリックし、[新しい項目の追加] をクリックします。
[新しい項目の追加] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [DataSet] をクリックします。
[ファイル名] ボックスに「EmployeesObject」と入力し、[追加] をクリックします。
TableAdapter 構成ウィザードが表示されます。
[新しい接続] をクリックします。
[データ ソースの選択] ダイアログ ボックスで、[Microsoft SQL Server] をクリックし、[続行] をクリックします。
[サーバー名] ボックスに SQL Server を実行中のコンピュータの名前を入力します。
ログオン資格情報として、SQL Server データベースにアクセスするための適切なオプション (統合セキュリティまたは特定の ID とパスワード) を選択し、必要な場合はユーザー名とパスワードを入力します。
- 明示的な資格情報を指定した場合は、[パスワードの保存] チェック ボックスをオンにします。
[データベースの選択または入力] をクリックし、「Northwind」と入力します。
[接続の確認] をクリックし、接続が機能している場合は、[OK] をクリックします。
TableAdapter 構成ウィザードが、接続情報が設定された状態で表示されます。
[次へ] をクリックします。
接続文字列を構成ファイルに保存するためのページが表示されます。
[はい、この接続を次の名前で保存します] チェック ボックスをオンにし、[次へ] をクリックします。
既定の接続文字列名はそのままにしておいてかまいません。
SQL ステートメントとストアド プロシージャのどちらを使用するかを選択するためのページが表示されます。
[SQL ステートメントを使用する] をクリックし、[次へ] をクリックします。
ストアド プロシージャを使用すると、パフォーマンスやセキュリティの面などで、いくつかの利点があります。ただし、SQL ステートメントの方が簡単なので、このチュートリアルでは SQL ステートメントを使用します。
SQL ステートメントを定義するためのページが表示されます。
[テーブルに読み込むデータ] の下に、次の SQL ステートメントを入力します。
SELECT EmployeeID, LastName, FirstName, HireDate FROM Employeesメモ :必要に応じて、[クエリ ビルダ] をクリックして、ビルダ ツールを使用できます。
[次へ] をクリックします。
コンポーネントで公開するメソッドを定義するためのページが表示されます。
[DataTable にデータを格納する] チェック ボックスをクリックしてオフにし、[DataTable を返す] チェック ボックスと [更新を直接データベースに送信するためのメソッドを作成する] チェック ボックスをオンにします。
このチュートリアルでは、データ テーブルを設定するためのメソッドは必要ありません。ただし、データを返すためのメソッドと、データベースを更新するためのメソッドは、コンポーネントに必要になります。
[メソッド名] ボックスに「GetEmployees」と入力します。
ここで名前を付けたメソッドは、後でデータの取得のために使用します。
[完了] をクリックします。
ウィザードによってコンポーネントが構成され、構成がコンポーネント デザイナに表示されます。表示内容には、このコンポーネントが管理するデータと、コンポーネントで公開するメソッドが含まれます。
データ コンポーネントを保存し、コンポーネント デザイナを閉じます。
[ビルド] メニューの [Web サイトのビルド] をクリックして、コンポーネントが適切にコンパイルされることを確認します。
ページでのデータ コンポーネントの使用
ここでデータ コンポーネントを ASP.NET Web ページのデータ ソースとして使用できます。データ コンポーネントにアクセスするには、ObjectDataSource コントロールを使用します。このコントロールは、データ コンポーネントによって公開されているデータ アクセス メソッドを呼び出すように構成します。次に、コントロールをページに追加し、データ ソース コントロールにバインドします。
データ ソース コントロールをページに追加するには
Default.aspx ページを開き、デザイン ビューに切り替えます。
ツールボックスの [データ] グループから、ObjectDataSource コントロールをページにドラッグします。
- [ObjectDataSource タスク] ショートカット メニューが表示されない場合、ObjectDataSource コントロールを右クリックし、[スマート タグの表示] をクリックします。
[ObjectDataSource タスク] ショートカット メニューの [データ ソースの構成] をクリックします。
データ ソースの構成ウィザードが表示されます。
[ビジネス オブジェクトの選択] ボックスの [EmployeesObjectTableAdapters.EmployeesTableAdapter] をクリックします。
これは、前のセクションで作成したコンポーネントの型名 (名前空間とクラス名) です。
[次へ] をクリックします。
[SELECT] タブの [メソッドの選択] ボックスの [GetEmployees()、戻り値 EmployeesDataTable] をクリックします。
GetEmployees メソッドは、前のセクションで作成したコンポーネントで定義したメソッドです。このメソッドは、データ コントロールがバインドできる DataTable オブジェクトで利用可能な SQL ステートメントの結果を返します。
[完了] をクリックします。
これで、データ コントロールをページに追加し、ObjectDataSource コントロールにバインドできるようになりました。このチュートリアルでは、GridView コントロールを使用します。
GridView コントロールをページに追加し、データにバインドするには
ツールボックスの [データ] グループから、GridView コントロールをページにドラッグします。
- [GridView タスク] ショートカット メニューが表示されない場合、GridView コントロールを右クリックし、[スマート タグの表示] をクリックします。
[GridView タスク] ショートカット メニューの [データ ソースの選択] ボックスの [ObjectDataSource1] をクリックします。これは、前のセクションで構成したコントロールの ID です。
GridView コントロールが、SQL ステートメントで返された各データ列と共に再び表示されます。
[プロパティ] で、DataKeyNames が EmployeeID に設定されていることを確認します。
ページのテスト
ページに必要なすべてのコントロールが揃ったので、ページをテストできます。
ページをテストするには
Ctrl キーを押しながら F5 キーを押してページを実行します。
Employees テーブルの EmployeeID、LastName、FirstName、および HireDate の各列がグリッドに表示されていることを確認します。
ブラウザを閉じます。
GridView コントロールは、ObjectDataSource コントロールからデータを要求します。その結果、ObjectDataSource コントロールはデータ コンポーネントのインスタンスを生成し、データ コンポーネントの GetEmployees メソッドを呼び出します。GetEmployees メソッドは DataTable オブジェクトを返し、これを ObjectDataSource コントロールが GridView コントロールに返します。
ページへの更新の追加
作成したデータ コンポーネントには、データベースの更新 (レコードの更新、挿入、および削除) のための SQL ステートメントが定義されています。データ コンポーネントの更新機能は、コンポーネントがウィザードによって作成されたときに自動的に生成されたメソッドによって公開されます。GridView コントロールと ObjectDataSource コントロールは、やり取りをして自動的に更新メソッドを開始できます。
| メモ : |
|---|
GridView コントロールは Insert をサポートしません。 |
更新と削除を有効にするには
GridView コントロールを右クリックし、[スマート タグの表示] をクリックします。
[編集を有効にする] チェック ボックスをオンにします。
[削除を有効にする] チェック ボックスをオンにします。
メモ :削除を有効にすると、レコードをデータベースから完全に削除できます。使い捨てのテスト データを使用しているのでない限り、削除を有効にしないでください。
更新のテスト
ここでコンポーネントを使用してデータベースを更新できることを確認するためにテストできます。
更新をテストするには
Ctrl キーを押しながら F5 キーを押してページを実行します。
今回は、GridView コントロールにより、それぞれの行に編集リンクと削除リンクが表示されます。
任意の行の横の [編集] リンクをクリックします。
その行に対して変更を行い、[更新] をクリックします。
更新されたデータと共に、グリッドが再び表示されます。
任意の行で [削除] リンクをクリックします。
その行がデータベースから完全に削除されます。その行がない状態でグリッドが再び表示されます。
ブラウザを閉じます。
次の手順
このチュートリアルでは、データ コンポーネントの使用方法を示しました。ナビゲーションの他の機能を試すことができます。たとえば、次の操作ができます。
ウィザードを使用する代わりに、カスタム データ コンポーネントを作成します。
カスタマイズ例については、「チュートリアル : カスタム ビジネス オブジェクトへのデータ バインディング 」を参照してください。
データを変更できるユーザーを制限します。一般的には、メンバシップやロールを Web サイトに追加し、データの変更を許可する前にビジネス コンポーネントで検査できる規則を設定する手法が使用されます。
詳細については、「チュートリアル : メンバシップとユーザー ログインを使用する Web サイトの作成」および「チュートリアル : ロールによる Web サイトユーザーの管理」を参照してください。
参照
処理手順
チュートリアル : Visual Web Developer の Web サイトでの共有コードの使用
チュートリアル : Visual Web Developer での基本的な Web ページの作成