特集 Microsoft Expression Web製品レビュー（後編） プログラマーとWebデザイナーの分業を促進するASP.NETサポート WINGSプロジェクト　土井 毅、　監修：山田 祥寛 2007/03/09
Page1 Page2 Page3 Page4

●データの準備

　Expression Webは、SQL Server／Access／Oracleといったデータベース、および、XMLからのデータの読み込みをサポートしている。実際にはデータベース・アクセス部分はすべてASP.NET 2.0のSqlDataSourceコントロールを使用しており、そのほか、ODBC／OLE DBプロバイダからの読み込みも可能である。

　今回はSQL Server 2005 Express Edition上のデータベースからデータの読み込みを行う。サンプル・データとしてはMicrosoftが提供するサンプル・データベースである「NorthWindデータベース」を使用する。これは以下のURLから入手可能である。

• SQL Server 2000サンプルデータベースNorthWind

●SqlDataSourceコントロールの配置

　まずExpression Webのメニュー・バーの［ファイル］−［新規作成］−［ASPX］から新規のASP.NET Webフォーム（.aspxファイル）を作成する。当然だが、データベースからのデータ表示は「HTML」（＝HTML Webページ）では行うことができない。

　次に、ツールボックスの「データ」カテゴリから「SqlDataSourceコントロール」をデザイン・ビューにドラッグ＆ドロップして配置する。なお、SqlDataSourceコントロールは実行時にはWebブラウザ上には表示されないコントロールである。

　配置後、以下のように［コモン SqlDataSource タスク］が表示されるので、［データソースの構成...］をクリックする。

SqlDataSourceコントロールのタスク

VS 2005と同様に、コントロールの右肩にタスクが表示される。

　これにより［データ ソースの構成］ダイアログ（［デー接続の選択］ページ）が表示される。そこで［新しい接続...］ボタンをクリックして［データ ソースの選択］ダイアログを表示し、「Microsoft SQL Server」を選択して［OK］ボタンをクリックする。

［データ ソースの構成］ダイアログ（データ接続の選択）

同じディレクトリにあるWeb.config内に既存の設定が存在する場合は、［データソースの構成］ダイアログ（［データ接続の選択］ページ）の［アプリケーションがデータベースへの接続に使用するデータ接続］のドロップダウンにその設定が表示される。

［新しい接続...］ボタンをクリック

［データ ソースの選択］ダイアログ

　すると［接続のプロパティ]ダイアログが表示されるので、以下のように情報を設定して［OK］ボタンをクリックする。

［接続のプロパティ］ダイアログの設定内容

項目名 設定内容 サーバー名 localhost データベース ファイルのアタッチ ＜NorthWindデータベース・ファイルを選択＞ 例：C:\SQL Server 2000 Sample Databases\NORTHWND.MDF 論理名 NorthWind

　再び最初の［データソースの構成］ダイアログの［データ接続の選択］ページに戻るので、そのまま［次へ］ボタンをクリックすると、［アプリケーション構成ファイルに接続文字列を保存］ページに切り替わる。ここで次の画面のように接続文字列を指定して（画面の「NORTHWNDConnectionString」という接続文字列は自動的に入力されたもの）、［次へ］ボタンをクリックする。

［データ ソースの構成］ダイアログ（アプリケーション構成ファイルに接続文字列を保存）

接続文字列がここで指定した名前（この例では「NORTHWNDConnectionString」）でWeb.configに保存される。

　なお、ここで設定したデータベースへの接続文字列は、ASP.NETの作法に従い、Web.configファイルに保存される。

<?xml version="1.0" encoding="utf-8"?> <configuration>     <connectionStrings>         <add name="NORTHWNDConnectionString" connectionString="Data Source=localhost;AttachDbFilename=&quot;C:\SQL Server 2000 Sample Databases\NORTHWND.MDF&quot;;Initial Catalog=NorthWind;Integrated Security=True"             providerName="System.Data.SqlClient" />     </connectionStrings> </configuration>

Web.configに保存された接続文字列

　次に［Select ステートメントの構成］ページに移るので、取得したいデータを指定する。ここではNorthWindデータベース・ファイル内の「Products by Category」ビューを（コンボボックスから）選択し、［列］から「*」（＝すべてのフィールド）を選択し、［次へ］ボタンをクリックする。

［データソースの構成］ダイアログ（Selectステートメントの構成）

テーブルとビューの一覧から取得するデータを指定する。下部にある［SELECT ステートメント］欄にSQL文が表示されている。

　なお、今回は省略するが、［WHERE］ボタンや［ORDER BY］ボタンを使用することで、さらに詳細な設定を行うことも可能だ。

　次に［クエリのテスト］ページが表示されるので、［クエリのテスト］ボタンをクリックして実際にクエリを行ってその内容が間違いないかを確認し、最後に［完了］ボタンをクリックする。

［データソースの構成］ダイアログ（クエリのテスト）

［クエリのテスト］ボタンをクリックすると、データベースからデータが取得されてグリッドにプレビューが表示される。

　これで表示するデータの取得準備は完了である。

　次に、表形式でデータを表示するGridViewコントロールをページ上に配置する。

INDEX
	［特集］Microsoft Expression Web製品レビュー（前編）
	Webデザイン・ツール「Expression Web」を試してみた
	1．Expression Webの概要と画面構成
	2．Expression WebのCSSサポート
	3．スタイルシート・ファイルを使ってみよう
	4．Expression WebのXHTML対応機能
	［特集］Microsoft Expression Web製品レビュー（後編）
	プログラマーとWebデザイナーの分業を促進するASP.NETサポート
	1．ASP.NETコントロールのサポートとVS 2005との機能差
	2．デザイン・サンプル:SqlDataSourceコントロールの配置
	3．デザイン・サンプル:GridViewコントロールの配置
	4．プログラマーとWebデザイナーの共同作業について

　

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）