Lier des contrôles WPF à un service de données WCF

  • Article

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 qui sont encapsulés dans un service de données WCF. Vous allez aussi ajouter des boutons utilisables par les clients 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 des 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 à une application WPF.

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

  • Création de boutons permettant d'avancer et de reculer dans les enregistrements client.

  • Création d’un bouton permettant d’enregistrer les modifications apportées aux données des contrôles dans le service de données WCF et la source de données sous-jacente.

Notes

Dans cet article, il est possible que votre ordinateur affiche des noms ou des emplacements différents pour certains éléments de l’interface utilisateur Visual Studio. Vous utilisez peut-être une autre édition de Visual Studio ou d'autres paramètres d'environnement. Pour plus d’informations, consultez Personnaliser l’IDE.

Prérequis

Vous devez disposer des éléments suivants pour exécuter cette procédure pas à pas :

  • Visual Studio

  • Accès à une instance en cours d'exécution de SQL Server ou SQL Server Express à laquelle est attaché l'exemple de base de données AdventureWorksLT. Pour télécharger la base de données, consultez Exemples de bases de données AdventureWorks

La connaissance préalable des concepts suivants s'avère également utile, mais n'est pas obligatoire pour suivre cette procédure pas à pas :

Créer le projet de service

  1. Démarrez cette procédure pas à pas en créant un projet d’application Web ASP.NET Visual Basic ou C#. Nommez le projet AdventureWorksService.

  2. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur Default.aspx et sélectionnez Supprimer. Ce fichier n’est pas nécessaire pour la procédure pas à pas.

Créer un Entity Data Model pour le service

Pour exposer les données à une application en utilisant 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 : les modèles Entity Data Model, et les modèles de données personnalisés définis avec des objets CLR (Common Language Runtime) qui implémentent l’interface IQueryable<T>. Dans cette procédure pas à pas, vous allez créer un Entity Data Model comme modèle de données.

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

  2. Dans la liste Modèles installés, cliquez sur Données, puis sélectionnez l’élément de projet ADO.NET Entity Data Model.

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

    L’Assistant Entity Data Model s’ouvre.

  4. Dans la page Choisir le contenu du modèle, 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 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.

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

  6. Dans la page Choisir votre connexion de données, vérifiez 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.

  7. Dans la page Choisir vos objets de base de données, développez Tables, puis sélectionnez la table SalesOrderHeader.

  8. Cliquez sur Terminer.

Créer le service

Créez un service de données WCF pour exposer les données de l’Entity Data Model à une application WPF :

  1. Dans le menu Projet, sélectionnez Ajouter un nouvel élément.

  2. Dans la liste Modèles installés, cliquez sur Web, puis sélectionnez l’élément de projet Service de données WCF.

  3. Dans la zone Nom, entrez AdventureWorksService.svc et cliquez sur Ajouter.

    Visual Studio ajoute AdventureWorksService.svc au projet.

Configurer le service

Vous devez configurer le service pour qu’il fonctionne sur l’Entity Data Model que vous avez créé :

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

    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’elle dérive d’un DataService<T> qui s’exécute sur la classe de contexte d’objet AdventureWorksLTEntities dans votre Entity Data Model. Il met également à jour la méthode InitializeService pour accorder aux clients du service un accès complet en lecture/écriture à l'entité SalesOrderHeader.

  2. Générez le projet et vérifiez qu'aucune erreur ne se produit.

Créer 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 basée sur le service. Plus loin dans cette procédure pas à pas, vous allez ajouter à l'application des contrôles liés aux données.

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

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

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

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

    Visual Studio ajoute le projet AdventureWorksSalesEditor à la solution.

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

    La fenêtre Sources de données s’ouvre.

  6. 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.

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

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

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

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

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

    Visual Studio télécharge les informations du service et revient à l’Assistant Configuration de source de données.

  11. Dans la boîte de dialogue Ajouter une référence de service, cliquez sur Terminer.

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

Définir l’interface utilisateur

Ajoutez plusieurs boutons à la fenêtre en modifiant le code XAML dans le Concepteur WPF. Plus loin dans cette procédure pas à pas, vous allez ajouter du code permettant aux utilisateurs d'afficher et de mettre à jour les enregistrements de vente à l'aide de ces boutons.

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

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

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

  3. Créez le projet.

Créer les contrôles liés aux données

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

  1. Dans la fenêtre Sources de données, cliquez sur le menu de la liste déroulante pour le nœud SalesOrderHeaders, puis sélectionnez Détails.

  2. Développez le nœud SalesOrderHeaders.

  3. Pour cet exemple, certains champs ne vont pas s'afficher. Cliquez alors sur le menu de la liste déroulante situé à côté des nœuds suivants, puis 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, nous supposons que l’utilisateur final n’a pas besoin de voir ces données.

  4. Dans la fenêtre Sources de données, faites glisser le nœud SalesOrderHeaders dans la ligne de la grille située en dessous de la ligne contenant les boutons.

    Visual Studio génère du XAML et du code qui créent un ensemble de contrôles liés aux données de la table Product. Pour plus d’informations sur la vue XAML et le code générés, consultez Lier des contrôles WPF à des données dans Visual Studio.

  5. Dans le concepteur, cliquez sur la zone de texte à côté de l’étiquette Customer ID.

  6. Dans la fenêtre Propriétés, cochez la case en regard de la propriété IsReadOnly.

  7. Définissez la propriété IsReadOnly pour chacune des zones de texte suivantes :

    • Purchase Order Number

    • Sales Order ID

    • Sales Order Number

Charger les données à partir du service

Utilisez l’objet proxy du service pour charger les données de vente à partir du service. Attribuez ensuite les données retournées à la source de données CollectionViewSource dans la fenêtre WPF.

  1. Dans le concepteur, pour créer le Window_Loaded Gestionnaire d’événements, double-cliquez sur le texte qui lit : MainWindow.

  2. Remplacez le gestionnaire d'événements par le code suivant. Remplacez l'adresse localhost dans ce code par l'adresse de l'hôte local de votre ordinateur de développement.

    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("http://localhost:45899/AdventureWorksService.svc"));
    salesQuery = dataServiceClient.SalesOrderHeaders;

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

Ajoutez du code permettant aux utilisateurs de parcourir les enregistrements de vente à l’aide des boutons < et >.

  1. Dans le concepteur, double-cliquez sur le bouton < 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.

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

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

  3. Revenez dans le 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.

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

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

Enregistrer les modifications apportées aux enregistrements de vente

Ajoutez du code permettant aux utilisateurs d’afficher et d’enregistrer les modifications apportées aux enregistrements de vente à l’aide du bouton Enregistrer les modifications :

  1. 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.

  2. Ajoutez le code ci-après au gestionnaire d'événements saveButton_Click.

    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 clients :

  1. Dans le menu Générer, cliquez sur Générer la solution. Vérifiez que la solution se génère sans erreur.

  2. Appuyez sur Ctrl+F5.

    Visual Studio démarre le projet AdventureWorksService sans le déboguer.

  3. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet AdventureWorksSalesEditor.

  4. Dans le menu contextuel (clic droit), sous Déboguer, cliquez sur Démarrer une nouvelle instance.

    L'application s'exécute. Vérifiez les éléments suivants :

    • Les zones de texte affichent différents champs de données du premier enregistrement de vente, qui a l’ID de commande 71774.

    • Vous pouvez cliquez sur les boutons > ou < pour parcourir les autres enregistrements de vente.

  5. Dans un des enregistrements de vente, tapez du texte dans la zone Comment (Commentaire), puis cliquez sur Enregistrer les modifications.

  6. Fermez l'application, puis redémarrez-la à partir de Visual Studio.

  7. Accédez à l'enregistrement de vente que vous avez modifié et vérifiez que la modification est toujours présente après avoir fermé et réouvert l'application.

  8. Fermez l'application.

Étapes suivantes

Une fois cette procédure pas à pas terminée, vous pouvez effectuer les tâches associées suivantes :

Contenu connexe