Microsoft-expression-web-sql-datasource
Microsoft Expression Web-SQLデータソース
Expression Webには、静的なHTMLページを操作するための多くのツールがありますが、より動的なページを作成するためのツールもあります。 動的ページは、多くの場合、データのソースからデータまたはコンテンツを取得します。 この章では、動的ページで使用されるSQL DataSourceを作成する方法を学びます。
例
ドロップダウンリストを作成し、SQL DataSourceを使用してデータベースからデータを取得してリストを埋める簡単な例を見てみましょう。
- ステップ1 *-新しい空のWebサイトを作成することから始めます。
*SQLDataSource* と呼びましょう。 OKをクリックしてください。- ステップ2 *-式webがフォルダーを作成したことがわかります。 ただし、空のプロジェクトを作成することを選択したため、まだファイルはありません。
Expression Webは、静的なHTMLサイトを作成するためだけに使用する必要はありません。ページとコントロールを使用して動的なサイトを簡単に作成できます。
- ステップ3 *-Expression webでは、開発者である必要はなくても、多くの動的コンテンツを作成できます。 [ファイル]→[新しいページ]メニューオプションからASPXファイルを追加しましょう。 中央のモデルでASPXを選択し、[OK]をクリックします。
- ステップ4 *-ここでは、動的なWebサイトを作成するためにデータベースのデータにアクセスする必要があるコントロールをフォームに作成します。
この特定のケースでは、データベースからデータを取得するSQL DataSourceを作成します。
ステップ5 *-ツールボックスに移動して *DropDownList をドラッグし、コードビューの <form> タグ内にドロップするか、デザインビューのフォームセクションにドロップすることもできます。 Expression Webによってコードが追加されていることがわかります。
ここでは、データベースのデータを接続し、ドロップダウンリストに保存します。 したがって、最初に必要なのはデータベースです。
- ステップ6 *-[新規]→[フォルダー]メニューオプションに移動して、プロジェクトフォルダーに新しいフォルダーを作成します。
ステップ7 *-このフォルダーを *App_Data と呼びます。
ステップ8 *- File→Import→File…*メニューオプションを使用して、プロジェクトにデータベースをインポートする必要があります。
- ステップ9 *-以下に示すように、*インポート*ダイアログを開きます。 [ファイルを追加…]ボタンをクリックして、ファイルを開くダイアログボックスを開きます。
ステップ10 *-Webサイトに含めるデータベース（*。mdfファイル）*を参照し、[開く]をクリックします。
- ステップ11 *-MyTestDatabase.mdfを開きます。 次のダイアログが表示されます。 OKをクリックしてください。
- ステップ12 *-これで、データベースファイルがApp_Dataフォルダーに追加されていることがわかります。 ドロップダウンリストのようなコントロールがあり、Expression Webでデータをバインドできる場合、デザインビューの右上隅に小さな矢印が表示されます。
- ステップ13 *-これは、特定のコントロールに対して非常に具体的なタスクを実行できる現在のコンテキストメニューであり、その1つはデータソースの選択です。 [*データソースの選択… *]をクリックすると、データソース構成ウィザードが開きます。
- ステップ14 *-現在、データソースはありません。 メニューから[新しいデータソース]オプションを選択しましょう。
ここでは、SQLデータベースをインポートします。 データベースを選択して、[OK]をクリックします。
- ステップ15 *-次に、接続文字列を指定する必要があります。 [新しい接続]ボタンをクリックします。
- ステップ16 *-Microsoft SQL Serverデータベースファイルを選択し、[OK]をクリックします。
- ステップ17 *-[参照]ボタンをクリックして、データベースファイルを見つけます。
- ステップ18 *-データベースファイルを選択し、[開く]ボタンをクリックするか、データベースファイルをダブルクリックします。
- ステップ19 *-接続をテストするには、[接続のテスト]ボタンをクリックします。
次の画面が表示されます。 OKボタンをクリックしてください。
- ステップ20 *-次に、データソースを構成します。 次の画面で「次へ」をクリックします。
チェックボックスをオンにして、もう一度[次へ]をクリックします。
ステップ21 *-ここには、データベースのすべてのテーブルが表示されます。 *Student テーブルを選択しましょう。
ステップ22 *-リストボックスにすべての列が表示されます。 *ID および LastName を選択します。 下部では、実際にクエリを作成していることがわかります。 Where または* ORDER BY句*を使用することもできます。 クエリが完了したら、[次へ]をクリックします。
- ステップ23 *-*クエリのテスト*ボタンをクリックします。 以下に示すように、*クエリ結果*が表示されます。
- ステップ24 *-次のダイアログボックスでは、デフォルトでデータソースが選択されています。 「DropDownListに表示するデータフィールドを選択」は、実際に表示されるフィールドです。 LastNameを選択し、「DropDownListの値のデータフィールドを選択」からIDを選択して、[OK]をクリックします。
次のスクリーンショットでわかるように、デザインビューにDataSourceが追加されています。
以下は、Expression Webによって作成されたASPXファイルの完全なコードです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language = "C#" %>
<html dir = "ltr" xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type"/>
<title>Untitled 1</title>
</head>
<body>
<form id = "form1" runat = "server">
<asp:DropDownList id = "listID" runat = "server" DataSourceID = "SqlDataSource1"
DataTextField = "LastName" DataValueField = "ID">
</asp:DropDownList>
<asp:SqlDataSource ID = "SqlDataSource1" runat = "server"
ConnectionString = "<%$ ConnectionStrings:MyTestDatabaseConnectionString %>"
SelectCommand = "SELECT [ID], [LastName] FROM [Student]">
</asp:SqlDataSource>
</form>
</body>
</html>- ステップ25 *-Ctrl + Sを押してWebページを保存しましょう。
このページ SQLDatasource.aspx を呼び出して、[保存]をクリックします。
ステップ26 *-このページをブラウザでプレビューしましょう。 *Student テーブルの生徒の姓を含むドロップダウンリストが表示されます。
