Beispiel für AJAX-Dienst mit komplexen Typen

  • Artikel

Das ComplexTypeAjaxService-Beispiel veranschaulicht, wie mit Windows Communication Foundation (WCF) ein AJAX-Dienst (ASP.NET Asynchronous JavaScript and XML) erstellt werden kann, der Instanzen komplexer Typen erstellt und zwischen dem Dienst und Client im JSON-Format (JavaScript Object Notation) sendet. Sie können auf einen AJAX-Dienst zugreifen, indem Sie JavaScript-Code in einem Webbrowserclient verwenden. Dieses Beispiel baut auf dem Beispiel für einen einfachen AJAX-Dienst auf.

Die AJAX-Unterstützung in WCF ist für die Verwendung mit ASP.NET AJAX über das ScriptManager-Steuerelement optimiert. Ein Beispiel für die Verwendung von WCF mit ASP.NET AJAX finden Sie in den AJAX-Beispielen.

Hinweis

Die Setupprozedur und die Buildanweisungen für dieses Beispiel befinden sich am Ende dieses Themas.

Der Dienst im folgenden Beispiel ist ein WCF-Dienst ohne AJAX-spezifischen Code. Da kein WebGetAttribute-Attribut angewendet wird, wird das standardmäßige HTTP-Verb ("POST") verwendet. Der Dienst hat einen Vorgang, DoMath, der einen komplexen Typ namens MathResult zurückgibt. Der komplexe Typ ist ein Standarddatenvertragstyp, der ebenfalls keinen AJAX-spezifischen Code enthält.

[DataContract]
public class MathResult
{
    [DataMember]
    public double sum;
    [DataMember]
    public double difference;
    [DataMember]
    public double product;
    [DataMember]
    public double quotient;
}

Erstellen Sie im Dienst mithilfe von WebScriptServiceHostFactory einen AJAX-Endpunkt wie im Beispiel "Einfacher AJAX-Dienst".

Die Clientwebseite „ComplexTypeClientPage.aspx“ enthält ASP.NET-Code und JavaScript-Code zum Aufrufen des Diensts, wenn der Benutzer auf der Seite auf die Schaltfläche Berechnung durchführen klickt. In dem zum Aufrufen des Diensts verwendeten Code wird JSON-Text erstellt und mit HTTP-POST gesendet, ähnlich wie im Beispiel AJAX-Dienst mit HTTP POST.

Wenn der Dienstaufruf erfolgreich war, können Sie im resultierenden JaveScript-Objekt auf die einzelnen Datenmember (sum, difference, product und quotient) zugreifen.

function onSuccess(mathResult){
     document.getElementById("sum").value = mathResult.sum;
     document.getElementById("difference").value = mathResult.difference;
     document.getElementById("product").value = mathResult.product;
     document.getElementById("quotient").value = mathResult.quotient;
}

So können Sie das Beispiel einrichten, erstellen und ausführen

  1. Stellen Sie sicher, dass Sie die Beispiele zum einmaligen Setupverfahren für Windows Communication Foundation ausgeführt haben.

  2. Erstellen Sie die Projektmappe „ComplexTypeAjaxService.sln“, wie unter Erstellen der Windows Communication Foundation-Beispiele beschrieben.

  3. Navigieren Sie zu http://localhost/ServiceModelSamples/ComplexTypeClientPage.aspx (öffnen Sie „ComplexTypeClientPage.aspx“ nicht aus dem Projektverzeichnis im Browser).

Weitere Informationen