Cómo crear un servicio WFC con AJAX habilitado y un cliente ASP.NET que tiene acceso al servicio

Artículo
05/10/2023

En este tema, se muestra cómo usar Visual Studio para crear un servicio de Windows Communication Foundation (WCF) habilitado para AJAX y un cliente de ASP.NET que accede al servicio.

Creación de una aplicación web de ASP.NET

Abra Visual Studio.
En el menú Archivo, seleccione Nuevo>Proyecto.
En el cuadro de diálogo Nuevo proyecto, expanda la categoría Instalado>Visual C#>Web y, a continuación, seleccione Aplicación web de ASP.NET (.NET Framework).
Asigne al proyecto el nombre SandwichServices y haga clic en Aceptar.
En el cuadro de diálogo Nueva aplicación web de ASP.NET, seleccione Vacía y, a continuación, seleccione Aceptar.

Adición de un formulario web

Haga clic con el botón derecho en el proyecto SandwichServices en el Explorador de soluciones y seleccione Agregar>Nuevo elemento.
En el cuadro de diálogo Agregar nuevo elemento, expanda la categoría Instalado>Visual C#>Web y, a continuación, seleccione la plantilla Formulario web.
Acepte el nombre predeterminado (WebForm1) y seleccione Agregar.

WebForm1.aspx se abre en la vista Origen.

Agregue el marcado siguiente dentro de las etiquetas <body>:

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

Creación de un servicio WCF habilitado para AJAX

Haga clic con el botón derecho en el proyecto SandwichServices en el Explorador de soluciones y seleccione Agregar>Nuevo elemento.
En el cuadro de diálogo Agregar nuevo elemento, expanda la categoría Instalado>Visual C#>Web y, a continuación, seleccione la plantilla Servicio WCF (habilitado para AJAX).
Asigne al servicio el nombre CostService y, a continuación, seleccione Agregar.

CostService.svc.cs se abre en el editor.
Implemente la operación en el servicio. Agregue el siguiente método a la clase CostService para calcular el costo de una cantidad de sándwiches:
```
[OperationContract]
public double CostOfSandwiches(int quantity)
{
    return 1.25 * quantity;
}
```

Configuración del cliente para acceder al servicio

Abra el archivo WebForm1.aspx y seleccione la vista Diseño.
En el menú Ver, seleccione Cuadro de herramientas.
Expanda el nodo Extensiones de AJAX y arrastre y coloque un elemento ScriptManager en el formulario.
De nuevo en la vista Origen, agregue el código siguiente entre las etiquetas <ScriptManager> para especificar la ruta de acceso al servicio WCF:
```
<Services>
   <asp:ServiceReference Path="~/CostService.svc" />
</Services>
```
Agregue el código para la función Calculate() de JavaScript. Coloque el código siguiente en la sección head del formulario web:
```
<script type="text/javascript">

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

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

</script>
```
Este código llama al método de CostService para calcular el precio de tres sándwiches y, a continuación, muestra el resultado en el intervalo llamado additionResult.

Ejecución del programa

Asegúrese de que WebForm1.aspx tenga el foco y, a continuación, pulse el botón Iniciar para iniciar el cliente web. El botón tiene un triángulo verde e indica algo como IIS Express (Microsoft Edge). También puede presionar F5. Haga clic en el botón Precio de 3 sándwiches para generar el resultado esperado de "3,75".

Ejemplo

A continuación, se muestra el código completo del archivo 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;
        }
    }
}

A continuación, se muestra el contenido completo de la página 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>

Compartir a través de