Dela via

AJAX-tjänst med hjälp av exempel på komplexa typer

  • Artikel

Exemplet ComplexTypeAjaxService visar hur du använder Windows Communication Foundation (WCF) för att skapa en ASP.NET Asynkron JavaScript- och XML-tjänst (AJAX) som skapar instanser av komplexa typer och skickar dem mellan tjänsten och klienten som JavaScript Object Notation (JSON). Du kan komma åt en AJAX-tjänst med hjälp av JavaScript-kod från en webbläsarklient. Det här exemplet bygger på basic AJAX-tjänstexemplet .

AJAX-stöd i WCF är optimerat för användning med ASP.NET AJAX via ScriptManager kontrollen. Ett exempel på hur du använder WCF med ASP.NET AJAX finns i AJAX-exempel.

Kommentar

Installationsproceduren och bygginstruktionerna för det här exemplet finns i slutet av det här avsnittet.

Tjänsten i följande exempel är en WCF-tjänst utan AJAX-specifik kod. WebGetAttribute Eftersom attributet inte tillämpas används standard-HTTP-verbet ("POST"). Tjänsten har en åtgärd, DoMath, som returnerar en komplex typ med namnet MathResult. Den komplexa typen är en standardtyp för datakontrakt som inte heller innehåller någon AJAX-specifik kod.

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

Skapa en AJAX-slutpunkt för tjänsten med hjälp WebScriptServiceHostFactoryav , precis som i basic AJAX-tjänstexemplet.

Klientwebbsidan ComplexTypeClientPage.aspx innehåller ASP.NET och JavaScript-kod för att anropa tjänsten när användaren klickar på knappen Utför beräkning på sidan. Koden som anropar tjänsten konstruerar en JSON-brödtext och skickar den med HTTP POST, ungefär som AJAX-tjänsten med hjälp av HTTP POST-exemplet .

När tjänstanropet har slutförts kan du komma åt enskilda datamedlemmar (sum, productdifferenceoch quotient) på det resulterande JavaScript-objektet.

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

Så här konfigurerar du, skapar och kör exemplet

  1. Kontrollera att du har utfört engångsinstallationsproceduren för Windows Communication Foundation-exempel.

  2. Skapa lösningen ComplexTypeAjaxService.sln enligt beskrivningen i Skapa Windows Communication Foundation-exempel.

  3. Gå till http://localhost/ServiceModelSamples/ComplexTypeClientPage.aspx (öppna inte ComplexTypeClientPage.aspx i webbläsaren från projektkatalogen).

Se även