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

Article
08/10/2011

Dans cette procédure pas à pas, vous allez créer une application WPF qui contient des contrôles liés aux données. Les contrôles sont liés aux enregistrements client encapsulés dans un Service de données WCF. Vous ajouterez également des boutons que les clients peuvent utiliser pour afficher et mettre à jour des enregistrements.

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 Entity Data Model dans une application WPF.
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 WPF.
Création de boutons permettant de naviguer vers l'avant et vers l'arrière dans les enregistrements de client
Création d'un bouton qui enregistre les modifications des données dans les contrôles dans le Service de données WCF et la source de données sous-jacente.

Notes

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

Composants requis

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

Visual Studio 2010.
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 attaché 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.
Modèles de données dans Services de données WCF. Pour plus d'informations, consultez Data Model.
Entity Data Models et ADO.NET Entity Framework. Pour plus d'informations, consultez Entity Data Model et Introducing the Entity Framework.
Utilisation du Concepteur WPF. Pour plus d'informations, consultez Vue d'ensemble des concepteurs WPF et Silverlight.
Liaison de données WPF. Pour plus d'informations, consultez Vue d'ensemble de la liaison de données.

Création du projet de service

Démarrez cette procédure pas-à-pas en créant un projet pour un Service de données WCF.

Pour créer le projet de service

Démarrez Visual Studio.
Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur Projet.
Développez Visual C# ou Visual Basic, puis sélectionnez Web.
Sélectionnez le modèle de projet Application Web ASP.NET.
Dans la zone Nom, tapez AdventureWorksService, puis cliquez sur OK.

Visual Studio crée le projet AdventureWorksService.
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur Default.aspx, puis sélectionnez Supprimer. Ce fichier est inutile pour cette procédure pas à pas.

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. Le Service de données WCF prend en charge deux types de modèles de données : Entity Data Models et modèles de données personnalisés définis à l'aide des objets CLR (Common Language Runtime) qui implémentent l'interface IQueryable<T>. Dans cette procédure pas à pas, vous créez un Entity Data Model pour le modèle de données.

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

Dans le menu Projet, cliquez sur Ajouter un nouvel élément.
Sélectionnez l'élément de projet Entity Data Model ADO.NET.
Renommez-le en AdventureWorksModel.edmx et cliquez sur Ajouter.

L'Assistant Entity Data Model s'ouvre.
Dans la page Choisir le contenu du Model, cliquez sur Générer à partir de la base de données, puis sur Suivant.
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.
Dans la page Choisir votre connexion de données, assurez-vous que l'option Enregistrer les paramètres de connexion de l'entité dans App.Config en tant que est sélectionnée, puis cliquez sur Suivant.
Dans la page Choisir vos objets de base de données, développez le nœud Tables, puis sélectionnez la table SalesOrderHeader.
Cliquez sur Terminer.

Création du service

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

Pour créer le service

Dans le menu Projet, cliquez sur Ajouter un nouvel élément.
Sélectionnez l'élément de projet Service de données WCF.
Dans la zone Nom, tapez AdventureWorksService.svc, puis cliquez sur Ajouter.

Visual Studio ajoute le fichier AdventureWorksService.svc au projet.

Configuration du service

Vous devez configurer le service pour utiliser l'Entity Data Model que vous avez créé.

Pour configurer le service

Dans le fichier de code AdventureWorks.svc, remplacez la déclaration de classe AdventureWorksService par le code suivant.

Public Class AdventureWorksService
    Inherits DataService(Of AdventureWorksLTEntities)

    ' This method is called only once to initialize service-wide policies.
    Public Shared Sub InitializeService(ByVal config As IDataServiceConfiguration)
        config.SetEntitySetAccessRule("SalesOrderHeaders", EntitySetRights.All)
        config.UseVerboseErrors = True
    End Sub
End Class

public class AdventureWorksService : DataService<AdventureWorksLTEntities>
{
    // This method is called only once to initialize service-wide policies.
    public static void InitializeService(IDataServiceConfiguration config)
    {
        config.SetEntitySetAccessRule("SalesOrderHeaders", EntitySetRights.All);
    }
}

Ce code met à jour la classe AdventureWorksService afin qu'il dérive d'un DataService<T> qui est utilisé sur la classe de contexte de l'objet AdventureWorksLTEntities dans votre Entity Data Model. Il met également à jour la méthode InitializeService pour autoriser l'accès complet en lecture/écriture à l'entité SalesOrderHeader aux clients du service.

Pour plus d'informations sur les classes de contexte d'objet dans ADO.NET Entity Framework, consultez Object Services Overview (Entity Framework).

Générez le projet et vérifiez que la génération du projet s'exécute correctement.

Création de l'application cliente WPF

Pour afficher les données du Service de données WCF, créez une application WPF avec une source de données base sur le service. À une étape ultérieure de cette procédure, vous ajouterez des contrôles liés aux données à l'application.

Pour créer l'application cliente WPF

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

Notes

Dans les projets Visual Basic, le nœud de solution s'affiche seulement dans l'Explorateur de solutions si la case à cocher Toujours afficher la solution est activée dans la Général, Projets et solutions, boîte de dialogue Options.
Dans la boîte de dialogue Nouveau projet, développez Visual C# ou Visual Basic, puis sélectionnez Windows.
Sélectionnez le modèle de projet Application WPF.
Dans la zone Nom, tapez AdventureWorksSalesEditor, puis cliquez sur OK.

Visual Studio ajoute le projet AdventureWorksSalesEditor à la solution.
Dans le menu Données, cliquez sur Afficher les sources de données.

La fenêtre Sources de données s'ouvre.
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.
Dans la page Choisir un type de source de données de l'Assistant, sélectionnez Service, puis cliquez sur Suivant.
Dans la boîte de dialogue Ajouter une référence de service, cliquez sur Découvrir.

Visual Studio recherche la solution actuelle des services disponibles et ajoute AdventureWorksService.svc à la liste des services disponibles dans la zone Services.
Dans la zone Espace de noms, tapez AdventureWorksService.
Dans la zone Services, cliquez sur AdventureWorksService.svc puis sur OK.

Visual Studio télécharge les informations de service puis retourne à l'Assistant Configuration de source de données.
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 plusieurs boutons à la fenêtre en modifiant le code XAML dans le Concepteur WPF. À une étape ultérieure de cette procédure, vous ajouterez du code qui permet aux utilisateurs d'afficher et de mettre à jour des enregistrements des ventes à l'aide de ces boutons.

Pour créer la disposition de fenêtre

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

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

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">&lt;</Button>
<Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75">&gt;</Button>
<Button HorizontalAlignment="Right" Margin="0,21,46,24" Name="saveButton" Width="110">Save changes</Button>

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 SalesOrderHeaders de la fenêtre Sources de données vers le concepteur.

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

Dans la fenêtre Sources de données, cliquez sur le menu déroulant du nœud SalesOrderHeaders et sélectionnez Détails.
Développez le nœud SalesOrderHeaders.
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 :
- CreditCardApprovalCode
- ModifiedDate
- OnlineOrderFlag
- RevisionNumber
- rowguid
Cette action empêche Visual Studio de créer des contrôles liés aux données pour ces nœuds à l'étape suivante. Pour cette procédure pas à pas, on suppose que l'utilisateur final n'a pas besoin de voir ces données.
Dans la fenêtre Sources de données, faites glisser le nœud SalesOrderHeaders vers la ligne de grille située sous la ligne contenant les boutons.

Visual Studio génère du code XAML ainsi qu'un autre code qui définit un jeu de contrôles liés aux données de la table Product. Pour plus d'informations sur le langage XAML et le code généré, consultez Liaison de contrôles WPF avec des données dans Visual Studio.
Dans le concepteur, cliquez sur la zone de texte en regard de l'étiquette ID du client.
Dans la fenêtre Propriétés, activez la case à cocher en regard de la propriété IsReadOnly.
Définissez la propriété IsReadOnly pour chacune des zones de texte suivantes :
- Numéro de bon de commande
- Réf. commande client
- Numéro de commande client

Charger les données à partir du service

Utilisez l'objet proxy de service pour charger les données des ventes à partir du service, puis assignez les données retournées à la source de données pour la CollectionViewSource dans la fenêtre WPF.

Pour charger les données à partir du service

Dans le concepteur, doublez-cliquez sur le texte MainWindow pour créer le gestionnaire d'événements Window_Loaded.

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 DataServiceClient As AdventureWorksService.AdventureWorksLTEntities
Private SalesQuery As System.Data.Services.Client.DataServiceQuery(Of AdventureWorksService.SalesOrderHeader)
Private OrdersViewSource As CollectionViewSource

Private Sub Window_Loaded(ByVal Sender As Object, ByVal e As RoutedEventArgs) Handles MyBase.Loaded

    ' TODO: Modify the port number in the following URI as required.
    DataServiceClient = New AdventureWorksService.AdventureWorksLTEntities( _
    New Uri("https://localhost:32415/AdventureWorksService.svc"))
    SalesQuery = DataServiceClient.SalesOrderHeaders

    OrdersViewSource = CType(Me.FindResource("SalesOrderHeadersViewSource"), CollectionViewSource)
    OrdersViewSource.Source = SalesQuery.Execute()
    OrdersViewSource.View.MoveCurrentToFirst()
End Sub

private AdventureWorksService.AdventureWorksLTEntities dataServiceClient;
private System.Data.Services.Client.DataServiceQuery<AdventureWorksService.SalesOrderHeader> salesQuery;
private CollectionViewSource ordersViewSource;

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    // TODO: Modify the port number in the following URI as required.
    dataServiceClient = new AdventureWorksService.AdventureWorksLTEntities(
        new Uri("https://localhost:45899/AdventureWorksService.svc"));
    salesQuery = dataServiceClient.SalesOrderHeaders;

    ordersViewSource = ((CollectionViewSource)(this.FindResource("salesOrderHeadersViewSource")));
    ordersViewSource.Source = salesQuery.Execute();
    ordersViewSource.View.MoveCurrentToFirst();
}

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

Pour permettre aux utilisateurs de naviguer dans les enregistrements des ventes

Dans le concepteur, double-cliquez sur le bouton < dans la surface de la fenêtre.

Visual Studio ouvre le fichier code-behind et crée un gestionnaire d'événements backButton_Click pour l'événement Click.

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

If OrdersViewSource.View.CurrentPosition > 0 Then
    OrdersViewSource.View.MoveCurrentToPrevious()
End If

if (ordersViewSource.View.CurrentPosition > 0)
    ordersViewSource.View.MoveCurrentToPrevious();

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 pour l'événement Click.

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

If OrdersViewSource.View.CurrentPosition < CType(OrdersViewSource.View, CollectionView).Count - 1 Then
    OrdersViewSource.View.MoveCurrentToNext()
End If

if (ordersViewSource.View.CurrentPosition < ((CollectionView)ordersViewSource.View).Count - 1)
{
    ordersViewSource.View.MoveCurrentToNext();
}

Enregistrement des modifications apportées aux enregistrements des ventes

Ajoutez du code qui permet aux utilisateurs d'afficher et d'enregistrer des modifications apportées aux enregistrements des ventes à l'aide du bouton Enregistrer les modifications.

Pour ajouter la possibilité d'enregistrer des modifications apportées aux enregistrements des ventes

Dans le concepteur, double-cliquez sur le bouton Enregistrer les modifications.

Visual Studio ouvre le fichier code-behind et crée un gestionnaire d'événements saveButton_Click pour l'événement Click.

Ajoutez le code suivant au gestionnaire d'événements saveButton_Click.

Dim CurrentOrder As AdventureWorksService.SalesOrderHeader = CType(OrdersViewSource.View.CurrentItem, AdventureWorksService.SalesOrderHeader)

DataServiceClient.UpdateObject(CurrentOrder)
DataServiceClient.SaveChanges()

AdventureWorksService.SalesOrderHeader currentOrder = (AdventureWorksService.SalesOrderHeader)ordersViewSource.View.CurrentItem;
dataServiceClient.UpdateObject(currentOrder);
dataServiceClient.SaveChanges();

Test de l'application

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

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.
Appuyez sur CTRL+F5.

Visual Studio démarre le projet AdventureWorksService sans le déboguer.
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le projet AdventureWorksSalesEditor.
Dans le menu contextuel, sous Déboguer, cliquez sur Démarrer une nouvelle instance.

L'application s'exécute. Vérifiez les points suivants :
- Les zones de texte affichent différents champs de données du premier enregistrement des ventes dont la référence de commande est 71774.
- Vous pouvez cliquer sur les boutons > ou < pour naviguer dans les autres enregistrements des ventes.
Dans l'un des enregistrements des ventes, tapez du texte dans la zone Commentaire, puis cliquez sur Enregistrer les modifications.
Fermez l'application, puis redémarrez-la à partir de Visual Studio.
Naviguez jusqu'à l'enregistrement des ventes que vous avez modifié et vérifiez que la modification a été conservée après la fermeture et la réouverture de l'application.
Fermez l'application.

Étapes suivantes

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

Apprenez comment utiliser la fenêtre Sources de données dans Visual Studio pour lier des contrôles WPF à d'autres types de sources de données. Pour plus d'informations, consultez Procédure pas à pas : liaison de contrôles WPF avec un modèle Entity Data Model et Procédure pas à pas : liaison de contrôles WPF avec un groupe de données.
Apprenez comment utiliser la fenêtre Sources de données dans Visual Studio pour afficher les données associées (c'est-à-dire les données dans une relation parent-enfant) dans des contrôles WPF. Pour plus d'informations, consultez Procédure pas à pas : affichage de données connexes dans une application WPF.

Voir aussi

Partager via