Accediendo a ASP.NET Page Methods y servicios WCF desde JavaScript con jQuery

Un Page Method es un método declarado como public y static definido en el codebehind de una página aspx y “decorado” con el atributo WebMethod usado para los métodos de los servicios web.

Windows Communication Foundation (WCF) es el modelo de programación de Microsoft para aplicaciones orientadas a servicios.

Veamos un ejemplo de cómo acceder a un Page Method y un servicio WCF con jQuery, utilizando para ello la versión 1.7.1. Comenzamos por una captura de la solución para tener clara la estructura:

A continuación, el código html común a ambas operaciones para ver posteriormente el código y configuración del lado servidor y la función JavaScript necesaria en cada caso.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Page methods y servicios WCF desde jQuery</title>
    <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="button" value="Recibir mensaje desde page method" onclick="RecibirMensajeDesdePageMethod()" />
            <input type="button" value="Recibir mensaje desde WCF" onclick="RecibirMensajeDesdeWCF()" />
            <p id="Mensaje"></p>
        </div>
    </form>
</body>
</html>

Accediendo a un Page Method con jQuery

El código de servidor para acceder a un Page Method es muy sencillo y no necesita ninguna configuración especial. Como se ha comentado al principio sólo necesitamos declarar un método de nuestra página aspx como público y estático y decorarlo con el atributo WebMethod para poder utilizarlo directamente desde cliente:

[WebMethod]
public static string EnviarMensajeDesdePageMethod()
{
    return "Llamada a un page method desde jQuery.";
}

Sólo nos queda desarrollar la función JavaScript encargada de la llamada y procesamiento del resultado con la ayuda de jQuery:

<script type="text/javascript">
    function RecibirMensajeDesdePageMethod() {
        $.ajax({
            type: "POST",
            url: "Default.aspx/EnviarMensajeDesdePageMethod",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (mensaje) {
                $("#Mensaje").text(mensaje.d);
            } 
        });
    }
</script>

Para finalizar, una captura del resultado:

Consumiendo un servicio WCF con jQuery

La creación y consumo desde JavaScript de un servicio WCF es un poco más complejo. Para empezar, necesitamos agregar una referencia a System.ServiceModel.Web en nuestro proyecto ya que definiremos en el contrato de operación el método de llamada y formato de respuesta entre otras cosas. Vamos a ver el contrato del servicio:

using System.ServiceModel.Web;

namespace jQueryDemo.Services
{
    [ServiceContract]
    public interface IMensajes
    {
        [OperationContract]
        [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json)]
        string EnviarMensajeDesdeWCF();
    }
}

A continuación, la implementación del contrato:

namespace jQueryDemo.Services
{
    public class Mensajes : IMensajes
    {
        public string EnviarMensajeDesdeWCF()
        {
            return "Llamada a un servicio WCF desde jQuery.";
        }
    }
}

Ahora la configuración del servicio en su correspondiente sección del Web.config:

<system.serviceModel>
  <behaviors>
    <serviceBehaviors>
      <behavior name="ServiceBehavior">
        <serviceMetadata httpGetEnabled="true"/>
        <serviceDebug includeExceptionDetailInFaults="true"/>
      </behavior>
    </serviceBehaviors>
    <endpointBehaviors>
      <behavior name="EndpointBehavior">
        <webHttp />
      </behavior>
    </endpointBehaviors>
  </behaviors>
  <services>
    <service behaviorConfiguration="ServiceBehavior" name="jQueryDemo.Services.Mensajes">
      <endpoint address="" binding="webHttpBinding" contract="jQueryDemo.Services.IMensajes" behaviorConfiguration="EndpointBehavior"/>
    </service>
  </services>
</system.serviceModel>

Y por último la función JavaScript encargada de la llamada y procesamiento del resultado con la ayuda de jQuery:

<script type="text/javascript">
    function RecibirMensajeDesdeWCF() {
        $.ajax({
            type: "POST",
            url: "Services/Mensajes.svc/EnviarMensajeDesdeWCF",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (mensaje) {
                $("#Mensaje").text(mensaje.EnviarMensajeDesdeWCFResult);
            }
        });
    }
</script>

Para finalizar, una captura del resultado y el código en un proyecto de ejemplo de Visual Studio 2010 como fichero adjunto:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *