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

Article
03/11/2011

Dans cette procédure pas à pas, vous créez une application métier Silverlight qui affiche les données de l'exemple de base de données AdventureWorks sur deux pages Silverlight différentes. La première page affiche les données de la table SalesOrderHeader et fournit les éléments permettant de parcourir les enregistrements de base de données page par page. La deuxième page permet à l'utilisateur d'exécuter une requête en fonction d'une date.

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

Création d'une application métier Silverlight composée 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 et ajout de requêtes personnalisées au service de domaine.
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 de façon à afficher des données en faisant glisser des éléments depuis la fenêtre Sources de données vers le Concepteur Silverlight.
Tri et pagination des données.
Configuration d'une interface utilisateur de façon qu'elle accepte des paramètres de requête.

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. Un nom d'application par défaut est également fourni sous forme de chaîne de ressource à laquelle vous donnez le nom de votre application.

Pour créer l'application

Dans Visual Studio 2010, créez un projet d'application métier Silverlight en Visual Basic ou en C#, nommé AdventureWorksApp. 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 AdventureWorksApp est créée avec deux projets : un projet Silverlight AdventureWorksApp et un projet d'application Web AdventureWorksApp.Web.
Dans l'Explorateur de solutions, développez le projet AdventureWorksApp.
Développez le dossier Assets, puis développez Resources.
Double-cliquez sur ApplicationStrings.resx pour ouvrir le Concepteur de ressources.
Donnez à l'élément Valeur de la chaîne de ressource ApplicationName le nom Application Adventure Works.
Enregistrez les modifications et fermez le fichier ApplicationStrings.resx.
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

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

La boîte de dialogue Ajouter un nouvel élément s'affiche.
Dans la catégorie Données, cliquez sur le modèle ADO.NET Entity Data Model.
Donnez-lui le nom AdventureWorksEDM.edmx, puis cliquez sur Ajouter.

L'Assistant EDM s'ouvre.
Sur la page Choisir le contenu du modèle, cliquez sur Générer à partir de la base de données, puis sur Suivant.
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.
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.
Cliquez sur OK.
Sur la page Choisir votre connexion de données, cliquez sur Suivant.
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.
Sur la page Choisir vos objets de base de données, développez le nœud Tables.
Activez la case à cocher devant la table SalesOrderHeader (Sales LT).
Cliquez sur Terminer.

La table SalesOrderHeader s'affiche dans le Concepteur d'entités.
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

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

La boîte de dialogue Ajouter un nouvel élément s'affiche.
Dans la catégorie Web, cliquez sur le modèle Classe DomainService.
Nommez la Classe DomainService AdventureWorksService, puis cliquez sur Ajouter.

La boîte de dialogue Ajouter une nouvelle classe de service de domaine s'ouvre.
Activez les cases à cocher SalesOrderHeader et Activer la modification, puis cliquez sur OK.
Générez la solution.

Modification d'une requête du service de domaine

Quand vous ajoutez une classe DomainService, celle-ci contient des méthodes de requête. Vous pouvez décider d'utiliser ces méthodes de requête telles quelles. Cependant, dans de nombreux cas, certaines modifications sont nécessaires. Dans cette procédure, vous allez modifier la méthode de requête GetSalesOrderHeaders.

Pour modifier une requête du service de domaine

Dans l'Explorateur de solutions, double-cliquez sur AdventureWorksService.vb ou AdventureWorksService.cs pour ouvrir ce fichier.

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

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

Générez la solution.

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

Dans cette procédure, vous allez ajouter une page OrderList pour afficher les données de la table SalesOrderHeader.

Pour créer une page Silverlight

Dans l'Explorateur de solutions, dans le projet AdventureWorksApp, cliquez avec le bouton droit sur le dossier Vues et ajoutez un nouvel élément.
Dans la boîte de dialogue Ajouter un nouvel élément, sélectionnez la catégorie Silverlight, puis cliquez sur le modèle Page Silverlight.
Modifiez le nom en OrderList.xaml, puis cliquez sur Ajouter.

OrderList.xaml s'ouvre dans le concepteur.
Depuis la Boîte à outils, faites glisser un TextBlock vers le haut du concepteur.
Dans la fenêtre Propriétés, modifiez la propriété Texte en Liste commande.
Enregistrez la page OrderList.xaml.

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

Dans l'Explorateur de solutions, double-cliquez sur MainPage.xaml pour l'ouvrir dans le concepteur.

Dans la vue XAML, ajoutez la balise suivante après la ligne <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"/>

Exécutez l'application.

Le bouton Liste commande doit s'afficher dans la barre de navigation.
Cliquez sur le bouton Liste commande.

La page OrderList s'affiche.

Affichage de données de commande sur la page OrderList

Dans cette procédure, vous allez créer et configurer un DataGrid pour afficher des données de commande en faisant glisser une entité de commande depuis la fenêtre Sources de données vers le concepteur.

Pour créer une grille de données liée aux données

Dans l'Explorateur de solutions, double-cliquez sur OrderList.xaml.
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.
Depuis la fenêtre Sources de données, faites glisser le nœud SalesOrderHeader vers le concepteur (au-dessous du bloc de texte Liste commande).

Une Grille de données contenant les en-têtes de colonne de la table SalesOrderHeader apparaît sur l'aire de conception.
Exécutez l'application.
Dans la barre de navigation, cliquez sur le bouton Liste commande.

Les données de commande s'affichent sur la page Liste commande.

Ajout de requêtes personnalisées au service de domaine

Vous pouvez créer des requêtes supplémentaires dans le service de domaine. Cette procédure ajoute deux requêtes personnalisées.

Pour ajouter des requêtes personnalisées au service de domaine

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

Ajoutez les méthodes suivantes à la classe 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);
}

Si vous utilisez Visual Basic, au début du fichier AdventureWorksService.vb, donnez à l'instruction Option Strict la valeur Off.
Générez la solution.

Affichage des données de la requête personnalisée

Dans cette procédure, vous allez afficher les données de la nouvelle requête en sélectionnant celle-ci dans la fenêtre Sources de données, puis en la faisant glisser sur la Grille de données qui se trouve déjà sur le concepteur. Cette action reconfigure la liaison de la Grille de données afin d'afficher les données de la requête sélectionnée.

Pour afficher les données de la requête personnalisée dans la grille de données existante

Dans l'Explorateur de solutions, double-cliquez sur OrderList.xaml.
Dans la fenêtre Sources de données, cliquez sur SalesOrderHeader, puis sur le menu déroulant.

Remarquez les trois requêtes répertoriées au bas du menu. La requête activée est celle qui sera définie dans le QueryName de la source de données générée une fois cette entité glissée sur le concepteur.
Sélectionnez GetOrdersWithSmallSubtotalsQuery dans la liste de requêtes pour la paramétrer comme requête de cette entité.
Faites glisser le nœud SalesOrderHeader sur la Grille de données existante sur le concepteur.
Exécutez l'application.
Cliquez sur le bouton Liste commande.

Notez qu'aucun sous-total de commande répertorié dans la Grille de données ne dépasse 2000.

Ajout de tri

Outre le tri des données effectué à l'aide de la clause OrderBy dans les requêtes sous-jacentes, vous pouvez aussi configurer un tri dans les éléments XAML de votre page. La configuration du tri se fait en ajoutant SortDescriptors au DomainDataSource. Vous pouvez ajouter SortDescriptors directement dans le XAML, ou utiliser la fenêtre Propriétés, comme indiqué dans la procédure suivante.

Pour ajouter SortDescriptors à l'aide de la fenêtre Propriétés

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

Dans la vue XAML, placez votre curseur dans l'élément riaControls:DomainDataSource dont l'attribut Name a la valeur salesOrderHeaderDomainDataSource1.

Attention :
Il existe deux éléments `riaControls:DomainDataSource` dans le fichier. Veillez à placer votre souris dans l'élément dont l'attribut `Name` a la valeur `salesOrderHeaderDomainDataSource1`.

Dans la fenêtre Propriétés, cliquez sur la propriété SortDescriptors, puis sur le bouton de sélection (…).

L'éditeur de collections de SortDescriptors s'affiche.
Cliquez sur Ajouter.

Un élément SortDescriptors est ajouté.
Sous Propriétés, développez la catégorie Autre.
Dans la colonne de valeur PropertyPath, tapez CustomerID.

Cliquez sur OK.

Remarquez que le XAML suivant a été ajouté à l'élément riaControls:DomainDataSource :

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

Exécutez l'application.

Cliquez sur le bouton Liste commande.

Notez que les données sont triées par Customer ID.

RIADisplayingData09SortedByCustomerID

Attention :
Lorsque vous implémentez ensemble la pagination et le tri, incluez au moins un SortDescriptor avec son attribut PropertyPath assigné à une propriété qui contient des valeurs uniques, telles qu'une clé primaire. Ou ajoutez à la requête une clause OrderBy basée sur une propriété qui contient des valeurs uniques dans DomainDataSource. Si vous triez seulement les données sur une propriété qui ne contient pas de valeurs uniques, les valeurs de retour pourraient contenir des données incohérentes ou manquantes à travers des pages.

Lorsque vous implémentez ensemble la pagination et le tri, incluez au moins un SortDescriptor avec son attribut PropertyPath assigné à une propriété qui contient des valeurs uniques, telles qu'une clé primaire. Ou ajoutez à la requête une clause OrderBy basée sur une propriété qui contient des valeurs uniques dans DomainDataSource. Si vous triez seulement les données sur une propriété qui ne contient pas de valeurs uniques, les valeurs de retour pourraient contenir des données incohérentes ou manquantes à travers des pages.

Ajout de pagination

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.

Pour configurer la pagination des données

Dans l'Explorateur de solutions, double-cliquez sur OrderList.xaml.
Dans la Boîte à outils, localisez le contrôle DataPager.
Faites glisser le DataPager sur une zone du concepteur située au-dessous du DataGrid.
Dans la fenêtre Sources de données, cliquez sur le nœud SalesOrderHeader, puis sur le menu déroulant et vérifiez que GetOrdersWithSmallSubtotalsQuery est sélectionné.
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.
Sélectionnez le DataPager sur le concepteur.
Dans la fenêtre Propriétés, affectez à la propriété PageSize la valeur 5.
Exécutez l'application.
Cliquez sur le bouton Liste commande.
Cliquez sur les boutons de navigation sur le DataPager pour parcourir 5 enregistrements à la fois dans le DataGrid.

Création d'une page pour rechercher les commandes par date

Dans cette procédure pas à pas, vous avez précédemment ajouté une requête personnalisée au service de domaine qui retourne les commandes dont la date d'expédition est antérieure à une date fournie par l'utilisateur. Cette procédure explique comment la fenêtre Sources de données peut servir à créer une interface utilisateur qui prend des paramètres fournis par l'utilisateur qui sont ensuite transmis à une requête du service de domaine.

Pour créer l'interface utilisateur

Dans le projet AdventureWorksApp, dans le dossier Vues, ajoutez une nouvelle page Silverlight nommée OrderSearchByShipDateBefore.xaml.
Dans l'Explorateur de solutions, double-cliquez sur MainPage.xaml.

Dans la vue XAML, ajoutez le code suivant après la ligne <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"/>

Dans l'Explorateur de solutions, double-cliquez sur OrderSearchByShipDateBefore.xaml.
Dans la fenêtre Sources de données, cliquez sur le nœud SalesOrderHeader, puis sur le menu déroulant.
Sélectionnez GetShipDateBeforeQuery pour le définir en tant que requête de cette entité.
Faites glisser le nœud SalesOrderHeader sur le concepteur.

En plus du DataGrid, une zone de texte est créée pour accepter le paramètre dans la requête et un bouton est ajouté pour exécuter la requête et charger les données.

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

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.
Exécutez l'application.
Cliquez sur le bouton Date d'expédition pour ouvrir la page contenant la requête de date d'expédition.
Dans la zone Date d'expédition, tapez une date, par exemple 1/1/2006.
Cliquez sur Charger.

Notez que seules les dates d'expédition antérieures à la date spécifiée sont retournées.
Essayez d'autres dates d'expédition.

Étapes suivantes

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

Apprendre comment modifier des enregistrements et enregistrer ces 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

Clients Silverlight