チュートリアル : Course Manager Web アプリケーションの作成

[アーティクル]
09/17/2008

このトピックでは、Entity Data Model (EDM) を使用する基本的な ASP.NET アプリケーションの作成方法について説明します。作成するアプリケーション (CourseManagerWeb) は、ADO.NET Entity Framework クイックスタートの Course Manager Windows フォームアプリケーションによく似ています。

前提条件

このチュートリアルを完了するには、次のソフトウェアがインストールされている必要があります。

Microsoft Visual Studio 2008 SP1。
School サンプルデータベース。この小さなデータベースを作成する方法の詳細については、「School サンプルデータベースの作成 (Entity Framework クイックスタート)」を参照してください。

このチュートリアルでは、Visual Studio、.NET Framework、および Visual C# または Visual Basic のプログラミングの基本的なスキルがある読者を想定しています。

ソリューションの作成

このアプリケーションは、ASP.NET Web アプリケーションプロジェクトに基づいています。

Visual Studio で CourseManagerWeb ソリューションを作成するには

Visual Studio の [ファイル] メニューの [新規作成] をクリックし、[プロジェクト] をクリックします。

[新しいプロジェクト] ダイアログボックスが表示されます。
[プロジェクトの種類] ペインで、[Visual Basic] または [Visual C#] を選択します。[テンプレート] の種類に [ASP.NET Web アプリケーション] を指定し、名前を「CourseManagerWeb」と入力します。
[OK] をクリックします。
ソリューションが生成されたことと、Default.aspx ファイルおよび Web.config ファイルがソリューションに含まれていることを確認します。

School Entity Data Model の生成

このアプリケーションでは、ASP.NET コントロールを EDM にバインドすることによってデータを表示します。

School EDM を生成するには

ソリューションエクスプローラで、CourseManagerWeb プロジェクトを右クリックして [追加] をポイントし、[新しい項目] をクリックします。
[テンプレート] ペインの [ADO.NET Entity Data Model] を選択します。
モデル名として「School.edmx」と入力し、[追加] をクリックします。

Entity Data Model ウィザードの先頭ページが表示されます。
[モデルのコンテンツの選択] ダイアログボックスで [データベースから生成] を選択し、[次へ] をクリックします。

[データ接続の選択] ダイアログボックスが表示されます。
[新しい接続] をクリックします。

[接続のプロパティ] ダイアログボックスが表示されます。
サーバー名を入力し、認証方式を選択します。データベース名として「School」と入力し、[OK] をクリックします。

指定したデータベース接続の設定に従って [データ接続の選択] ダイアログボックスが更新されます。
[エンティティ接続設定に名前を付けて Web.Config に保存:] チェックボックスがオンになっていて、値が SchoolEntities に設定されていることを確認します。[次へ] をクリックします。

[データベースオブジェクトの選択] ダイアログボックスが表示されます。
すべてのテーブルが選択され、[モデル名前空間] の値が SchoolModel であることを確認し、[完了] をクリックしてウィザードを終了します。

このウィザードは、次の処理を行います。
- System.Data.Entity、System.Runtime.Serialization、および System.Security の各名前空間への参照を追加します。
- EDM を定義する School.edmx ファイルを生成します。
- EDM に基づいて生成されたクラスを含むソースコードファイルを作成します。ソースコードファイルを確認するには、ソリューションエクスプローラで Default.aspx ノードを展開します。
- Web.Config ファイルの接続文字列セクションを更新します。

次の手順に進む前に、ADO.NET Entity Data Model デザイナ (既定のビューア) で School.edmx ファイルを開いて内容を確認します。

[!メモ]

Visual Basic プロジェクトの場合は、一部のファイルがソリューションエクスプローラに表示されないことがあります。すべてのプロジェクトファイルを表示するには、Visual Studio タスクバーの [プロジェクト] をクリックし、[すべてのファイルの表示] をクリックします。

ユーザーインターフェイス (UI) の作成

このアプリケーションの UI には、HTML および ASP.NET Web コントロールが含まれます。

CourseManager Web ページを作成するには

CourseManagerWeb プロジェクトで既定の Web ページ (Default.aspx) を右クリックし、[ビューデザイナ] をクリックします。

Web ページデザイナでファイルが開きます。
新しい ASP.NET Web アプリケーション内に自動生成された既定の div セクションを削除します。
DropDownList コントロールをツールボックスからデザイン画面にドラッグし、次のプロパティを設定します。
- ID を departmentList に設定します。
- AutoPostBack を True に設定します。
ツールボックスの [データ] セクションを展開し、EntityDataSource コントロールをパネルにドラッグします。ID プロパティを departmentDS に変更します。
GridView Web コントロールをパネルにドラッグし、ID プロパティを courseGridView に設定します。

UI が完成しました。

DropDownList コントロールのバインド

次に、DropDownList コントロールを EntityDataSource コントロールにバインドして、DropDownList に学科名が表示されるようにします。

DropDownList コントロールをバインドするには

Ctrl キーを押しながら F5 キーを押してアプリケーションをビルドします。これは、次の手順で使用するデータソース構成ウィザードでモデルメタデータを使用できるようにするために必要です。
Web ページデザイナ ウィンドウで departmentDSEntityDataSource コントロールを選択し、スマートタグをクリックして [データソースの構成] コマンドをクリックします。

データソース構成ウィザードが起動します。
[ObjectContext の構成] ダイアログボックスで、[名前付き接続] ボックスの一覧から [SchoolEntities] を選択します。
[既定のコンテナ] ボックスの一覧から [SchoolEntities] を選択します。
[次へ] をクリックします。
[データの選択の構成] ダイアログボックスで、次の操作を行います。
1. [EntitySetName] ボックスの一覧から [学科] を選択します。
2. [EntityTypeFilter] ボックスの一覧から [(なし)] を選択します。
3. [選択] ボックスで [DepartmentID] フィールドおよび [名前] フィールドのチェックボックスをオンにします。
4. [完了] をクリックしてデータソースの構成を完了します。
Web ページのデザインビューに戻ります。
departmentListDropDownList コントロールを選択し、スマートタグをクリックして [データソースの選択] をクリックします。

データソース構成ウィザードの [データソースの選択] ダイアログボックスが表示されます。
[データソースの選択] ダイアログボックスで次の選択を行います。
- [データソースの選択] で [departmentDS] を選択します。
- [DropDownList に表示するデータフィールドの選択] で [名前] を選択します。
- [DropDownList の値のデータフィールドの選択] で [DepartmentID] を選択します。
[!メモ]

ドロップダウンリストに使用できる値がない場合は、[スキーマの更新] をクリックします。
[OK] をクリックします。

これでソリューションが正常にビルドされるようになりました。アプリケーションを実行すると、DropDownList コントロールに学科名が設定されます。学科を選択するとフォームがポストされますが、授業の時間割に関する情報はまだ表示されません。

GridView コントロールのバインド

次に、選択した学科で提供されるすべての講座を GridView コントロールに表示するためのコードを追加します。コードを追加するには、School モデルのエンティティとアソシエーションを表す共通言語ランタイム (CLR) オブジェクトに対する厳密に型指定されたクエリを作成します。

GridView コントロールをバインドするには

ソリューションエクスプローラで、[Default.aspx.vb] または [Default.aspx.cs] を右クリックし、[コードの表示] をクリックします。
次の using (C#) ステートメントまたは Imports (Visual Basic) ステートメントを追加して、School データベースから作成されたモデルとエンティティの名前空間を参照します。
```
Imports System.Data.Objects
```
```
using System.Data.Objects;
```

オブジェクトコンテキストを表すプロパティを _Default クラスに追加します。

' Create an ObjectContext based on SchoolEntity.
Private schoolContext As SchoolEntities

// Create an ObjectContext based on SchoolEntity.
private SchoolEntities schoolContext;

既存の Page Load イベントハンドラに次のコードを追加して schoolContext プロパティを初期化します。

 ' Initialize the ObjectContext.
schoolContext = New SchoolEntities()

// Initialize the data context.
schoolContext = new SchoolEntities();

Default.aspx Web ページのデザインビューに戻ります。departmentListDropDownList コントロールをダブルクリックします。

これにより、departmentList コントロールの SelectedIndexChanged イベントハンドラが Default.aspx.vb ファイルまたは Default.aspx.cs ファイルに追加されます。

SelectedIndexChanged イベントハンドラに次のコードを貼り付けます。

'Get the department ID.
Dim departmentID As Int32 = CType(departmentList.SelectedValue, Int32)

    ' Select course information based on department ID.
    Dim courseInfo = _
        From c In schoolContext.Course _
        Where c.Department.DepartmentID = departmentID _
        Select New With _
        { _
            .CourseID = c.CourseID, _
            .CourseName = c.Title, _
            .CourseCredits = c.Credits _
        }

    ' Bind the GridView control to the courseInfo collection.
    courseGridView.DataSource = courseInfo
    courseGridView.DataBind()

// Get the department ID.
Int32 departmentID = Convert.ToInt32(departmentList.SelectedValue);

// Select course information based on department ID.
var courseInfo = from c in schoolContext.Course
                where c.Department.DepartmentID == departmentID
                select new
                {
                    CourseID = c.CourseID,
                    CourseTitle = c.Title,
                    CourseCredits = c.Credits
                };

// Bind the GridView control to the courseInfo collection.
courseGridView.DataSource = courseInfo;
courseGridView.DataBind();

このコードは、LINQ to Entities クエリを使用して、指定された DepartmentID に基づいて講座情報を取得します。このクエリは、講座 ID、講座名、および講座単位を含む匿名型のコレクションを生成します。その後、このコレクションは GridView コントロールにバインドされます。

Default.aspx.vb ファイルまたは Default.aspx.cs ファイルの _Default クラスに PreRenderComplete イベントハンドラを追加します。次のコードを追加して、ページが最初に表示されたときに GridView コントロールが初期化されるようにします。

Private Sub Page_PreRenderComplete(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRenderComplete
    ' Force initial GridView update.
    departmentList_SelectedIndexChanged(Me, New EventArgs())
End Sub

protected void Page_PreRenderComplete(object sender, EventArgs e)
{
    // Force initial GridView update.
    departmentList_SelectedIndexChanged(this.Page, new EventArgs());
}

これでアプリケーションが正常にビルドされ、完全に機能するようになりました。ドロップダウンリストで別の学科を選択すると、フォームがポストされ、対応する講座情報で GridView コントロールが更新されます。

コードリスト

このセクションでは、既定の Web ページの本文および CourseManagerWeb ソリューションの分離コードファイルのコードの最終バージョンを示します。

既定の Web ページの本文

<body>
  <form id="form1" runat="server">
    <asp:DropDownList ID="departmentList" runat="server" 
         AutoPostBack="True" DataSourceID="departmentDS" 
        DataTextField="Name" DataValueField="DepartmentID" 
        onselectedindexchanged="departmentList_SelectedIndexChanged"> 
    </asp:DropDownList>
    
    <asp:EntityDataSource ID="departmentDS" runat="server" 
       ConnectionString="name=SchoolEntities"
       DefaultContainerName="SchoolEntities" 
       EntitySetName="Department" Select="it.[DepartmentID], 
       it.[Name]">
    </asp:EntityDataSource>

    <asp:GridView ID="courseGridView" runat="server">
    </asp:GridView>

    <asp:Button ID="closePage" runat="server" Text="Close" 
       onclick="closePage_Click" />
  </form>
</body>

分離コードファイル

Imports System.Data.Objects
Partial Public Class _Default
    Inherits System.Web.UI.Page
    ' Create an ObjectContext based on SchoolEntity.
    Private schoolContext As SchoolEntities

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        ' Initialize the ObjectContext.
        schoolContext = New SchoolEntities()
    End Sub

    Protected Sub departmentList_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles departmentList.SelectedIndexChanged
    'Get the department ID.
    Dim departmentID As Int32 = CType(departmentList.SelectedValue, Int32)

        ' Select course information based on department ID.
        Dim courseInfo = _
            From c In schoolContext.Course _
            Where c.Department.DepartmentID = departmentID _
            Select New With _
            { _
                .CourseID = c.CourseID, _
                .CourseName = c.Title, _
                .CourseCredits = c.Credits _
            }

        ' Bind the GridView control to the courseInfo collection.
        courseGridView.DataSource = courseInfo
        courseGridView.DataBind()
    End Sub
    Private Sub Page_PreRenderComplete(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRenderComplete
        ' Force initial GridView update.
        departmentList_SelectedIndexChanged(Me, New EventArgs())
    End Sub
End Class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.Objects;
namespace CourseManagerWeb
{
    public partial class _Default : System.Web.UI.Page
    {
        // Create an ObjectContext based on SchoolEntity.
        private SchoolEntities schoolContext;

        protected void Page_PreRenderComplete(object sender, EventArgs e)
        {
            // Force initial GridView update.
            departmentList_SelectedIndexChanged(this.Page, new EventArgs());
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            // Initialize the data context.
            schoolContext = new SchoolEntities();
        }

        protected void departmentList_SelectedIndexChanged(object sender, EventArgs e)
        {
            // Get the department ID.
            Int32 departmentID = Convert.ToInt32(departmentList.SelectedValue);
            
            // Select course information based on department ID.
            var courseInfo = from c in schoolContext.Course
                            where c.Department.DepartmentID == departmentID
                            select new
                            {
                                CourseID = c.CourseID,
                                CourseTitle = c.Title,
                                CourseCredits = c.Credits
                            };

            // Bind the GridView control to the courseInfo collection.
            courseGridView.DataSource = courseInfo;
            courseGridView.DataBind();
        }
    }
}

次の手順

CourseManagerWeb アプリケーションが正常に作成および実行されました。Entity Framework の詳細については、「ADO.NET Entity Framework」を参照してください。

参照

その他のリソース

クイックスタート (Entity Framework)
サンプル (Entity Framework)
Object Services (Entity Framework)
エンティティデータの使用

次の方法で共有

チュートリアル : Course Manager Web アプリケーションの作成

前提条件

ソリューションの作成

Visual Studio で CourseManagerWeb ソリューションを作成するには

School Entity Data Model の生成

School EDM を生成するには

ユーザー インターフェイス (UI) の作成

CourseManager Web ページを作成するには

DropDownList コントロールのバインド

DropDownList コントロールをバインドするには

GridView コントロールのバインド

GridView コントロールをバインドするには

コード リスト

既定の Web ページの本文

分離コード ファイル

次の手順

参照

その他のリソース

その他のリソース

ユーザーインターフェイス (UI) の作成

コードリスト

分離コードファイル