次の方法で共有

チュートリアル: Silverlight ビジネス アプリケーションにおける関連データの表示

  • [アーティクル]

このチュートリアルでは、AdventureWorks サンプル データベース内の 2 つの関連テーブルのデータを表示する Silverlight ビジネス アプリケーションを作成します。

このチュートリアルでは、次の作業について説明します。

  • 2 つのプロジェクト (Silverlight クライアントおよび ASP.NET Web アプリケーション) で構成された Silverlight ビジネス アプリケーションを作成する。

  • リソース文字列を変更することでアプリケーション名を変更する。

  • データベース ファイルに基づいてエンティティ データ モデルを作成する。

  • Silverlight クライアントにエンティティ データ モデルのデータを公開するドメイン サービスを作成する。詳細については、「ドメイン サービス」を参照してください。

  • 関連データを返すようにドメイン サービスのクエリを変更する。

  • 関連データの読み込みをサポートするようにドメイン サービスのメタデータを変更する。

  • ユーザーにデータを表示する Silverlight ページを追加で作成する。

  • Silverlight ページにアクセスするためのボタンを既定のナビゲーション バーに追加する。

  • [データ ソース] ウィンドウから Silverlight デザイナーに項目をドラッグしてデータを表示するように Silverlight ページを構成する。

  • DataPager を追加してレコードを移動する。

前提条件

このチュートリアル、および WCF RIA サービス のドキュメントで紹介されている他のチュートリアルでは、WCF RIA サービス および WCF RIA サービス Toolkit に加え、Visual Studio 2010 や Silverlight の開発者向けランタイムと SDK など、前提条件となっているいくつかのプログラムが適切にインストールおよび構成されている必要があります。また、SQL Server 2008 R2 Express with Advanced Services をインストールして構成し、AdventureWorks OLTP と LT データベースをインストールすることも必要です。

これらの各前提条件を満たしているかどうかを確認するための詳細な手順については、「WCF RIA Services の前提条件」ノード内のトピックを参照してください。このチュートリアルを進める前に、トピックに記載されている手順に従って、この RIA サービス チュートリアルを実行するときに発生する問題をできるだけ最小限に抑えるようにします。

このチュートリアルでは、Silverlight ビジネス アプリケーションを作成できることを前提としています。このタスクを実行する手順については、「チュートリアル: Silverlight ビジネス アプリケーション テンプレートの使用」を参照してください。

Silverlight ビジネス アプリケーションの作成

Silverlight ビジネス アプリケーションは、2 つのプロジェクト (Silverlight アプリケーションと、Silverlight アプリケーションをホストする ASP.NET Web アプリケーション) で構成されたソリューションです。Silverlight ビジネス アプリケーションには、組み込みの機能があります。既定では、ホーム ページ、[バージョン情報] ページ、ナビゲーション バー、およびサイト登録機能が備わっています。

アプリケーションを作成するには

  1. Visual Studio 2010 で、AdventureWorksOrders という名前の新しい Silverlight ビジネス アプリケーション プロジェクトを Visual Basic または C# で作成します。このタスクを実行する手順については、「チュートリアル: Silverlight ビジネス アプリケーション テンプレートの使用」を参照してください。

    2 つのプロジェクト (AdventureWorksOrders Silverlight プロジェクトと AdventureWorksOrders.Web Web アプリケーション プロジェクト) を含む AdventureWorksOrders ソリューションが作成されます。

  2. ソリューション エクスプローラーで AdventureWorksOrders プロジェクトを展開します。

  3. Assets フォルダーを展開し、Resources フォルダーを展開します。

  4. ApplicationStrings.resx をダブルクリックして、リソース デザイナーを開きます。

  5. ApplicationName というリソース文字列の [値] を Adventure Works Orders に変更します。

  6. 変更を保存し、ApplicationStrings.resx ファイルを閉じます。

  7. アプリケーションを実行します。

    ホーム ページが開き、既定のデザインが表示されます。このページには、更新したアプリケーション名が表示されています。

アプリケーションで使用するデータ モデルの作成

アプリケーションのデータを管理するには、エンティティ データ モデルを使用します。

エンティティ データ モデルを作成するには

  1. ソリューション エクスプローラーで、AdventureWorksOrders.Web を右クリックし、[追加] をクリックして、[新しい項目] をクリックします。

    [新しい項目の追加] ダイアログ ボックスが表示されます。

  2. [データ] カテゴリで、[ADO.NET Entity Data Model] テンプレートをクリックします。

  3. 名前を AdventureWorksEDM.edmx に変更し、[追加] をクリックします。

    Entity Data Model ウィザードが開きます。

  4. [モデルのコンテンツの選択] ページで、[データベースから生成] をクリックし、[次へ] をクリックします。

  5. [データ接続の選択] ページで [新しい接続] をクリックします。

    [接続のプロパティ] ダイアログ ボックスが表示されます。

  6. データ ソースに [Microsoft SQL Server データベース ファイル] を選択し、AdventureWorksLT データベース ファイルの場所を指定します。

  7. [OK] をクリックします。

  8. [データ接続の選択] ページで [次へ] をクリックします。

  9. データベース ファイルをプロジェクトにコピーして接続を変更するかどうかをたずねるメッセージが表示されたら、[はい] をクリックします。

  10. [データベース オブジェクトの選択] ページで [テーブル] ノードを展開します。

  11. SalesOrderDetail (SalesLT) テーブルと SalesOrderHeader (SalesLT) テーブルのチェック ボックスをオンにします。

    RIARelatedData03ChooseDatabaseObjects

  12. [完了] をクリックします。

    エンティティ デザイナーに SalesOrderDetail テーブルと SalesOrderHeader テーブルが表示されます。

  13. ソリューションをビルドします。

    ドメイン サービスを追加する前に、ソリューションをビルドする必要があります。

ドメイン サービスの作成

ドメイン サービスは、データ モデル内のデータ エンティティと操作をクライアントに公開します。この手順では、サーバー プロジェクトにドメイン サービスを追加します。

ドメイン サービスを作成するには

  1. ソリューション エクスプローラーで、AdventureWorksOrders.Web を右クリックし、[追加] をクリックして、[新しい項目] をクリックします。

    [新しい項目の追加] ダイアログ ボックスが表示されます。

  2. [Web] カテゴリで、[DomainService クラス] テンプレートをクリックします。

  3. ドメイン サービス クラスに AdventureWorksService という名前を付けて、[追加] をクリックします。

    [新しいドメイン サービス クラスの追加] ダイアログ ボックスが表示されます。

  4. SalesOrderDetail エンティティと SalesOrderHeader エンティティ両方の [編集の有効化] チェック ボックスをオンにします。

    RIARelatedData04AddDomainServiceEntities

  5. [OK] をクリックします。

  6. ソリューションをビルドします。

関連データを含めるためのドメイン サービス クエリの編集

ドメイン サービスには、特定のアプリケーションに応じて変更する必要のある既定の操作が用意されています。この手順では、関連する SalesOrderDetail レコードを返すように GetSalesOrderHeaders クエリを編集します。また、DataPager を実行するには、クエリに並べ替え順序を追加する必要もあります。

ドメイン サービス クエリを変更するには

  1. ソリューション エクスプローラーで、AdventureWorksService.vb または AdventureWorksService.cs をダブルクリックします。

  2. 次のコードに示すように、GetSalesOrderHeaders メソッドを更新します。

    Public Function GetSalesOrderHeaders() As IQueryable(Of SalesOrderHeader)
    Return Me.ObjectContext.SalesOrderHeaders.Include("SalesOrderDetails").OrderBy(Function(c) c.SalesOrderID)
End Function

    public IQueryable<SalesOrderHeader> GetSalesOrderHeaders()
{
    return this.ObjectContext.SalesOrderHeaders.Include("SalesOrderDetails").OrderBy(e => e.SalesOrderID);
}

  3. ソリューション エクスプローラーで、AdventureWorksService.metadata.vb または AdventureWorksService.metadata.cs をダブルクリックします。

  4. SalesOrderHeaderMetadata クラスで、SalesOrderDetails エンティティ コレクション ステートメントの直前に Include 属性を追加します。

    <Include()>
Public Property SalesOrderDetails As EntityCollection(Of SalesOrderDetail)

    [Include]
public EntityCollection<SalesOrderDetail> SalesOrderDetails { get; set; }

  5. ソリューションをビルドします。

データを表示する Silverlight ページの作成

この手順では、テーブルのデータを表示する Orders ページを追加します。

Silverlight ページを作成するには

  1. ソリューション エクスプローラーで、AdventureWorksOrders の Views フォルダーを右クリックし、新しい項目を追加します。

  2. [新しい項目の追加] ダイアログ ボックスで、[Silverlight] カテゴリをクリックし、[Silverlight ページ] テンプレートをクリックします。

  3. 名前を Orders.xaml に変更し、[追加] をクリックします。

ホーム ページへのナビゲーション ボタンの追加

この手順では、アプリケーションのホーム ページに、Orders ページに移動するボタンを追加します。

ナビゲーション ボタンを作成するには

  1. ソリューション エクスプローラーで、MainPage.xaml をダブルクリックします。

  2. XAML ビューで、<HyperlinkButton x:Name="Link2" ... /> 行の後に次のコードを追加します。

    <Rectangle x:Name="Divider3" Style="{StaticResource DividerStyle}"/>
<HyperlinkButton x:Name="Link3" Content="Orders" Style="{StaticResource LinkStyle}" NavigateUri="/Orders" TargetName="ContentFrame"/>

  3. アプリケーションを実行します。

    ナビゲーション バーに [Orders] ボタンが表示されます。

  4. [Orders] をクリックします。

    空の Orders ページが表示されます。

ページでの関連データの表示

この手順では、[データ ソース] ウィンドウから直接デザイナーに項目をドラッグして、Orders ページにデータ バインド コントロールを作成します。まず、口座番号、顧客 ID、請求額など、個別の注文に関する基本情報を表示する DataGrid を作成します。次に、その注文の個々の項目を表示する Grid コントロールを作成します。

データ バインド コントロールを作成するには

  1. ソリューション エクスプローラーで、Orders.xaml をダブルクリックします。

  2. [データ] メニューの [データ ソースの表示] をクリックします。

    [データ ソース] ウィンドウが開きます。[データ ソース] ウィンドウには、アプリケーションで使用できるエンティティが既に表示されています。

  3. [SalesOrderHeader] ノードをクリックし、ドロップダウン メニューをクリックします。

  4. [詳細] をクリックします。

  5. [データ ソース] ウィンドウから、[SalesOrderHeader] ノードをデザイナーにドラッグします。

    SalesOrderHeader テーブルのデータ フィールド用のコントロールが配置された Grid が作成されます。

    RIARelatedData06SalesOrderHeaderGridOnLayout

  6. [データ ソース] ウィンドウで [SalesOrderHeader] ノードを展開します。

  7. [SalesOrderDetails] ノード ([SalesOrderHeader] ノードの子ノード) をクリックします。

    RIARelatedData07SalesOrderHeaderSalesOrderDetails

  8. [SalesOrderDetails] ノードを、デザイナーの個々の Order コントロールの横にドラッグします。

    SalesOrderDetail テーブルのフィールドが配置された DataGrid が作成されます。

    RIARelatedData08NoPagingYet

注文データに移動するためのページングの追加

この手順では、DataPager をデータ ソースに追加することで、ページングを追加します。DataPager.Source を、ページャーで制御する必要のあるデータを管理する DomainDataSource に設定します。

note注 :
DataPager では、そのデータ ソースが明示的に並べ替えられている必要があります。そのため、このチュートリアルの前半では、クエリに OrderBy 句を追加しました。

データのページングを構成するには

  1. ソリューション エクスプローラーで、Orders.xaml をダブルクリックします。

  2. ツールボックスで DataPager コントロールを探します。

  3. [DataPager] をデザイナーにドラッグします。

  4. [データ ソース] ウィンドウで [SalesOrderHeader] ノードをクリックします。

  5. [SalesOrderHeader] ノードを [DataPager] にドラッグします。

    これにより、DataPager の Source プロパティが適切なデータ ソースに設定されます。

  6. デザイナーで [DataPager] を選択します。

  7. [プロパティ] ウィンドウで、PageSize プロパティを 1 に設定します。

アプリケーションのテスト

この手順では、アプリケーションをビルドして実行し、アプリケーションが期待どおりに動作することを確認します。

アプリケーションをテストするには

  1. [ビルド] メニューの [ソリューションのビルド] をクリックします。

    ソリューションがエラーなしでビルドされることを確認します。

  2. アプリケーションを実行します。

  3. [Orders] をクリックします。

  4. DataPager のボタンのナビゲーション ボタンをクリックして、注文レコード間を移動します。

    注文ヘッダー レコード間を移動すると、関連する注文の詳細が DataGrid に表示されます。

    OrderID と詳細を示す完成したアプリケーション

次の手順

このチュートリアルを完了したら、関連する次の作業を行うことができます。

参照

概念

WCF RIA サービス
Silverlight クライアント