チュートリアル: WCF Data Service への Silverlight コントロールのバインド

このチュートリアルでは、データ バインド コントロールを含む Silverlight アプリケーションを作成します。コントロールは、WCF Data Services を介してアクセスされる顧客レコードにバインドします。

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

• AdventureWorksLT サンプル データベースのデータから生成されるエンティティ データ モデルを作成する。

• Silverlight アプリケーションにエンティティ データ モデルのデータを公開する WCF Data Services を作成する。

• データ ソース構成ウィザードを実行して [データ ソース] ウィンドウに読み込まれるデータ サービスに接続する。

• [データ ソース] ウィンドウから Silverlight Designer に項目をドラッグして一連のデータ バインド コントロールを作成する。

• レコード間を前後に移動するためのボタンを作成する。

  [!メモ]

  お使いのマシンで、Visual Studio ユーザー インターフェイスの一部の要素の名前や場所が、次の手順とは異なる場合があります。これらの要素は、使用している Visual Studio のエディションや独自の設定によって決まります。詳細については、「Visual Studio の設定」を参照してください。

必須コンポーネント

このチュートリアルを実行するには、次のコンポーネントが必要です。

• Visual Studio

• AdventureWorksLT サンプル データベースがアタッチされた SQL Server または SQL Server Express の実行中のインスタンスへのアクセス。AdventureWorksLT データベースは、CodePlex の Web サイトからダウンロードできます。

次の概念に関する予備知識があると役に立ちますが、チュートリアルを完了するうえで必須ではありません。

• WCF Data Services。詳細については、「ADO.NET Data Services Framework Overview」を参照してください。

• エンティティ データ モデルおよび ADO.NET Entity Framework。詳細については、「Introducing the Entity Framework」を参照してください。

• Silverlight Designer の操作。

• Silverlight のデータ バインディング。詳細については、「データ バインディング」を参照してください。

サービス プロジェクトの作成

このチュートリアルを開始するには、WCF Data Services をホストする空の Web アプリケーション プロジェクトを作成します。

サービス プロジェクトを作成するには

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

2. [Visual C#] または [Visual Basic] を展開し、[Web] を選択します。

3. [ASP.NET 空の Web アプリケーション] プロジェクト テンプレートを選択します。

4. [名前] ボックスに「AdventureWorksWebApp」と入力し、[OK] をクリックします。

サービスで使用する Entity Data Model の作成

WCF Data Services を使用してアプリケーションにデータを公開するには、サービスのデータ モデルを定義する必要があります。このチュートリアルでは、エンティティ データ モデルを作成します。

Entity Data Model を作成するには

1. [プロジェクト] メニューの [新しい項目の追加] をクリックします。

2. [ADO.NET エンティティ データ モデル] プロジェクト項目を選択します。

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

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

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

5. [データ接続の選択] ページで、次のいずれかのオプションを選択します。

   • AdventureWorksLT サンプル データベースへのデータ接続がドロップダウン リストに表示されている場合は、それを選択します。

     または

   • [新しい接続] をクリックし、AdventureWorksLT データベースへの接続を作成します。

6. [エンティティ接続設定に名前を付けて Web.Config に保存] オプションが選択されていることを確認し、[次へ] をクリックします。

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

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

サービスの作成

エンティティ データ モデルのデータを公開する WCF Data Services を作成します。

サービスを作成するには

1. [プロジェクト] メニューの [新しい項目の追加] をクリックします。

2. [WCF Data Service] プロジェクト項目をクリックします。

3. [名前] ボックスに「AdventureWorksDataService.svc」と入力し、[追加] をクリックします。

サービスの構成

作成したエンティティ データ モデルで動作するようにサービスを構成する必要があります。

サービスを構成するには

1. AdventureWorksDataService.svc コード ファイルで、AdventureWorksDataService クラス宣言を次のコードで置き換えます。

   Public Class AdventureWorksDataService
       Inherits DataService(Of AdventureWorksLTEntities)
   
       ' This method is called only once to initialize service-wide policies.
       Public Shared Sub InitializeService(ByVal config As DataServiceConfiguration)
           config.SetEntitySetAccessRule("*", EntitySetRights.All)
           config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2
       End Sub
   
   End Class
   

   public class AdventureWorksDataService : DataService<AdventureWorksLTEntities>
   {
       // This method is called only once to initialize service-wide policies.
       public static void InitializeService(DataServiceConfiguration config)
       {
           config.SetEntitySetAccessRule("*", EntitySetRights.All);
           config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;
       }
   }
   

2. プロジェクトをビルドし、エラーが発生しないことを確認します。

Silverlight アプリケーションの作成

新しい Silverlight アプリケーションを作成し、サービスにアクセスするデータ ソースを追加します。

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

1. ソリューション エクスプローラーでソリューション ノードを右クリックし、[追加] をポイントして、[新しいプロジェクト] をクリックします。

2. [新しいプロジェクト] ダイアログ ボックスで、[Visual C#] または [Visual Basic] を展開し、[Silverlight] をクリックします。

3. [Silverlight アプリケーション] プロジェクト テンプレートをクリックします。

4. [名前] ボックスに「AdventureWorksSilverlightApp」と入力し、[OK] をクリックします。

5. [新しい Silverlight アプリケーション] ダイアログ ボックスで、[OK] をクリックします。

Silverlight アプリケーションへのデータ ソースの追加

サービスによって返されるデータに基づくデータ ソースを作成します。

データ ソースを作成するには

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

2. [データ ソース] ウィンドウで、[新しいデータ ソースの追加] をクリックします。

   データ ソース構成ウィザードが開きます。

3. ウィザードの [データ ソースの種類を選択] ページで、[サービス] を選択し、[次へ] をクリックします。

4. [サービス参照の追加] ダイアログ ボックスで [探索] をクリックします。

   Visual Studio によって、使用できるサービスが現在のソリューションで検索され、AdventureWorksDataService.svc が [サービス] ボックスの使用できるサービスの一覧に追加されます。

5. [名前空間] ボックスに「AdventureWorksService」と入力します。

6. [サービス] ボックスで [AdventureWorksDataService.svc] をクリックし、[OK] をクリックします。

7. [サービス参照の追加] ページで、[完了] をクリックします。

   Visual Studio によって、サービスから返されたデータを表すノードが [データ ソース] ウィンドウに追加されます。

ウィンドウのユーザー インターフェイスの定義

ウィンドウにボタンを追加するには、Silverlight Designerで XAML を変更します。

ウィンドウ レイアウトを作成するには

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

   Silverlight Designerで、ウィンドウが開きます。

2. デザイナーの XAML ビューで、<Grid> タグの間に次のコードを追加します。

   <Grid.RowDefinitions>
       <RowDefinition Height="75" />
       <RowDefinition Height="525" />
   </Grid.RowDefinitions>
   <Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75" Content="&lt;"></Button>
   <Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75" Content="&gt;"></Button>
   

3. プロジェクトをビルドします。

データ バインド コントロールの作成

顧客レコードを表示するコントロールを作成するには、[データ ソース] ウィンドウからデザイナーに [Customers] ノードをドラッグします。

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

1. [データ ソース] ウィンドウで、[Customers] ノードのドロップダウン メニューをクリックし、[詳細] を選択します。

2. [Customers] ノードを展開します。

3. この例では、いくつかのフィールドを非表示にするために、次のノードの横にあるドロップダウン メニューをクリックし、[なし] を選択します。

   • NameStyle

   • PasswordHash

   • PasswordSalt

   • rowguid

   これにより、これらのノードをデザイナーにドロップしたときに Visual Studio でコントロールが作成されなくなります。このチュートリアルでは、エンド ユーザーがこのデータを表示する必要はないと仮定します。

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

   Visual Studio により、XAML と、顧客データにバインドされる一連のコントロールを作成するコードが生成されます。

サービスからのデータの読み込み

サービスを使用してデータを読み込み、返されたデータをコントロールにバインドされたデータ ソースに割り当てます。

サービスからデータを読み込むには

1. デザイナーで、いずれかのボタンの横にある空の領域をクリックします。

2. プロパティ ウィンドウで、[UserControl] が選択されていることを確認し、[イベント] タブをクリックします。

3. Loaded イベントを検索し、このイベントをダブルクリックします。

4. 表示されたコード ファイル (MainPage.xaml) で、次の using ステートメント (C#) または Imports ステートメント (Visual Basic) を追加します。

   Imports System.Windows.Data
   Imports AdventureWorksSilverlightApp.AdventureWorksService
   

   using System.Windows.Data;
   using AdventureWorksSilverlightApp.AdventureWorksService;
   

5. イベント ハンドラーを次のコードで置き換えます。このコードの localhost アドレスは、使用中の開発用コンピューターのローカル ホスト アドレスで置き換えてください。

   Private advWorksService As AdventureWorksLTEntities
   Private customersViewSource As CollectionViewSource
   
   Private Sub UserControl_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
       advWorksService = New AdventureWorksLTEntities(New Uri("https://localhost:6188/AdventureWorksDataService.svc"))
       customersViewSource = Me.Resources("CustomersViewSource")
       advWorksService.Customers.BeginExecute(Sub(result As IAsyncResult)
                                                  customersViewSource.Source = advWorksService.Customers.EndExecute(result)
                                              End Sub, Nothing)
   End Sub
   

   private AdventureWorksLTEntities advWorksService;
   private System.Windows.Data.CollectionViewSource customersViewSource;
   
   private void UserControl_Loaded(object sender, RoutedEventArgs e)
   {
       advWorksService = new AdventureWorksLTEntities(new Uri("https://localhost:54961/AdventureWorksDataService.svc"));
   
       customersViewSource = this.Resources["customersViewSource"]
       as System.Windows.Data.CollectionViewSource;
       advWorksService.Customers.BeginExecute(result => customersViewSource.Source = advWorksService.Customers.EndExecute(result), null);
   }
   

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

アプリケーションをビルドして実行し、顧客レコードを表示できることを確認します。

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

1. [ビルド] メニューの [ソリューションのビルド] をクリックします。ソリューションがエラーなしでビルドされることを確認します。

2. F5 キーを押します。

3. Customers テーブルの最初のレコードが表示されることを確認します。

4. アプリケーションを閉じます。

   [!メモ]

   ここでエラーが表示される場合は、ASP.NET 開発サーバーの適切なポートがコードに含まれていることを確認します。

レコード間の移動

[<] ボタンと [>] ボタンを使用してレコード間をスクロールできるようにするコードを追加します。

ユーザーが販売レコード間を移動できるようにするには

1. MainPage.xaml をデザイナーで開き、[<] ボタンをダブルクリックします。

2. 生成された backButton_Click イベント ハンドラーを次のコードで置き換えます。

   Private Sub backButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles backButton.Click
       customersViewSource.View.MoveCurrentToPrevious()
       If customersViewSource.View.IsCurrentBeforeFirst Then
           customersViewSource.View.MoveCurrentToFirst()
       End If
   End Sub
   

   private void backButton_Click(object sender, RoutedEventArgs e)
   {
       customersViewSource.View.MoveCurrentToPrevious();
       if (customersViewSource.View.IsCurrentBeforeFirst)
           customersViewSource.View.MoveCurrentToFirst();
   }
   

3. デザイナーに戻り、[>] ボタンをダブルクリックします。

   Visual Studio で分離コード ファイルが開き、新しい nextButton_Click イベント ハンドラーが作成されます。

4. 生成された nextButton_Click イベント ハンドラーを次のコードで置き換えます。

   Private Sub nextButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles nextButton.Click
       customersViewSource.View.MoveCurrentToNext()
       If customersViewSource.View.IsCurrentAfterLast Then
           customersViewSource.View.MoveCurrentToLast()
       End If
   End Sub
   

   private void nextButton_Click(object sender, RoutedEventArgs e)
   {
       customersViewSource.View.MoveCurrentToNext();
       if (customersViewSource.View.IsCurrentAfterLast)
           customersViewSource.View.MoveCurrentToLast();
   }
   

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

アプリケーションをビルドして実行し、顧客レコードを表示および移動できることを確認します。

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

1. [ビルド] メニューの [ソリューションのビルド] をクリックします。ソリューションがエラーなしでビルドされることを確認します。

2. F5 キーを押します。

3. Customers テーブルの最初のレコードが表示されることを確認します。

4. [<] ボタンおよび [>] ボタンをクリックして、顧客レコード間を前後に移動します。

5. アプリケーションを閉じます。

   [!メモ]

   ここでエラーが表示される場合は、ASP.NET 開発サーバーの適切なポートがコードに含まれていることを確認します。

次の手順

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

• 変更をデータベースに保存する方法を学ぶ。詳細については、「データ バインディング」を参照してください。

• Silverlight アプリケーションで WCF Data Services を使用して機能を組み込む方法を学ぶ。詳細については、「ADO.NET Data Services (Silverlight)」を参照してください。

参照

その他の技術情報

Data Access and Data Structures (データ アクセスとデータ構造)