Vorgehensweise: Erstellen eines AJAX-aktivierten WCF-Diensts und eines ASP.NET-Clients, der auf den Dienst zugreift

2023-06-02

In diesem Thema wird gezeigt, wie Sie mithilfe von Visual Studio einen AJAX-fähigen Windows Communication Foundation (WCF)-Dienst und einen ASP.NET-Client erstellen, der auf den Dienst zugreift.

Erstellen einer ASP.NET-Web-App

Öffnen Sie Visual Studio.
Wählen Sie im Menü Datei nacheinander Neu>Projekt aus.
Erweitern Sie im Dialogfeld Neues Projekt die Kategorie Installiert>Visual C#>Web, und wählen Sie ASP.NET-Webanwendung (.NET Framework) aus.
Nennen Sie das Projekt SandwichServices, und klicken Sie auf OK.
Wählen Sie im Dialogfeld Neue ASP.NET-Webanwendung die Option Leer und dann OK aus.

Hinzufügen eines Webformulars

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt „SandwichServices“, und wählen Sie Hinzufügen>Neues Element aus.
Erweitern Sie im Dialogfeld Neues Element hinzufügen die Kategorie Installiert>Visual C#>Web, und wählen Sie die Vorlage Webformular aus.
Übernehmen Sie den Standardnamen (WebForm1), und wählen Sie Hinzufügen aus.

WebForm1.aspx wird in der Ansicht Quelle geöffnet.

Fügen Sie das folgende Markup innerhalb der <body>-Tags hinzu:

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

Erstellen eines AJAX-fähigen WCF-Diensts

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt „SandwichServices“, und wählen Sie Hinzufügen>Neues Element aus.
Erweitern Sie im Dialogfeld Neues Element hinzufügen die Kategorie Installiert>Visual C#>Web, und wählen Sie die Vorlage WCF-Dienst (AJAX-fähig) aus.
Nennen Sie den Dienst CostService, und wählen Sie Hinzufügen aus.

CostService.svc.cs wird im Editor geöffnet.
Implementieren Sie den Vorgang im Dienst. Fügen Sie der Klasse „CostService“ die folgende Methode zum Berechnen der Kosten für eine Menge von Sandwiches hinzu:
```
[OperationContract]
public double CostOfSandwiches(int quantity)
{
    return 1.25 * quantity;
}
```

Konfigurieren des Clients zum Zugriff auf den Dienst

Öffnen Sie die Datei WebForm1.aspx, und wählen Sie die Ansicht Entwurf aus.
Wählen Sie im Menü Ansicht die Option Toolbox aus.
Erweitern Sie den Knoten AJAX-Erweiterungen, und verschieben Sie einen ScriptManager per Drag & Drop auf das Formular.
Fügen Sie in der Ansicht Quelle den folgenden Code zwischen den <ScriptManager>-Tags hinzu, um den Pfad zum WCF-Dienst anzugeben:
```
<Services>
   <asp:ServiceReference Path="~/CostService.svc" />
</Services>
```
Fügen Sie den Code für die JavaScript-Funktion Calculate() hinzu. Fügen Sie den folgenden Code im Abschnitt head des Webformulars ein:
```
<script type="text/javascript">

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

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

</script>
```
Dieser Code ruft die Methode „CostService“ auf, um den Preis für drei Sandwiches zu berechnen, und zeigt dann das Ergebnis im Bereich additionResult an.

Ausführen des Programms

Stellen Sie sicher, dass WebForm1.aspx den Fokus hat, und drücken Sie dann die Schaltfläche Start zum Starten des Webclients. Die Schaltfläche ist durch ein grünes Dreieck gekennzeichnet und lautet etwa IIS Express (Microsoft Edge). Alternativ können Sie F5 drücken. Klicken Sie auf die Schaltfläche Price of 3 sandwiches (Preis für 3 Sandwiches), um die erwartete Ausgabe „3,75“ zu generieren.

Beispiel

Im Folgenden wird der vollständige Code in der Datei CostService.svc.cs gezeigt:

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

Im Folgenden wird der vollständige Inhalt der Seite WebForm1.aspx gezeigt:

<%@ 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>

Freigeben über