更新日: 2010 年 1 月 22 日

Visual Basic の内容はこちらに掲載しています。10 行でズバリ !! 概念モデルを使用したデータ アクセス (Entity Data Source) (VB)

このコンテンツのポイント

Entity Data Source を使用して、概念モデルから取得したデータをコントロールにバインド (関連付けを定義することでデータをコントロールに表示する) する方法を理解します。

今回紹介するコード

C#
・・・

    <table class="style1">
        <tr>
            <td class="style2" valign="top">
                <asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True" 
                    DataSourceID="EntityDataSource1" DataTextField="pub_name" 
                    DataValueField="pub_id" Height="257px" Width="148px"></asp:ListBox>
            </td>
            <td valign="top">
                <asp:GridView ID="GridView1" runat="server" DataSourceID="EntityDataSource2">
                </asp:GridView>
            </td>
        </tr>
    </table>
    
    </div>
    <asp:EntityDataSource ID="EntityDataSource1" runat="server" 
        ConnectionString="name=PUBSEntities" DefaultContainerName="PUBSEntities" 
        EntitySetName="Publisher設定" Select="it.[pub_id], it.[pub_name]">
    </asp:EntityDataSource>
    <asp:EntityDataSource ID="EntityDataSource2" runat="server" 
        ConnectionString="name=PUBSEntities" DefaultContainerName="PUBSEntities" 
        EntitySetName="Employee設定" Select="it.[emp_id], it.[fname], it.[lname]" 
        Where="it.[publishers].[pub_id] = @prmPub_ID">
        <WhereParameters>
            <asp:ControlParameter ControlID="ListBox1" Name="prmPub_ID" 
                PropertyName="SelectedValue" Type="String" />
        </WhereParameters>
    </asp:EntityDataSource>

・・・
 

目次

  1. はじめに
  2. EDM の作成
  3. Entity Data Source コントロールを使用した基本的なデータバインド
  4. コントロール間のバインド
  5. おわりに

1. はじめに

ここでは、ADO.NET Entity Framework のエンティティをデータソースとしてプロジェクトに読み込んで、コントロール (UI 上のテキストボックス、グリッドなど) とバインドをおこなうことでエンティティを使用する方法について記載します。この方法では、後述するように、ほとんどプログラム コードを記述することなく、デザイナーを使用して開発をおこなうことができます。

ページのトップへ


2. EDM の作成

今回は、10 行でズバリ !! 概念モデルの作成 (EDM) (C#)10 行でズバリ !! 概念モデルを使用したデータ アクセス (Object Service) (C#) と異なり、コンソールアプリケーションではなく、グラフィカルなユーザーインターフェイスを持つ ASP.NET Web アプリケーション プロジェクトを作成します。

Visual Studio を起動して、[ファイル] メニューの [新規作成] から [プロジェクト] をクリックし、[新しいプロジェクト] ダイアログを開きます。そして [プロジェクトの種類] で [Web] を、[テンプレート] では [ASP.NET Web アプリケーション] を選択します。[プロジェクト名] は任意の名前を指定できますが、ここでは「EFWebApp」としました。

図 1 コンソール アプリケーションのテンプレートを選択してプロジェクトを新規作成

[OK] をクリックすると、Default.aspx ファイルが含まれる Web アプリケーションが作成されます。

この後、データベースの準備、EDM の追加、EDM のカスタマイズのそれぞれを行うのですが、その手順に関しては、10 行でズバリ !! 概念モデルの作成 (EDM) (C#) を参照してください (今回は省略します)。ただし、[データベースの準備] の手順で、PUBS.MDF をドロップする場所は、プロジェクト名ではなく、App_Data フォルダーにドロップしてください。以降の手順は、この EDM のカスタマイズまでを行ったものと仮定しています。

すべての手順を終えると次の図のようになります。特に赤四角の囲みの部分が同様になっているかどうか確認し、[ビルド] を行いエラーが発生しないことを確認の上、次の手順に進んでください。

図 2 Web アプリケーション プロジェクトに EDM を追加し、カスタマイズを完了した画面

ページのトップへ


3. Entity Data Source コントロールを使用した基本的なデータバインド

[ソリューション エクスプローラー] で Default.aspx をダブルクリックします。Default.aspx が表示されます。[デザイン] タブをクリックし、デザイナーで表示します。

図 3 Default.aspx のデザイン画面 (作業前)

レイアウトのため、Table タグを挿入します。

[Div] 内の空白部分をクリックし、[テーブル] メニューから [テーブルの挿入] をクリックします。[テーブルの挿入] 画面が表示されます。[サイズ] 内の [行] を 「1」 に変更し、それ以外は既定値のまま [OK] をクリックします。

図 4 テーブルの挿入画面

2 つのセルが含まれるテーブル (Table タグ) が挿入されました。両方のセルの [valign] プロパティを [Top] に変更します。

図 5 テーブルを挿入した Default.aspx

これで準備は完了です。データ表示のための手順を行うため、コントロールとデータソースを挿入し、これらを関係付けます。

まず、[ツール ボックス] の [標準] グループにある [ListBox] コントロールを上記で挿入したテーブルの左側のセル内にドロップします。セルの幅、[ListBox] コントロールの幅や高さを任意のサイズに変更します。サイズ変更はマウスで境界線をドラッグします。

さらに、データソースを挿入します。[ツール ボックス] の [データ] グループにある [Entity Data Source] をページ内の任意の空白部分にドロップします ([Entity Data Source] コントロールは実行時には表示されません。このため場所や大きさは意識する必要はありません) 。

図 6 GridView と Entity Data Source を配置

Default.aspx ページに配置された [Entity Data Source] をクリックし、[>] ボタン (上図) をクリックすると [Entity Data Source タスク] が表示されるので、[データソースの構成] をクリックします。

[データソースの構成] ウィザードが起動します。[ObjectContext の構成] で [名前付き接続] で、冒頭で挿入した [PUBSEntities] のエンティティを選択し、[次へ] をクリックします。

図 7 データソースの構成 - ObjectContext の構成

次に表示される [データ選択の構成] のウィザードでは、[Entity Set Name] 欄で、データを取得する EDM 内のエンティティの 1 つ「Publisher」を設定するため、[Publisher 設定] をクリックします。すると、[Select] リスト内に [Publisher 設定] で定義されたスカラ プロパティのリストが表示されます (Publishers テーブルのスキーマが表示されているのではありません。logo、pr_info など Pub_info テーブルの列も表示されていることが確認できます。これはデータベースを参照しているのではなく、EDM を参照しているからです)。[pub_name] と [pub_id] だけをオンにし、[完了] をクリックします。

図 8 データソースの構成 – データ選択の構成

次に、上記で挿入したリストボックスとデータソースの関連付けをおこないます。

ページに配置された [ListBox1] をクリックし、右上の [>] をクリックし、[データソースの選択] をクリックします。

[データソースの選択] 画面で、[データソースの選択] で [EntityDataSource1]、[Listbox で表示するデータ フィールドの選択] で [pub_name]、[ListBox の値のデータ フィールドの選択] で [pub_id] を選択し、[OK] をクリックします。選択すべきフィールドがドロップダウン リストボックスに表示されない場合、[スキーマの更新] リンクをクリックしてください。

図 9 データソースの選択

これで完了です。ここでは、この後の手順のために、[ListBox タスク] ([ListBox1] をクリックし、[>] をクリック) で [AutoPostBack を有効にする] をオンにします。

図 10 ListBox1 の ListBox タスク

 [F5] キーを押してデバッグ実行します。Publisher (架空の出版社) の名前がリストボックスに表示されます。

図 11 Entity Data Source を使用した基本的なデータバインドの実行結果

ページのトップへ


4. コントロール間のバインド

上記で、出版社名の一覧を表示するリストボックスが作成できましたので、以降では、リストボックスでクリックされた出版社に所属する社員の一覧をグリッド上に表示していきましょう。

まず、[GridView] コントロールを [ListBox1] の右のセル (Table タグの中の2列目のセル) にドロップし、さらに、もう 1 つ [Entity Data Source] をドロップします (EntityDataSource2)。

 

これまでの手順と次の情報を参考に [EntityDataSource2] の [データソースの構成] ウィザードを実行します。

設定画面 設定項目 設定内容
ObjectContext の構成 名前付き接続 PUBSEntity
データ選択の構成 EntitySetName Employee設定
データ選択の構成 Select [emp_id]、[fname]、[lname] をオン

さらに、 [GridView1] をクリックし、[>] をクリックし、[データソースの選択] で [EntityDataSource2] をクリックします。

ここまでの手順で、GridView1 には Employee エンティティの内容が表示されますが、上記で挿入したリストボックス (ListBox1) で選択した出版社の担当社員のみを表示するようにしたいと思います。

[EntityDataSource2] をクリックし、[プロパティ ウィンドウ] から [Where] を選択し、[…] ボタンをクリックします ([Select] プロパティにはデータを取得するスカラ プロパティが指定されていることも確認してください)。

[式エディタ] が表示されますので、[Where 式] に it.[publishers].[pub_id] = @prmPub_id と入力します。

次に、[パラメータの追加] をクリックし、[名前] に 「prmPub_id」 と入力します。[パラメータ ソース] で [Control] を選択し、[ControlID] で [ListBox1] を選択します。

最後に [詳細プロパティの表示] リンク (下図) をクリックし、パラメータのデータ型の指定である [Type] プロパティを [String] に設定します。

[OK] をクリックすれば設定完了です。

図 12 [Where] プロパティの設定画面 – [式エディタ]

再度、デバッグ実行します。

図 13 コントロール間のバインドを設定した実行結果

リストボックス内の出版社名をクリックすると、その出版社の担当社員が右のグリッド (GridView) に表示されます。

ページのトップへ


5. おわりに

今回の例ではデータの取得を行いましたが、[図 8 データソースの構成 – データ選択の構成] 画面で分かる通り、Entity Data Source はデータの更新 (挿入、更新、削除) も可能です (図 8 では更新機能のチェックボックスが無効になっており更新ができないように思いますが、[すべて選択 (エンティティ値)] をクリックすればチェックボックスがアクティブになります)。

今回のコード (コードは自動生成されるので、正確には操作と設定) においても、データベースのテーブルそのものではなく、EDM に対する操作であった点が重要です。あらかじめEDM さえ用意すれば、UI を作成する開発者はデータベース名やデータベースのスキーマを知る必要はありません。

ページのトップへ


Code Recipe

ページのトップへ