Vorgehensweise: Erstellen eines AJAX-aktivierten WCF-Diensts und eines ASP.NET-Clients, der auf den Dienst zugreiftHow to: Create an AJAX-Enabled WCF Service and an ASP.NET Client that Accesses the Service

In diesem Thema wird gezeigt, wie mit Visual Studio 2008 erstellt ein AJAX-aktivierten Windows Communication Foundation (WCF)-Dienst und einem ASP.NET-Client, die auf den Dienst zugreift.This topic shows how to use Visual Studio 2008 to create an AJAX-enabled Windows Communication Foundation (WCF) service and an ASP.NET client that accesses the service. Der Code für den Dienst und für den Client wird im Abschnitt mit dem Beispiel nach den Schritten bereitgestellt, in denen die Erstellung des Diensts und des Clients beschrieben ist.The code for the service and for the client are provided in the Example section after the steps for creating them are described in the Procedures section.

So erstellen Sie die ASP.NET-ClientanwendungTo create the ASP.NET client application

  1. Öffnen Sie Visual Studio 2012Visual Studio 2012.Open Visual Studio 2012Visual Studio 2012.

  2. Aus der Datei klicken Sie im Menü neu, klicken Sie dann Projekt, klicken Sie dann Web, und wählen Sie dann ASP.NET-Webanwendung.From the File menu, select New, then Project, then Web, and then select ASP.NET Web Application.

  3. Nennen Sie das Projekt SandwichServices , und klicken Sie auf OK.Name the Project SandwichServices and click OK.

So erstellen Sie den AJAX-aktivierten WCF-DienstTo create the WCF AJAX-enabled service

  1. Mit der rechten Maustaste die SandwichServices -Projekt in der Projektmappen-Explorer und wählen Sie hinzufügen, klicken Sie dann neues Element, und klicken Sie dann AJAX-aktivierter WCF-Dienst .Right-click the SandwichServices project in the Solution Explorer window and select Add, then New Item, and then AJAX-enabled WCF Service.

  2. Benennen Sie den Dienst CostService in der Namen Feld, und klicken Sie auf hinzufügen.Name the service CostService in the Name box and click Add.

  3. Öffnen Sie die Datei CostService.svc.cs.Open the CostService.svc.cs file.

  4. Geben Sie die Namespace für ServiceContractAttribute als SandwichService:Specify the Namespace for ServiceContractAttribute as SandwichService:

    namespace SandwichServices  
    {  
      [ServiceContract(Namespace = "SandwichServices")]  
      [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]  
       public class CostService  
       {  
         …  
       }  
     }  
    
  5. Implementieren Sie die Vorgänge im Dienst.Implement the operations in the service. Fügen Sie allen Vorgängen das OperationContractAttribute hinzu, um anzugeben, dass sie ein Teil des Vertrags sind.Add the OperationContractAttribute to each of the operations to indicate that they are part of the contract. Im folgenden Beispiel wird eine Methode implementiert, die die Kosten für eine bestimmte Menge Sandwiches zurückgibt.The following example implements a method that returns the cost of a given quantity of sandwiches.

    public class CostService  
    {  
        [OperationContract]  
        public double CostOfSandwiches(int quantity)  
        {  
            return 1.25 * quantity;  
        }  
    
    // Add more operations here and mark them with [OperationContract]  
    }  
    

So konfigurieren Sie den Client für den Zugriff auf den DienstTo configure the client to access the service

  1. Öffnen Sie die Seite "default.aspx", und wählen Sie die Entwurf anzeigen.Open the Default.aspx page and select the Design view.

  2. Aus der Ansicht klicken Sie im Menü Toolbox.From the View menu, select Toolbox.

  3. Erweitern Sie die AJAX-Erweiterungen Knoten und Drag & Drop eine ScriptManager auf die Seite Default.aspx.Expand the AJAX Extensions node and drag and drop a ScriptManager on to the Default.aspx page.

  4. Mit der rechten Maustaste die ScriptManager , und wählen Sie Eigenschaften.Right-click the ScriptManager and select Properties.

  5. Erweitern Sie die Services Sammlung in der Eigenschaften Fenster zu öffnen die ServiceReference-Auflistungs-Editor Fenster.Expand the Services collection in the Properties window to open up the ServiceReference Collection Editor window.

  6. Klicken Sie auf hinzufügen, geben Sie CostService.svc als die Pfad auf die verwiesen wird, und klicken Sie auf OK.Click Add, specify CostService.svc as the Path referenced, and click OK.

  7. Erweitern Sie die HTML Knoten in der Toolbox und ziehen Sie ein Eingabe (Schaltfläche) auf die Seite Default.aspx.Expand the HTML node in the Toolbox and drag and drop an Input (Button) on to the Default.aspx page.

  8. Mit der rechten Maustaste die Schaltfläche , und wählen Sie Eigenschaften.Right-click the Button and select Properties.

  9. Ändern der Wert Feld Price for 3 Sandwiches.Change the Value field to Price for 3 Sandwiches.

  10. Doppelklicken Sie auf die Schaltfläche zum Zugriff auf die JavaScript-Code.Double-click the Button to access the JavaScript code.

  11. Übergeben Sie den folgenden JavaScript-Code in der <script> Element.Pass in the following JavaScript code within the <script> element.

    function Button1_onclick() {  
    var service = new SandwichServices.CostService();  
    service.CostOfSandwiches(3, onSuccess, null, null);  
    }  
    
    function onSuccess(result){  
    alert(result);  
    }  
    

So greifen Sie über den Client auf den Dienst zuTo access the service from the client

  1. Verwenden Sie STRG + F5, um den Dienst und den Webclient zu starten.Use Ctrl +F5 to launch the service and the Web client. Klicken Sie auf die Price for 3 Grilled Sandwiches Schaltfläche, um die erwartete Ausgabe "3,75" zu generieren.Click the Price for 3 Grilled Sandwiches button to generate the expected output of "3.75".

BeispielExample

Dieses Beispiel enthält den Dienstcode der Datei WCFService.svc.cs und den Clientcode der Datei Default.aspx.This example contains the service code contained in the WCFService.svc.cs file and the client code contained in the Default.aspx file.

//The service code contained in the CostService.svc.cs file.  

using System;  
using System.Linq;  
using System.Runtime.Serialization;  
using System.ServiceModel;  
using System.ServiceModel.Activation;  
using System.ServiceModel.Web;  

namespace SandwichServices  
{  
    [ServiceContract(Namespace="SandwichServices")]  
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]  
    public class CostService  
    {  
        // Add [WebGet] attribute to use HTTP GET  
        [OperationContract]  
        public double CostOfSandwiches(int quantity)  
        {  
            return 1.25 * quantity;  
        }  

        // Add more operations here and mark them with [OperationContract]  
    }  
}  
//The code for hosting the service is contained in the CostService.svc file.  

<%@ ServiceHost Language="C#" Debug="true" Service="SandwichServices.CostService" CodeBehind="CostService.svc.cs" %>  

//The client code contained in the Default.aspx file.  

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html >  
<head runat="server">  
    <title>Untitled Page</title>  
<script language="javascript" type="text/javascript">  
// <!CDATA[  

function Button1_onclick() {  
var service = new SandwichServices.CostService();  
service.CostOfSandwiches(3, onSuccess, null, null);  
}  

function onSuccess(result){  
alert(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>  
    </form>  
    <p>  
        <input id="Button1" type="button" value="Price for 3 Sandwiches" onclick="return Button1_onclick()" /></p>  
</body>  
</html>