Procédure pas à pas : Affichage de données liées dans une application métier Silverlight

Dans cette procédure pas à pas, vous allez créer une application métier Silverlight affichant les données de deux tables associées dans l'exemple de base de données AdventureWorks.

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

• Création d'une application métier Silverlight qui se compose de deux projets : un client Silverlight et une application Web ASP.NET.

• Modification du nom de l'application en modifiant une chaîne de ressource.

• Création d'un Entity Data Model basé sur un fichier de base de données.

• Création d'un service de domaine qui expose les données de l'Entity Data Model au client Silverlight. Pour plus d'informations, consultez Services de domaine.

• Modification d'une requête dans le service de domaine pour retourner des données liées.

• Modification des métadonnées des services de domaine pour prendre en charge le chargement de données liées.

• Création de pages Silverlight supplémentaires pour présenter les données aux utilisateurs.

• Ajout de boutons à la barre de navigation par défaut pour accéder aux pages Silverlight.

• Configuration des pages Silverlight pour afficher des données en faisant glisser des éléments depuis la fenêtre Sources de données vers le Concepteur Silverlight.

• Ajout d'un DataPager pour parcourir les enregistrements.

Configuration requise

Cette procédure pas à pas, ainsi que les autres procédures du même type présentées dans la documentation des Services RIA WCF, nécessite au préalable l'installation et la configuration correctes de plusieurs programmes, tels que Visual Studio 2010 et le Developer Runtime et SDK Silverlight, en plus des Services RIA WCF et du kit de ressources des Services RIA WCF. Ces procédures nécessitent également l'installation et la configuration de SQL Server 2008 R2 Express with Advanced Services et l'installation de la base de données AdventureWorks OLTP et LT.

Vous trouverez des instructions détaillées pour satisfaire chacune de ces conditions préalables dans les rubriques du nœud Conditions préalables pour les Services RIA WCF. Suivez ces instructions avant de poursuivre, pour être sûr de rencontrer le moins de problèmes possibles en effectuant ces procédures pas à pas des Services RIA .

Cette procédure pas à pas suppose que vous soyez en mesure de créer une application métier Silverlight. La procédure permettant d'exécuter cette tâche est décrite dans Procédure pas à pas : Utilisation du modèle Application métier Silverlight.

Création de l'application métier Silverlight

Les applications métier Silverlight sont des solutions comportant deux projets : une application Silverlight et une application Web ASP.NET qui héberge cette application Silverlight. Les applications métier Silverlight possèdent des fonctionnalités intégrées. Par défaut, elles possèdent une page d'accueil, une page À propos de, une barre de navigation et des fonctionnalités d'inscription sur le site.

Pour créer l'application

1. Dans Visual Studio 2010, créez un projet d'application métier Silverlight en Visual Basic ou en C#, nommé AdventureWorksOrders. La procédure permettant d'exécuter cette tâche est décrite dans Procédure pas à pas : Utilisation du modèle Application métier Silverlight.

   La solution AdventureWorksOrders est créée avec deux projets : un projet Silverlight AdventureWorksOrders et un projet d'application Web AdventureWorksOrders.Web.

2. Dans l'Explorateur de solutions, développez le projet AdventureWorksOrders.

3. Développez le dossier Assets, puis développez Resources.

4. Double-cliquez sur ApplicationStrings.resx pour ouvrir le Concepteur de ressources.

5. Donnez à l'élément Valeur de la chaîne de ressource ApplicationName le nom Adventure Works Orders.

6. Enregistrez les modifications et fermez le fichier ApplicationStrings.resx.

7. Exécutez l'application.

   La page d'accueil s'ouvre et affiche la disposition par défaut, qui comprend le nom de l'application mis à jour.

Création d'un modèle de données pour l'application

Pour gérer les données dans l'application, vous devez utiliser un Entity Data Model.

Pour créer un Entity Data Model

1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur AdventureWorksOrders.Web, puis cliquez sur Ajouter et sur Nouvel élément.

   La boîte de dialogue Ajouter un nouvel élément s'affiche.

2. Dans la catégorie Données, cliquez sur le modèle ADO.NET Entity Data Model.

3. Donnez-lui le nom AdventureWorksEDM.edmx, puis cliquez sur Ajouter.

   L'Assistant EDM s'ouvre.

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

5. Sur la page Choisir votre connexion de données, cliquez sur Nouvelle connexion.

   La boîte de dialogue Propriétés de connexion s'affiche.

6. Sélectionnez Fichier de base de données Microsoft SQL Server pour la source de données et spécifiez l'emplacement du fichier de base de données AdventureWorksLT.

7. Cliquez sur OK.

8. Sur la page Choisir votre connexion de données, cliquez sur Suivant.

9. Si un message s'affiche vous demandant si vous voulez copier le fichier de base de données dans votre projet et modifier la connexion, cliquez sur Oui.

10. Sur la page Choisir vos objets de base de données, développez le nœud Tables.

11. Activez les cases à cocher correspondant aux tables SalesOrderDetail (SalesLT) et SalesOrderHeader (SalesLT).

    

12. Cliquez sur Terminer.

    Les tables SalesOrderDetail et SalesOrderHeader s'affichent dans le Concepteur d'entités.

13. Générez la solution.

    Vous devez générer la solution avant d'ajouter un service de domaine.

Création d'un service de domaine

Un service de domaine expose au client les entités et les opérations de données du modèle de données. Dans cette procédure, vous ajoutez un service de domaine au projet serveur.

Pour créer un service de domaine

1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur AdventureWorksOrders.Web, puis cliquez sur Ajouter et sur Nouvel élément.

   La boîte de dialogue Ajouter un nouvel élément s'affiche.

2. Dans la catégorie Web, cliquez sur le modèle Classe DomainService.

3. Nommez la Classe DomainService AdventureWorksService, puis cliquez sur Ajouter.

   La boîte de dialogue Ajouter une nouvelle classe de service de domaine s'ouvre.

4. Activez les cases à cocher Activer la modification pour les deux entités SalesOrderDetail et SalesOrderHeader.

   

5. Cliquez sur OK.

6. Générez la solution.

Modification d'une requête du service de domaine pour inclure des données liées

Le service de domaine fournit des opérations par défaut que vous devez modifier pour votre application spécifique. Dans cette procédure, vous modifiez la requête GetSalesOrderHeaders afin qu'il retourne les enregistrements de SalesOrderDetail associés. L'ajout d'un ordre de tri à la requête est également nécessaire à l'exécution du DataPager.

Pour modifier une requête du service de domaine

1. Dans l'Explorateur de solutions, double-cliquez sur AdventureWorksService.vb ou AdventureWorksService.cs.

2. Mettez à jour la méthode GetSalesOrderHeaders, comme le montre le code suivant :

   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. Dans l'Explorateur de solutions, double-cliquez sur AdventureWorksService.metadata.vb ou AdventureWorksService.metadata.cs.

4. Dans la classe SalesOrderHeaderMetadata, ajoutez un attribut Include juste avant l'instruction de la collection d'entité SalesOrderDetails :

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

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

5. Générez la solution.

Création d'une page Silverlight pour afficher des données

Dans cette procédure, vous ajoutez une page Orders pour afficher les données des tables.

Pour créer une page Silverlight

1. Dans l'Explorateur de solutions, dans AdventureWorksOrders, cliquez avec le bouton droit sur le dossier Views et ajoutez un nouvel élément.

2. Dans la boîte de dialogue Ajouter un nouvel élément, cliquez sur la catégorie Silverlight, puis sur le modèle Page Silverlight.

3. Modifiez le nom en Orders.xaml, puis cliquez sur Ajouter.

Ajout d'un bouton de navigation à la page d'accueil

Dans cette procédure, vous allez ajouter à la page d'accueil de l'application un bouton qui permet d'accéder à la page Orders.

Pour créer un bouton de navigation

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

2. Dans la vue XAML, ajoutez le code suivant après la ligne <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. Exécutez l'application.

   Le bouton Orders doit s'afficher dans la barre de navigation.

4. Cliquez sur le bouton Orders.

   La page Orders vierge s'affiche.

Affichage de données liées sur la page

Dans cette procédure, vous allez créer des contrôles liés aux données sur la page Orders en faisant glisser directement des éléments depuis la fenêtre Sources de données sur le concepteur. Vous créez d'abord un DataGrid qui affiche des informations de base concernant une commande individuelle, telles que le numéro de compte (Account Number), l'ID client (CustomerID) et le montant dû (Amount Due). Vous créez ensuite un contrôle Grid qui répertorie les éléments individuels de cette commande.

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

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

2. Cliquez sur le menu Données, puis sur Afficher les sources de données.

   La fenêtre Sources de données s'ouvre. Remarquez que la fenêtre Sources de données contient déjà les entités disponibles pour l'application.

3. Cliquez sur le nœud SalesOrderHeader, puis sur le menu déroulant.

4. Cliquez sur Détails.

5. Depuis la fenêtre Sources de données faites glisser le nœud SalesOrderHeader jusqu'au concepteur.

   Un Grid est créé, qui est rempli avec les contrôles pour les champs de données de la table SalesOrderHeader.

   

6. Dans la fenêtre Sources de données, développez le nœud SalesOrderHeader.

7. Cliquez sur le nœud SalesOrderDetails (nœud enfant du nœud SalesOrderHeader).

   

8. Faites glisser le nœud SalesOrderDetails sur le concepteur à côté des contrôles de commande individuelle.

   Un DataGrid est créé, qui est rempli avec les champs de la table SalesOrderDetail.

   

Ajout de la pagination pour parcourir les données de commande

Dans cette procédure, vous allez ajouter une pagination en ajoutant un DataPager à la source de données. Paramétrez l'objet DataPager.Source sur l'objet DomainDataSource qui gère les données que le pagineur doit contrôler.

Remarque :
Le DataPager exige que sa source de données soit triée de façon explicite. C'est pourquoi la clause OrderBy a été ajoutée à la requête précédemment dans cette procédure pas à pas.

Pour configurer la pagination des données

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

2. Recherchez le contrôle DataPager dans la Boîte à outils.

3. Faites glisser le DataPager sur le concepteur.

4. Dans la fenêtre Sources de données, cliquez sur le nœud SalesOrderHeader.

5. Faites glisser le nœud SalesOrderHeader sur le DataPager.

   Cela paramètre la propriété Source du DataPager sur la source de données correcte.

6. Sélectionnez le DataPager sur le concepteur.

7. Dans la fenêtre Propriétés, affectez à la propriété PageSize la valeur 1.

Test de l'application

Dans cette procédure, vous allez générer et exécuter l'application afin de vérifier que l'application se comporte comme prévu.

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. Exécutez l'application.

3. Cliquez sur le bouton Orders.

4. Cliquez sur les boutons de navigation dans les boutons du DataPager pour parcourir les enregistrements de commande.

   Notez que les détails de la commande associés s'affichent dans le DataGrid en parcourant les enregistrements d'en-tête de commande.

   

Étapes suivantes

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

• Modifier les enregistrements et enregistrer les modifications dans la base de données. Pour plus d'informations, consultez Procédure pas à pas : Édition des données d'un service de domaine.

Voir aussi

Concepts

Services RIA WCF
Clients Silverlight