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:
