Comment : créer un service WCF compatible AJAX et un client ASP.NET qui accède à ce service

2023-05-10

Cette rubrique montre comment utiliser Visual Studio pour créer un service Windows Communication Foundation (WCF) compatible AJAX et un client ASP.NET qui accède au service.

Créez une application web ASP.NET

Ouvrez Visual Studio.
Dans le menu Fichier, sélectionnez Nouveau>Projet.
Dans la boîte de dialogue Nouveau projet, développez la catégorieInstallé>Visual C#>Web, puis sélectionnez ASP.NET application web (.NET Framework).
Nommez le projet SandwichServices et cliquez sur OK.
Dans la boîte de dialogue Nouvelle application web ASP.NET, sélectionnez Vide, puis OK.

Ajouter une page Web Form

Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet SandwichServices, puis sélectionnez Ajouter>Nouvel élément.
Dans la boîte de dialogue Ajouter un nouvel élément, développez la catégorieInstallé>Visual C#>Web, puis sélectionnez le modèle Web Form.
Acceptez le nom par défaut (WebForm1), puis sélectionnez Ajouter.

WebForm1.aspx s’ouvre dans la vue Source.

Ajoutez le balisage suivant à l’intérieur des balises de <body> :

<input type="button" value="Price of 3 sandwiches" onclick="Calculate()"/>
<br />
<span id="additionResult"></span>

Créer un service WCF compatible AJAX

Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet SandwichServices, puis sélectionnez Ajouter>Nouvel élément.
Dans la boîte de dialogue Ajouter un nouvel élément, développez la catégorieInstallé>Visual C#>Web, puis sélectionnez le modèle Service WCF (compatible AJAX).
Nommez le service CostService, puis sélectionnez Ajouter.

CostService.svc.cs s’ouvre dans l’éditeur.
Implémentez l’opération dans le service. Ajoutez la méthode suivante à la classe CostService pour calculer le coût d’une quantité de sandwiches :
```
[OperationContract]
public double CostOfSandwiches(int quantity)
{
    return 1.25 * quantity;
}
```

Configurer le client pour accéder au service

Ouvrez le fichier WebForm1.aspx et sélectionnez le mode Création.
Dans le menu Affichage, sélectionnez Boîte à outils.
Développez le nœud Extensions AJAX et glissez-déplacez un contrôle ScriptManager sur le formulaire.
Dans la vue Source, ajoutez le code suivant entre les balises <ScriptManager> pour spécifier le chemin d’accès au service WCF :
```
<Services>
   <asp:ServiceReference Path="~/CostService.svc" />
</Services>
```
Ajoutez le code de la fonction JavaScript Calculate(). Placez le code suivant dans la section head du formulaire web :
```
<script type="text/javascript">

    function Calculate() {
        CostService.CostOfSandwiches(3, onSuccess);
    }

    function onSuccess(result) {
        var myres = $get("additionResult");
        myres.innerHTML = result;
    }

</script>
```
Ce code appelle la méthode de CostService pour calculer le prix de trois sandwiches, puis affiche le résultat dans l’étendue appelée additionResult.

Exécuter le programme

Assurez-vous que WebForm1.aspx a le focus, puis appuyez sur le bouton Démarrer pour lancer le client web. Le bouton présente un triangle vert et indique une mention du type IIS Express (Microsoft Edge). Vous pouvez également appuyer sur F5. Cliquez sur le bouton Prix de 3 sandwichs pour générer la sortie attendue de « 3,75 ».

Exemple

Voici le code complet contenu dans le fichier CostService.svc.cs :

using System.ServiceModel;
using System.ServiceModel.Activation;

namespace SandwichServices
{
    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class CostService
    {
        [OperationContract]
        public double CostOfSandwiches(int quantity)
        {
            return 1.25 * quantity;
        }
    }
}

Voici le contenu complet de la page WebForm1.aspx :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="SandwichServices.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">

        function Calculate() {
            CostService.CostOfSandwiches(3, onSuccess);
        }

        function onSuccess(result) {
            var myres = $get("additionResult");
            myres.innerHTML = result;
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/CostService.svc" />
            </Services>
        </asp:ScriptManager>

        <input type="button" value="Price of 3 sandwiches" onclick="Calculate()" />
        <br />
        <span id="additionResult"></span>
    </form>
</body>
</html>

Partager via