特集
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から入手可能である。

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デザイナーの共同作業について
 


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間