Instrukcje: Tworzenie usługi WCF z włączoną obsługą technologii AJAX i klienta ASP.NET korzystającego z tej usługi

W tym temacie pokazano, jak za pomocą programu Visual Studio utworzyć usługę Windows Communication Foundation (WCF) z obsługą technologii AJAX oraz klienta ASP.NET, który uzyskuje dostęp do usługi.

tworzenie aplikacji internetowej platformy ASP.NET

1. Otwórz program Visual Studio.

2. W menu Plik wybierz pozycję Nowy>projekt

3. W oknie dialogowym Nowy projekt rozwiń kategorię Zainstalowano program>Visual C#>Web, a następnie wybierz pozycję ASP.NET Aplikacja internetowa (.NET Framework).

4. Nadaj projektowi nazwę SandwichServices i kliknij przycisk OK.

5. W oknie dialogowym Nowa aplikacja internetowa ASP.NET wybierz pozycję Puste, a następnie wybierz przycisk OK.

   

Dodawanie formularza internetowego

1. Kliknij prawym przyciskiem myszy projekt SandwichServices w Eksplorator rozwiązań i wybierz polecenie Dodaj>nowy element.

2. W oknie dialogowym Dodawanie nowego elementu rozwiń kategorię Zainstalowane środowisko>Visual C#>Web, a następnie wybierz szablon Formularz sieci Web.

3. Zaakceptuj nazwę domyślną (WebForm1), a następnie wybierz pozycję Dodaj.

   WebForm1.aspx zostanie otwarty w widoku źródłowym.

4. Dodaj następujący znacznik wewnątrz tagów <treści> :

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

Tworzenie usługi WCF z obsługą technologii AJAX

1. Kliknij prawym przyciskiem myszy projekt SandwichServices w Eksplorator rozwiązań i wybierz polecenie Dodaj>nowy element.

2. W oknie dialogowym Dodawanie nowego elementu rozwiń kategorię Zainstalowane środowisko>Visual C#>Web, a następnie wybierz szablon Usługa WCF (z obsługą technologii AJAX).

   

3. Nadaj usłudze nazwę CostService , a następnie wybierz pozycję Dodaj.

   CostService.svc.cs zostanie otwarty w edytorze.

4. Zaimplementuj operację w usłudze. Dodaj następującą metodę do klasy CostService, aby obliczyć koszt ilości kanapek:

   [OperationContract]
   public double CostOfSandwiches(int quantity)
   {
       return 1.25 * quantity;
   }
   

Konfigurowanie klienta w celu uzyskania dostępu do usługi

1. Otwórz plik WebForm1.aspx i wybierz widok Projekt.

2. Z menu Widok wybierz pozycję Przybornik.

3. Rozwiń węzeł Rozszerzenia AJAX i przeciągnij i upuść element ScriptManager w formularzu.

4. W widoku Źródło dodaj następujący kod między tagami <ScriptManager>, aby określić ścieżkę do usługi WCF:

   <Services>
      <asp:ServiceReference Path="~/CostService.svc" />
   </Services>
   

5. Dodaj kod dla funkcji Calculate()JavaScript . Umieść następujący kod w sekcji head formularza internetowego:

   <script type="text/javascript">
   
       function Calculate() {
           CostService.CostOfSandwiches(3, onSuccess);
       }
   
       function onSuccess(result) {
           var myres = $get("additionResult");
           myres.innerHTML = result;
       }
   
   </script>
   

   Ten kod wywołuje metodę CostService, aby obliczyć cenę trzech kanapek, a następnie wyświetla wynik w zakresie o nazwie additionResult.

Uruchamianie programu

Upewnij się, że WebForm1.aspx ma fokus, a następnie naciśnij przycisk Start , aby uruchomić klienta internetowego. Przycisk ma zielony trójkąt i mówi coś takiego jak IIS Express (Microsoft Edge). Możesz też nacisnąć klawisz F5. Kliknij przycisk Cena 3 kanapek, aby wygenerować oczekiwane dane wyjściowe "3,75".

Przykład

Poniżej znajduje się pełny kod w pliku 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;
        }
    }
}

Poniżej znajduje się pełna zawartość strony 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>