次の方法で共有

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

  • [アーティクル]

このチュートリアルでは、2 つの異なる Silverlight ページに AdventureWorks サンプル データベースのデータを表示する Silverlight ビジネス アプリケーションを作成します。最初のページでは、SalesOrderHeader テーブルのデータが表示され、データベース レコードをページごとに表示できるようになります。2 番目のページでは、ユーザーが日付に基づいたクエリを実行できます。

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

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

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

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

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

  • カスタム クエリを変更したりドメイン サービスに追加したりする。

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

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

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

  • データの並べ替えおよびページングを行う。

  • クエリ パラメーターを受け取るようにユーザー インターフェイスを構成する。

前提条件

このチュートリアル、および 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 で、AdventureWorksApp という名前の新しい Silverlight ビジネス アプリケーション プロジェクトを Visual Basic または C# で作成します。このタスクを実行する手順については、「チュートリアル: Silverlight ビジネス アプリケーション テンプレートの使用」を参照してください。

    AdventureWorksApp ソリューションは、2 つのプロジェクト (AdventureWorksApp Silverlight プロジェクトと AdventureWorksApp.Web Web アプリケーション プロジェクト) を使用して作成されます。

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

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

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

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

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

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

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

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

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

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

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

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

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

    RIADisplayingData01EDMX

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ドメイン サービスの作成

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

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

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

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

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

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

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

  4. [SalesOrderHeader] チェック ボックスおよび [変更を有効化する] チェック ボックスをオンにし、[OK] をクリックします。

    RIADisplayingData02AddNewDomainServiceClass

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

ドメイン サービス クエリの変更

ドメイン サービス クラスを追加すると、クエリ メソッドが設定されます。このようなクエリ メソッドは、さらに変更を加えることなく使用することもできます。ただし、多くの場合、いくつかの変更が必要です。この手順では、GetSalesOrderHeaders クエリ メソッドを編集します。

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

  1. ソリューション エクスプローラーで、AdventureWorksService.vb または AdventureWorksService.cs をダブルクリックしてこのファイルを開きます。

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

    Public Function GetSalesOrderHeaders() As IQueryable(Of SalesOrderHeader)
    Return Me.ObjectContext.SalesOrderHeaders.OrderBy(Function(e) e.SalesOrderID)
End Function

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

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

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

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

Silverlight ページを作成するには

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

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

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

    OrderList.xaml がデザイナーで開きます。

  4. ツールボックスからデザイナーの上部に TextBlock をドラッグします。

  5. [プロパティ] ウィンドウで、Text プロパティの値を Order List に変更します。

  6. OrderList.xaml ページを保存します。

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

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

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

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

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

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

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

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

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

    Order List ページが表示されます。

OrderList ページでの注文データの表示

この手順では、[データ ソース] ウィンドウからデザイナーに Order エンティティをドラッグすることで、DataGrid を作成し、注文データを表示するように構成します。

データ バインド DataGrid を作成するには

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

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

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

  3. [データ ソース] ウィンドウからデザイナーの Order List テキスト ブロックの下に SalesOrderHeader ノードをドラッグします。

    SalesOrderHeader テーブルの列見出しが読み込まれた DataGrid がデザイン画面に表示されます。

    RIADisplayingData03OrderListPageWithDataGrid

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

  5. ナビゲーション バーの [Order List] をクリックします。

    注文データが Order List ページに表示されます。

    RIADisplayingData04OrderListPageWithDataGridComple

ドメイン サービスへのカスタム クエリの追加

ドメイン サービスに追加のクエリを作成できます。この手順では、2 つのカスタム クエリを追加します。

ドメイン サービスにカスタム クエリを追加するには

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

  2. AdventureWorksService クラスに次のメソッドを追加します。

    Public Function GetOrdersWithSmallSubtotals() As IQueryable(Of SalesOrderHeader)
    Return Me.ObjectContext.SalesOrderHeaders.Where(Function(p) p.SubTotal <= 2000).OrderBy(Function(p) p.SubTotal)
End Function

Public Function GetShipDateBefore(ByVal shipDate As DateTime) As IQueryable(Of SalesOrderHeader)
    Return Me.ObjectContext.SalesOrderHeaders.Where(Function(p) p.ShipDate < shipDate).OrderBy(Function(p) p.SalesOrderID)
End Function

    public IQueryable<SalesOrderHeader> GetOrdersWithSmallSubtotals()
{
    return this.ObjectContext.SalesOrderHeaders.Where(e => e.SubTotal <= 2000).OrderBy(e => e.SubTotal);
}

public IQueryable<SalesOrderHeader> GetShipDateBefore(DateTime shipDate)
{
    return this.ObjectContext.SalesOrderHeaders.Where(e => e.ShipDate < shipDate).OrderBy(e => e.SalesOrderID);
}

  3. Visual Basic を使用している場合は、AdventureWorksService.vb ファイルの先頭で、Option Strict ステートメントを Off に設定します。

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

カスタム クエリのデータの表示

この手順では、[データ ソース] ウィンドウで新しいクエリを選択して、デザイナーに既に存在する DataGrid にそのクエリをドラッグすることで、新しいクエリのデータを表示します。これにより、選択したクエリのデータを表示するように DataGrid のバインドが再構成されます。

既存の DataGrid にカスタム クエリのデータを表示するには

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

  2. [データ ソース] ウィンドウで [SalesOrderHeader] をクリックし、ドロップダウン メニューをクリックします。

    RIADisplayingData05QueriesInDataSources

    メニューの下部に表示されている 3 つのクエリに注目します。チェックされたクエリは、生成されたデータ ソースの QueryName をデザイナーにドラッグした後に設定されるクエリです。

  3. クエリの一覧から [GetOrdersWithSmallSubtotalsQuery] を選択し、このエンティティのクエリとして設定します。

  4. SalesOrderHeader ノードをデザイナーの既存の DataGrid にドラッグします。

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

  6. [Order List] をクリックします。

    DataGrid に表示される注文の集計が 2000 件を超えています。

    RIADisplayingData06SmallSubtotalsQueryResult

並べ替えの追加

基になるクエリで OrderBy 句を使用してデータを並べ替えるだけでなく、ページの XAML で並べ替えを構成することもできます。並べ替えを構成するには、SortDescriptors を DomainDataSource に追加します。SortDescriptors は、XAML に直接追加することも、次の手順の指示に従い、プロパティ ウィンドウを使用して追加することもできます。

プロパティ ウィンドウを使用して SortDescriptors を追加するには

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

  2. XAML ビューでは、Name 属性が salesOrderHeaderDomainDataSource1 に設定されている riaControls:DomainDataSource 要素にカーソルを置きます。

    Warning 注意 :
    このファイルには、riaControls:DomainDataSource 要素が 2 つあります。Name 属性が salesOrderHeaderDomainDataSource1 に設定されている要素にカーソルを置いていることを確認してください。

  3. [プロパティ] ウィンドウで、[SortDescriptors] プロパティをクリックし、省略記号ボタン (...) をクリックします。

    RIADisplayingData07SortDescriptorsProperty

    SortDescriptors コレクション エディターが表示されます。

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

    SortDescriptors 項目が追加されます。

  5. [プロパティ] で [その他] カテゴリを展開します。

  6. [PropertyPath] 値列に「CustomerID」と入力します。

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

    riaControls:DomainDataSource 要素に次の XAML が追加されていることを確認します。

    <riaControls:DomainDataSource.SortDescriptors>
    <riaControls:SortDescriptor PropertyPath="CustomerID" />
</riaControls:DomainDataSource.SortDescriptors>

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

  9. [Order List] をクリックします。

    データは一覧の Customer ID で並べ替えられます。

    RIADisplayingData09SortedByCustomerID

    Warning 注意 :
    ページングと並べ替えを同時に実装する場合は、プライマリ キーのような一意の値を含むプロパティに PropertyPath 属性が割り当てられた SortDescriptor を少なくとも 1 つ含めます。または、一意の値を含むプロパティに基づいて OrderBy 句を DomainDataSource のクエリに追加します。一意の値を含まないプロパティのデータを並べ替えるのみの場合、ページ間でのデータの不整合や欠落が戻り値に生じる可能性があります。

ページングの追加

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

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

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

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

  3. DataPager をデザイナーにある DataGrid の下の領域にドラッグします。

  4. [データ ソース] ウィンドウで、SalesOrderHeader ノードをクリックし、ドロップダウン メニューをクリックして、GetOrdersWithSmallSubtotalsQuery が選択されていることを確認します。

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

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

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

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

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

  9. [Order List] をクリックします。

  10. DataPager のナビゲーション ボタンをクリックし、DataGrid で一度に 5 レコードずつ移動します。

    RIADisplayingData10OrderListPageComplete

日付で注文を検索するページの作成

このチュートリアルでは、ユーザーが指定した日付よりも出荷日が前の注文を返すカスタム クエリをドメイン サービスに追加しました。ここでは、[データ ソース] ウィンドウを使用して、後でドメイン サービス クエリに渡されるユーザー指定のパラメーターを受け取るユーザー インターフェイスを作成する方法を示します。

ユーザー インターフェイスを作成するには

  1. AdventureWorksApp プロジェクトの Views フォルダーに、OrderSearchByShipDateBefore.xaml という名前の新しい Silverlight ページを追加します。

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

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

    <Rectangle x:Name="Divider4" Style="{StaticResource DividerStyle}"/>
<HyperlinkButton x:Name="Link4" Content="Ship Date" Style="{StaticResource LinkStyle}" NavigateUri="/OrderSearchByShipDateBefore" TargetName="ContentFrame"/>

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

  5. [データ ソース] ウィンドウで [SalesOrderHeader] ノードをクリックし、ドロップダウン メニューをクリックします。

  6. [GetShipDateBeforeQuery] を選択し、このエンティティのクエリとして設定します。

    RIADisplayingData11DataSourcesGetShipDateBeforeQue

  7. [SalesOrderHeader] ノードをデザイナーにドラッグします。

    DataGrid 以外に、クエリ内のパラメーターを受け取るテキスト ボックスが作成され、クエリを実行してデータを読み込むためのボタンが追加されます。

    RIADisplayingData12ShipDateQueryOnDesigner

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

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

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

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

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

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

  3. [Ship Date] をクリックし、出荷日のクエリを含むページを開きます。

  4. [Ship Date] ボックスに、1/1/2006 などの日付を入力します。

  5. [読み込み] をクリックします。

    指定した日付より前の出荷日のみが返されます。

    RIADisplayingData13ShipDateQueryComplete

  6. 他の出荷日も試します。

次の手順

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

参照

概念

Silverlight クライアント