Procédure pas à pas : liaisons de contrôles Silverlight à un service de données WCF

Dans cette procédure pas à pas, vous allez créer une application Silverlight qui contient des contrôles liés aux données.Les contrôles sont liés aux enregistrements client accessibles via un Service de données WCF.

Cette procédure pas à pas décrit les tâches suivantes :

• Création d'un Entity Data Model généré à partir de données de l'exemple de base de données AdventureWorksLT.

• Création d'un Service de données WCF qui expose les données de l'Entity Data Model dans une application Silverlight.

• Exécution de l'Assistant Configuration de source de données pour se connecter au service de données qui remplit la fenêtre Sources de données.

• Création d'un jeu de contrôles liés aux données en faisant glisser des éléments de la fenêtre Sources de données vers le Concepteur Silverlight.

• Création de boutons permettant de naviguer vers l'avant et vers l'arrière dans les enregistrements.

  [!REMARQUE]

  Il est possible que votre ordinateur affiche des noms ou des emplacements différents pour certains des éléments d'interface utilisateur de Visual Studio dans les instructions suivantes. L'édition de Visual Studio dont vous disposez et les paramètres que vous utilisez déterminent ces éléments. Pour plus d'informations, consultez Paramètres Visual Studio.

Composants requis

Pour exécuter cette procédure pas à pas, vous devez disposer des composants suivants :

• Visual Studio

• Accès à une instance en cours d'exécution de SQL Server ou SQL Server Express à laquelle l'exemple de base de données AdventureWorksLT est liée.Vous pouvez télécharger la base de données AdventureWorksLT à partir du site Web CodePlex.

Une connaissance préalable des concepts suivants est aussi utile, mais pas obligatoire, pour effectuer cette procédure pas à pas :

• Services de données WCF.Pour plus d'informations, consultez ADO.NET Data Services Framework Overview.

• Entity Data Models et ADO.NET Entity Framework.Pour plus d'informations, consultez Introducing the Entity Framework.

• Utilisation de Concepteur Silverlight.

• Liaison de données Silverlight.Pour plus d'informations, consultez Liaison de données.

Création du projet de service

Démarrez cette procédure pas à pas en créant un projet d'application Web vide pour héberger un Service de données WCF.

Pour créer le projet de service

1. Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur Projet.

2. Développez Visual C# ou Visual Basic, puis sélectionnez Web.

3. Sélectionnez le modèle de projet Application Web ASP.NET vide.

4. Dans la zone Nom, tapez AdventureWorksWebApp, puis cliquez sur OK.

Création d'un Entity Data Model pour le service

Pour exposer des données dans une application à l'aide d'un Service de données WCF, vous devez définir un modèle de données pour le service.Dans cette procédure pas à pas, vous créez un Entity Data Model.

Pour créer un modèle EDM (Entity Data Model)

1. Dans le menu Projet, cliquez sur Ajouter un nouvel élément.

2. Sélectionnez l'élément de projet Entity Data Model ADO.NET.

3. Renommez-le en AdventureWorksDataModel.edmx, puis cliquez sur Ajouter.

   L'Assistant Entity Data Model s'ouvre.

4. Dans la page Choisir le contenu du Model, cliquez sur Générer à partir de la base de données, puis sur Suivant.

5. Dans la page Choisir votre connexion de données, sélectionnez l'une des options suivantes :

   • Si une connexion de données à l'exemple de base de données AdventureWorksLT est disponible dans la liste déroulante, sélectionnez-la.

     ou

   • Cliquez sur Nouvelle connexion et créez une connexion à la base de données AdventureWorksLT.

6. Assurez-vous que l'option Enregistrer les paramètres de connexion de l'entité dans Web.Config en tant que est sélectionnée, puis cliquez sur Suivant.

7. Dans la page Choisir vos objets de base de données, développez le nœud Tables, puis sélectionnez la table Customer.

8. Cliquez sur Terminer.

Création du service

Créez un Service de données WCF pour exposer les données dans l'Entity Data Model.

Pour créer le service

1. Dans le menu Projet, cliquez sur Ajouter un nouvel élément.

2. Sélectionnez l'élément de projet Service de données WCF.

3. Dans la zone Nom, tapez AdventureWorksDataService.svc, puis cliquez sur Ajouter.

Configuration du service

Vous devez configurer le service de façon à ce qu'il fonctionne sur l'Entity Data Model que vous avez créé.

Pour configurer le service

1. Dans le fichier de code AdventureWorksDataService.svc, remplacez la déclaration de classe AdventureWorksDataService par le code suivant :

   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. Générez le projet et vérifiez que la génération du projet s'exécute correctement.

Création de l'application Silverlight

Créez une application Silverlight, puis ajoutez une source de données pour accéder au service.

Pour créer l'application Silverlight

1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nœud de la solution, cliquez sur Ajouter, sélectionnez Nouveau projet.

2. Dans la boîte de dialogue Nouveau projet, développez Visual C# ou Visual Basic, puis sélectionnez Silverlight.

3. Sélectionnez le modèle de projet Application Silverlight.

4. Dans la zone Nom, tapez AdventureWorksSilverlightApp, puis cliquez sur OK.

5. Dans la boîte de dialogue Nouvelle application Silverlight, cliquez sur OK.

Ajout de la source de données à l'application Silverlight

Créez une source de données basée sur les données retournées par le service.

Pour créer la source de données

1. Dans le menu Données, cliquez sur Afficher les sources de données.

2. Dans la fenêtre Sources de données, cliquez sur Ajouter une nouvelle source de données.

   L'Assistant Configuration de source de données s'ouvre.

3. Dans la page Choisir un type de source de données de l'Assistant, sélectionnez Service, puis cliquez sur Suivant.

4. Dans la boîte de dialogue Ajouter une référence de service, cliquez sur Découvrir.

   Visual Studio recherche la solution actuelle pour les services disponibles et ajoute AdventureWorksDataService.svc à la liste des services disponibles dans la zone Services.

5. Dans la zone Espace de noms, tapez AdventureWorksService.

6. Dans la zone Services, cliquez sur AdventureWorksService.svc, puis sur OK.

7. Dans la page Ajouter une référence de service, cliquez sur Terminer.

   Visual Studio ajoute des nœuds qui représentent les données retournées par le service dans la fenêtre Sources de données.

Définition de l'interface utilisateur de la fenêtre

Ajoutez des boutons à la fenêtre en modifiant le code XAML dans le Concepteur Silverlight.

Pour créer la disposition de fenêtre

1. Dans l'Explorateur de solutions, double-cliquez sur MainPage.xaml.

   La fenêtre s'ouvre dans le Concepteur Silverlight.

2. Dans la vue XAML du concepteur, ajoutez le code suivant entre les balises <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. Générez le projet.

Création des contrôles liés aux données

Créez des contrôles qui affichent les enregistrements de client en faisant glisser le nœud Customers de la fenêtre Sources de données vers le concepteur.

Pour créer les contrôles liés aux données

1. Dans la fenêtre Sources de données, cliquez sur le menu déroulant du nœud Clients et sélectionnez Détails.

2. Développez le nœud Clients.

3. Pour cet exemple, certains champs ne seront pas affichés. Par conséquent, cliquez sur le menu déroulant en regard des nœuds suivants et sélectionnez Aucun :

   • NameStyle

   • PasswordHash

   • PasswordSalt

   • rowguid

   Cela empêche Visual Studio de créer des contrôles pour ces nœuds lorsqu'ils sont déplacés vers le concepteur.Pour cette procédure pas à pas, on suppose que l'utilisateur final ne souhaite pas afficher ces données.

4. À partir de la fenêtre Sources de données, faites glisser le nœud Customers vers le concepteur, sous les boutons.

   Visual Studio génère du code XAML qui crée un ensemble de contrôles liés aux données client.

Charger les données à partir du service

Utilisez le service pour charger les données, puis assignez les données retournées à la source de données liée aux contrôles.

Pour charger les données à partir du service

1. Dans le concepteur, cliquez sur une zone vide en regard de l'un des boutons.

2. Dans la fenêtre Propriétés, vérifiez que l'objet UserControl est sélectionnée, puis cliquez sur l'onglet Événements.

3. Recherchez l'événement Loaded et double-cliquez sur celui-ci.

4. Dans le fichier de code qui s'ouvre (MainPage.xaml), ajoutez les instructions using (C#) ou Imports (Visual Basic) suivantes :

   Imports System.Windows.Data
   Imports AdventureWorksSilverlightApp.AdventureWorksService
   

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

5. Remplacez le gestionnaire d'événements par le code suivant.Assurez-vous de remplacer l'adresse localhost dans ce code par l'adresse de l'hôte locale sur votre ordinateur de développement :

   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);
   }
   

Test de l'application

Générez et exécutez l'application pour vérifier que vous pouvez afficher les enregistrements de client.

Pour tester l'application

1. Dans le menu Générer, cliquez sur Générer la solution.Vérifiez que la solution est générée sans erreur.

2. Appuyez sur F5.

3. Vérifiez que le premier enregistrement dans la table Customers apparaît.

4. Fermez l'application.

   [!REMARQUE]

   Si une erreur apparaît ici, vérifiez que le code contient le port approprié pour votre serveur de développement ASP.NET.

Navigation dans les enregistrements

Ajoutez du code permettant aux utilisateurs de faire défiler les enregistrements à l'aide des boutons < et >.

Pour permettre aux utilisateurs de naviguer dans les enregistrements des ventes

1. Ouvrez le fichier MainPage.xaml dans le concepteur et double-cliquez sur le bouton <.

2. Remplacez le gestionnaire d'événements backButton_Click généré par le code suivant :

   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. Revenez au concepteur et double-cliquez sur le bouton >.

   Visual Studio ouvre le fichier code-behind et crée un gestionnaire d'événements nextButton_Click.

4. Remplacez le gestionnaire d'événements nextButton_Click généré par le code suivant :

   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();
   }
   

Test de l'application

Générez et exécutez l'application pour vérifier que vous pouvez afficher les enregistrements de client et naviguer entre ceux-ci.

Pour tester l'application

1. Dans le menu Générer, cliquez sur Générer la solution.Vérifiez que la solution est générée sans erreur.

2. Appuyez sur F5.

3. Vérifiez que le premier enregistrement dans la table Customers apparaît.

4. Cliquez sur les boutons < et > pour naviguer en avant et en arrière dans les enregistrements de client.

5. Fermez l'application.

   [!REMARQUE]

   Si une erreur apparaît ici, vérifiez que le code contient le port approprié pour votre serveur de développement ASP.NET.

Étapes suivantes

À l'issue de cette procédure pas à pas, vous pourrez effectuer les tâches connexes suivantes :

• Apprenez comment enregistrer les modifications dans la base de données.Pour plus d'informations, consultez Liaison de données.

• Apprenez comment incorporer des fonctionnalités supplémentaires dans les applications Silverlight à l'aide d'Services de données WCF.Pour plus d'informations, consultez ADO .NET Data Services (Silverlight) (page éventuellement en anglais).

Voir aussi

Autres ressources

Accès aux données et structures de données