AJAX

En los ltimos aos, el Ajax ha popularizado en

s enormemente en la comunidad de desarrollo
web.A pesar de que la tecnologa que impulsa
el Ajax ha existido desde hace bastante
tiempo, no fue hasta principios de 2005 que
consigui un ofi cial nombre. Ajax, acrnimo de
Asynchronous JavaScript y XML, permite que
las pginas web del lado del cliente para
intercambiar datos con el servidor a travs de
llamadas asncronas, lo que significa que no
bloqueen la interfaz de usuario mientras se
ejecuta.

ASP.NE
T 4.5

Temas a tratar

Uso del control UpdatePanel para evitar el parpadeo pgina

La comprensin del control ScriptManager que permite la funcionalidad Ajax
Uso del control UpdateProgress para notificar a los usuarios acerca del progreso
de una operacin Ajax
La creacin de servicios WCF y mtodos de pgina que se puede acceder
mediante el script del lado del cliente

DESCARGAS WROX.COM CODE para este captulo

Puede hallar las descargas de cdigo wrox.com, para esta sesin, en la ficha cdigo de
descarga, en descarga. El cdigo se encuentra en el captulo 10 de descarga.
En los ltimos aos, el Ajax se ha popularizado enormemente en la comunidad de
desarrollo web.
A pesar de que la tecnologa que impulsa el Ajax ha existido desde hace bastante tiempo,
no fue hasta principios de 2005 que consigui un nombre oficial. Ajax, acrnimo de
Asynchronous JavaScript y XML, permite que las pginas web, desde el lado del cliente,
intercambien datos con el servidor a travs de llamadas asncronas, lo que significa que

no bloqueen la interfaz de usuario mientras se ejecuta. Probablemente la caracterstica

ms popular impulsada por Ajax es la pgina libre de parpadeo, que le permite realizar
una devolucin de datos al servidor sin actualizar la pgina entera. Tenga en cuenta que
el trmino Ajax en realidad no cubre ya ms la tecnologa subyacente. Asynchronous
JavaScript todava se utiliza para hacer las llamadas, pero en muchas situaciones XML,
como formato de datos ha sido sustituido con JSON, como se ve ms adelante en este
captulo.
Para mejorar su sitio web, con caractersticas Ajax, usted puede elegir entre diferentes
arquitecturas de Ajax.
En versiones anteriores de Visual Studio y ASP.NET, Microsoft despachaba, tanto un
framework del lado del servidor, as como tambin una biblioteca de scripts, del lado del
cliente, para las interacciones Ajax. Esta biblioteca de scripts, del lado del cliente - que
sigue estando presente en ASP.NET 4.5 - ya no es la solucin recomendada. En lugar de
ello, es recomendable que utilice jQuery, que se discute en detalle en el siguiente
captulo.
La parte de servidor de Microsoft ASP.NET AJAX le da mucho ms que slo las
devoluciones de datos (postbacks) sin parpadeos.
Adems de los controles que hacen posible las pginas sin parpadeos, Microsoft
ASP.NET AJAX le da un poco ms de controles de servidor para crear interfaces de
usuario ricas, interactivas, y con capacidad de respuesta.

La ortografa correcta de AJAX

Usted vendr a travs de dos grafas diferentes de Ajax: utilizando carcasa Pascal, o todo
en maysculas. Voy a usar el trmino Ajax, cuando se hace referencia al concepto
general, y voy a utilizar ASP.NET AJAX, cuando especficamente haga referencia al
framework Ajax de Microsoft.
Hacia el final del captulo, usted debe tener una buena comprensin de los distintos
controles de servidor que el framework ASP.NET AJAX tiene que ofrecer. Tambin tendr
una comprensin bsica de la creacin de servicios WCF, y mtodos de pgina, utilizando
ASP.NET, y cmo se les puede llamar, desde cdigo JavaScript, del lado del cliente.

PRESENTACIN DE AJAX
En el primer captulo de este libro ha aprendido que los navegadores interactan con el
servidor. El navegador hace una peticin de una pgina utilizando GET o POST, como
hemos visto en el Captulo 4, y en el Captulo 9. El servidor procesa la pgina y enva el
cdigo HTML resultante. El navegador HTML a continuacin, analiza y muestra la pgina
al usuario, descarga opcionalmente los recursos externos, tales como imgenes, la
escritura de archivos y hojas de estilo en cascada (CSS). Cuando un usuario interacta
con la pgina (por ejemplo, haciendo clic en un botn para enviar un formulario de
contacto rellenado) la pgina se devuelve al servidor, despus de lo cual toda la pgina se
carga en el navegador de nuevo. El lado izquierdo de la figura 10-1 muestra una
representacin visual de este proceso.

A pesar de que este modelo se ha utilizado durante aos, para servir pginas web, tiene
unos grandes inconvenientes. En primer lugar, debido a que toda la pgina se carga
despus de una devolucin de datos, el cdigo HTML que se enva al navegador es
mucho ms grande de lo que debe ser. Piense de nuevo en el formulario de contacto, que
ha creado en el captulo anterior. Justo despus de que el usuario haya enviado el
formulario de contacto, el servidor muestra un control Label con el mensaje de texto
enviado. Lo hace mediante la carga de una pgina totalmente nueva, que oculta los
controles de formulario y muestra el mensaje. A pesar de que el resto de la pgina no ha
cambiado (el men, la barra lateral, el pie de pgina, etc.), que estn siendo enviados
desde el servidor al cliente. Idealmente, usted slo quiere devolver el cdigo HTML que ha
cambiado. En el caso del formulario de contacto, que podra ser tan poco como el
mensaje de texto enviado. El lado derecho de la Figura 10-1 muestra cmo funciona esto.
En lugar de enviar toda la pgina como una respuesta, el servidor enva una respuesta
parcial (que contiene poco ms que el mensaje de texto enviado), que es luego utilizado
por el navegador, para actualizar slo la parte de la pgina que ha cambiado, dejando el
resto de la pgina como estaba.
El segundo inconveniente de una recarga de pgina completa tiene que ver con la forma
en que el navegador muestra la pgina.
Debido a que se sustituye toda la pgina, el navegador tiene que despedir a la anterior y
luego dibujar la nueva. Esto hace que la pgina "parpadea", lo que resulta en una
experiencia de usuario poco atractiva. Se pueden implementar tcnicas Ajax para superar
estos dos problemas, como se ve en el resto de este captulo.
Los conceptos detrs de Ajax han existido desde hace muchos aos. Los navegadores,
desde Internet Explorer 5, han incluido con el objeto XMLHttpRequest, que permiti hacer
llamadas al servidor desde JavaScript, para enviar y recibir datos. Sin embargo, las
personas tambin utilizan otras tcnicas para emular el comportamiento de lo que ahora
se llama Ajax, incluyendo Macromedia Flash, elementos iframe de marco flotante, o
tramas ocultas.
Sin embargo, cuando se introdujo el trmino Ajax, las cosas realmente despegaron. En un
intento de mantenerse por delante de la curva, Microsoft comenz a construir ASP.NET
AJAX, el marco Ajax que ahora est plenamente integrado en ASP.NET y Visual Studio
2012. Este marco ofrece una serie de beneficios que usted como un desarrollador web
puede tomar ventaja de crear aplicaciones sensibles.
En particular, ASP.NET AJAX le permite:
Crear pginas sin parpadeos que permiten refrescar partes de la pgina, sin una
recarga completa, y sin afectar a otras partes de la pgina
Proporcionar informacin a sus usuarios durante estas actualizaciones de pgina
Actualizar secciones de la pgina, e invocando un cdigo del lado servidor, de
forma programada, utilizando un temporizador.
Acceso a los servicios WCF del lado del servidor, y a los mtodos de pgina, y
trabajar con los datos que ellos regresan. Lo bueno acerca de ASP.NET AJAX es
que es muy fcil empezar con l. La creacin de una pgina sin parpadeos es una
cuestin de arrastrar y soltar unos controles de la caja de herramientas en su
pgina.

Cuando usted entiende los fundamentos del marco Ajax, puede ampliar sus
conocimientos examinado temas ms avanzados tales como llamar a los servicios WCF.
Usar ASP.NET AJAX en sus proyectos
ASP.NET AJAX est totalmente integrado en ASP.NET y VS, lo que significa que puede
empezar a utilizarlo de inmediato. Cada nuevo proyecto Web ASP.NET 4.5 que se crea en
VS ya est habilitado en Ajax. Adems, la caja de herramientas contiene una categora
Extensiones AJAX, con varios controles relacionados con Ajax, que se pueden utilizar en
sus pginas. Visual Studio tambin tiene un gran apoyo para ASP.NET AJAX, que le da
IntelliSense, para los controles en el servidor, as como para el JavaScript del lado cliente
que voy a escribir para interactuar con la pgina del cliente y el cdigo que se ejecuta en
el servidor.

Creacin de pginas libres de parpadeos

Para evitar las devoluciones de datos completos en sus pginas ASPX y actualizar slo
una parte de la pgina, puede utilizar el control de servidor UpdatePanel. Para que este
control opere correctamente, tambin es necesario un control ScriptManager. Si usted va
a utilizar la funcionalidad Ajax en muchas de sus pginas ASPX, puede colocar el
ScriptManager en la pgina principal, as que est disponible en todas las pginas que se
basan en este maestro. Slo se puede tener un ScriptManager por pgina, por lo que si
se agrega una a una pgina maestra, no se puede agregar otro a una pgina de
contenido.
Para acceder a un control ScriptManager, que se define en una pgina maestra, desde
una pgina de contenido, puede utilizar el control ScriptManagerProxy como se explica
ms adelante. Encontrar estos y otros controles de servidor relacionadas con el Ajax en
la categora Extensiones AJAX de la caja de herramientas, que se muestra en la Figura
10-2.
Las dos secciones siguientes le presentan los controles UpdatePanel y scriptmanager.
Despus de la introduccin se ve cmo hacer uso de estos controles en las pginas de su
sitio web Planet Wrox. Las secciones siguientes, introducen los controles UpdateProgress,
el Timer y ScriptManagerProxy.
El control UpdatePanel
El control UpdatePanel es un componente clave en la creacin de pginas libres de
parpadeo. En su aplicacin ms bsica, simplemente coloca en el control todo el
contenido que desea actualizar, aade un ScriptManager a la pgina, y ya est. Cada vez
que uno de los controles, dentro del UpdatePanel, provoca una devolucin de datos al
servidor, slo se actualiza el contenido dentro de ese UpdatePanel.
Para ver qu problemas resuelve el control UpdatePanel y cmo se comporta en una
pgina del cliente, el siguiente Ejercicio, con 10 tareas, le muestra un ejemplo sencillo que
utiliza el panel para evitar que la pgina parpadee, durante las devoluciones de datos.

EJERCICIO 1
Adicin de un UpdatePanel a una pgina
En este ejercicio, se agrega un Label y un control Button a una pgina. Al hacer clic en el
botn en el navegador, la propiedad Text de la etiqueta se actualiza con la fecha y la hora
actual en el servidor.
Para evitar el parpadeo de pgina, tpicamente asociada con las devoluciones de datos, a
continuacin, envuelva los controles en un UpdatePanel para ver cmo este control afecta
la conducta.
1. Abra el sitio web Planet Wrox en Visual Studio.

2. En la carpeta Demos, crear un nuevo formulario web llamado UpdatePanel.aspx

usando la plantilla personalizada.
Dar a la pgina un ttulo de demostracin de UpdatePanel.

3. Cambie la nueva pgina hacia la vista Diseo, y arrastre un control Label y un

control Button, desde el cuadro de herramientas, en el espacio cpMainContent. Si
el ContentPlaceHolder de repente se pone tan pequeo como el de etiquetas,
simplemente deje caer el botn en la parte superior de la etiqueta. El botn se
coloca antes de la etiqueta, pero si ahora arrastra de nuevo la etiqueta hacia la
parte superior del botn, los dos cambian de lugar.

4. Utilice la cuadrcula de propiedades de para limpiar la propiedad Text del control

Label. Para ello, haga clic en la propiedad texto de la etiqueta en la cuadrcula
propiedades y seleccione Reset.

5. Haga doble clic en el rea gris, de slo lectura, de la pgina en la vista Diseo,
para configurar un controlador para su evento Load, y agregue el cdigo siguiente
al controlador que VS ha aadido para usted:

6. Guarde todos los cambios y presione Ctrl + F5 para abrir la pgina en el

navegador. La etiqueta muestra la fecha y la hora actuales. Haga clic en el control
botn un par de veces. Tenga en cuenta que cada vez que se pulsa el botn, la
pgina parpadea, y luego se vuelve a dibujar, mostrando la fecha y la hora
actualizada. Ahora echar un vistazo al cdigo HTML que utiliza el navegador (haga
clic en la pgina en el navegador y seleccione Ver cdigo fuente de la pgina o Ver
fuente). Observe cmo la pgina contiene un elemento <span> con la fecha y hora
en que fue enviado desde el servidor.

7. Cierre el navegador, volver a VS, y cambiar la pgina UpdatePanel.aspx a Vista

marcado.
Hacer un poco de espacio, justo antes del control etiqueta y, a continuacin,
escriba UpdatePanel y presione Tab. VS inserta el cdigo de un UpdatePanel y un
<ContentTemplate> para usted.
8. A continuacin, cortar las etiquetas de cierre </ ContentTemplate> y
</UpdatePanel> y pguelas debajo del botn que ha creado en el paso 3. Usted
debe terminar con este marcado:
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>

9. Justo antes de la etiqueta de apertura del UpdatePanel, arrastre un ScriptManager

de la categora Extensiones AJAX de la caja de herramientas. Como alternativa,
escriba sm seguido de la tecla Tab para insertar el ScriptManager utilizando un
fragmento de cdigo. El cdigo debera ser similar a esto (aunque a su
ScriptManager le puede faltar el atributo ID y puede utilizar un elemento de cierre
automtico cuando se utiliza un fragmento de cdigo):
<Asp: Content ID = "Content2" ContentPlaceHolderID = "cpMainContent" runat = "server">
<Asp: ScriptManager ID = "ScriptManager1" runat = "server"> </ asp: ScriptManager>
<Asp: UpdatePanel ID runat = "UpdatePanel1" = "server">
10. Guarde los cambios y solicite de nuevo la pgina en el navegador. Haga clic en el
botn varias veces para actualizar la etiqueta con la fecha y la hora actuales.
Tenga en cuenta que ahora no hay parpadeo de pgina, y slo la etiqueta se
actualiza en la pgina. Si nos fijamos en la fuente en el navegador una vez ms,
se ve que el elemento <span> contiene la fecha y hora de la primera solicitud. Los
cambios a la etiqueta, que se agregaron haciendo clic en el botn, no son una
parte de la fuente HTML, debido a que se han aadido dinmicamente, por el
marco ASP.NET AJAX, al HTML interno del navegador.
Cmo funciona
Al envolver el contenido en un UpdatePanel, define una regin en su pgina que desea
actualizar sin afectar a toda la pgina. En el ejemplo, el control botn, dentro del
UpdatePanel, caus una devolucin de datos, y por lo tanto una actualizacin de slo la
regin en la que se define el control. En lugar de reemplazar toda la pgina, slo la parte

de la pgina que se envuelve en el UpdatePanel se actualiza, causando una recarga de la

pgina sin parpadeos.
Si se analizan los datos que se envan desde el servidor al navegador (usando una
herramienta de anlisis de red como Fiddler, que se puede descargar desde violinista),
veramos que solo es enviado una cantidad limitada de datos al cliente. En lugar de la
pgina completa (con un peso alrededor de 12KB), solamente se envan los siguientes
datos:
1|#||4|232|updatePanel|cpMainContent_ctl00|
<span id="cpMainContent_Label1">4/9/2012 11:56:09 AM</span>
<input type="submit" name="ctl00$cpMainContent$Button1" value="Button"
id="cpMainContent_Button1" class="MyButton" style="background-color:#7A70A4;" />
|0|hiddenField|__EVENTTARGET||0|hiddenField|__EVENTARGUMENT||0|hiddenField|__
LASTFOCUS||1624|hiddenField|__VIEWSTATE|
1Atsytn51usXShfT92FZnRfhkyw76l6TfovQaG
...
Demo|184|scriptBlock|ScriptPath|/ScriptResource.axd?
d=zvkqIRNUspAvS1yKeFhMb_LRgBPQ
LrZDpLmd71civkClsZ5csFf1SkTk1NurvxrEjhFFVa7dJqUQpcX9l3wMJNiJeY5DJdOF5sqxT
U0JGDbsEuI_
njxenny6ggiBtc
4vOKR16h2V2npds3RA8dURw2&t=57d51992|
Tenga en cuenta que cort una gran pieza de contenido que incluye gran parte del estado
de vista de la pgina de la zona central (representado por los tres puntos) para ahorrar
algo de espacio en este documento. Si nos fijamos en esta respuesta, reconocer el
cdigo HTML de actualizacin para la etiqueta y el botn; los dos controles que se han
definido en el <ContentTemplate> del control UpdatePanel. El texto restante es utilizado
por el Framework AJAX ASP.NET para mantener el estado de la pgina (utilizando el
campo __VIEWSTATE) y para entender dnde colocar la respuesta en la pgina. A pesar
de que una gran cantidad de datos todava es enviado por el cable, es mucho menor que
la pgina completa original de alrededor de 12KB. Esto resulta en una respuesta ms
rpida y una mejor experiencia de usuario.
Cuando se miraba en la fuente de la pgina en el navegador en el paso 10 se habrn
dado cuenta de que la pgina todava contena la fuente original, no la fuente modificada
actualizada por el marco ASP.NET AJAX.
Esto a veces hace que sea difcil de construir, probar y depurar aplicaciones Ajax, porque
realmente no se puede consultar los datos que se envan al navegador. Afortunadamente,
hay muchas herramientas disponibles que ayudan con esto. Adems de la herramienta
Fiddler antes mencionada, le aconsejan a echar un vistazo a la barra de herramientas de
desarrollador Microsoft Internet Explorer. Esta se enva junto con Internet Explorer 8 y
versiones posteriores y es accesible a travs de la opcin de men Herramientas |
Herramientas de Desarrollo.
Otra gran herramienta para la depuracin es Firebug, que se integra muy bien con el
navegador Firefox. Puede obtener la herramienta en firebug. Chrome de Google tiene una

herramienta similar que se puede abrir haciendo clic en el icono de llave inglesa y luego
eligiendo Herramientas | Herramientas de Desarrollo.
En este ejercicio, se utilizaron dos importantes controles AJAX Extensions. El
ScriptManager - que ha colocado en UpdatePanel.aspx directamente en este ejercicio - es
un requisito para la mayora de la funcionalidad Ajax en una pgina ASPX para funcionar
correctamente. Sirve como puente entre la pgina del cliente y el Marco de Microsoft
ASP.NET AJAX y se ocupa de cosas como el registro de los archivos JavaScript correctos
que se utilizan en el navegador. El UpdatePanel se utiliza entonces para definir regiones
que desea actualizar sin necesidad de recargar la pgina entera. Ves ambos controles
con ms detalle en las siguientes secciones.

EJERCICIO 2
Pginas Flicker-free (sin parpadeo) - Poniendo todo junto
En este ejercicio, se modifican el control del usuario ContactForm.ascx que cre
anteriormente, envolviendo todo el control en un UpdatePanel, de tal forma que la pgina
no realiza una devolucin de datos completa, cuando se introduce un mensaje, y haga clic
en el botn Enviar. Para ayudar a los usuarios a entender que la pgina est ocupada
cuando se enva el mensaje, se agrega un panel UpdateProgress al control. Dentro de
este control se coloca una imagen GIF animada, que est disponible en la descarga de
cdigo para este libro. Alternativamente, se puede ir a www.ajaxload.info y crear su propia
imagen animada.
1. Abra el control de usuario ContactForm.ascx, desde la carpeta Controles, en Vista
marcado y envuelva todo el elemento <table> y el Label, en la parte inferior del
control, en un UpdatePanel, con un <ContentTemplate>. Puede hacerlo
escribiendo el cdigo directamente en la Vista marcado, mediante el uso de un
fragmento de cdigo, o arrastrando el control desde la caja de herramientas.
Asegrese de que el ID del UpdatePanel se establece en UpdatePanel1. Usted
debe terminar con el siguiente cdigo:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table class="auto-style1" runat="server" id="FormTable">

</table>
<asp:Label ID="Message" runat="server" Text="Message Sent" Visible="false"
/>
</ContentTemplate>
</asp:UpdatePanel>
2. Guarde los cambios en el control y abra el archivo Frontend.master de la carpeta
MasterPages. Entre la etiqueta de apertura <form> y <div>, para PageWrapper,
agregar un control ScriptManager, arrastrndolo desde el cuadro de herramientas
hacia la fuente de la pgina. Usted debe terminar con este cdigo:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="PageWrapper">
3. Guarde los cambios en la pgina principal y cerrarla.
4. Abrir la pgina UpdatePanel.aspx, que ha creado en un anterior ejercicio, y quitar
el control ScriptManager. Debido a que este control est ahora declarado en la
pgina maestra, ya no se puede redefinir en las pginas que se basan en que el
maestro. Guarde y cierre la pgina.
5. Abrir la pgina Contact.aspx, desde la carpeta Acerca, en su navegador y, a
continuacin llene el formulario de contacto. Tenga en cuenta que tan pronto como

se hace clic en el botn Enviar, el formulario desaparece y se sustituye con la

etiqueta que indica que el mensaje se ha enviado. Al igual que con el ejemplo
anterior UpdatePanel, usted notar que ninguna pgina parpadea, cuando se
vuelve a cargar la pgina, y muestra el texto del mensaje recibido.
6. Para mantener al usuario actualizado sobre el progreso, mientras se entrega el
mensaje al servidor de correo, se debe aadir un control UpdateProgress a la
pgina. Dentro de este control, se agrega una imagen animada, y algo de texto,
para informar al usuario se enva el mensaje. Para agregar la imagen, busque la
carpeta en la que extrajo los archivos, que vienen con este libro (en
C:\BegASPNET\Resources), con el Explorador de archivos (Windows Explorer en
Windows 7). Abra la carpeta Captulo 10 y luego la carpeta monocromo. Arrastre el
archivo PleaseWait.gif del Explorador de archivos en la carpeta Imgenes del tema
monocromtico bajo App_Themes. Repita este proceso, pero ahora arrastrar
PleaseWait.gif desde la carpeta gris oscuro, en la carpeta Imgenes de su
respectivo tema. La figura 10-3 muestra cmo ambas imgenes deben terminar.

7. Abra el archivo Monochrome.css, recorra todo el camino hasta el final, y aadir la

siguiente regla:
.PleaseWait
{
height: 32px;
width: 500px;
background-image: url(Images/PleaseWait.gif);
background-repeat: no-repeat;

padding-left: 40px;
line-height: 32px;
}
8. Copiar la misma regla exacta en el archivo DarkGrey.css para el tema darkgrey.
9. Cambie de nuevo al control de usuario ContactForm.ascx y por debajo de la
etiqueta de cierre del UpdatePanel al final del archivo, arrastre un control
UpdateProgress de la categora Extensiones AJAX de la caja de herramientas.
Establecer su AssociatedUpdatePanelID a UpdatePanel1, el ID de la UpdatePanel
definido anteriormente en la pgina.
10. Entre los UpdateProgress <> Etiquetas de crear un elemento <ProgressTemplate>,
y dentro de esta plantilla, cree un elemento <div> con su atributo de clase
establecido en PleaseWait, la clase CSS que ha creado en el paso 7. Dentro del
elemento <div>, escriba algn texto para informar a los usuarios de que deben
mantener durante un tiempo. Usted debe terminar con este cdigo:
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="PleaseWait">
Please Wait...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
11. Para emular un largo retraso, al enviar el mensaje, para que pueda ver el control
UpdateProgress, aada la siguiente lnea de cdigo al cdigo subyacente del
control, justo despus de las lneas que cambian la visibilidad de los controles en
el mtodo que enva el correo electrnico:
Message.Visible = True
FormTable.Visible = False
System.Threading.Thread.Sleep(5000)
12. Guarde todos los cambios, y abrir la pgina Contact.aspx, desde la carpeta About,
una vez ms. Rellene los datos requeridos y haga clic en el botn Enviar. Poco
despus de hacer clic en el botn, usted debe ver el control UpdateProgress
parecer que muestra texto y una imagen animada siguiente formulario, se muestra
en la Figura 10-4. Poco despus de eso, el control UpdateProgress y todo el
formulario debe desaparecer y que debe ser presentado con el texto Mensaje
enviado.

ERRORES COMUNES Si no ve el comportamiento descrito, su navegador puede estar

trabajando con una versin obsoleta de la CSS archivos. Presione Ctrl + F5 o Ctrl + R
para obtener la ltima versin del servidor y vuelva a intentarlo. Como alternativa, puede
borrar la cach del navegador.

Como trabaja esto

Con el UpdatePanel en el control de usuario, todo lo que cae dentro de la
ContentTemplate del UpdatePanel se actualizar durante la devolucin de datos, sin
afectar a otras partes de la pgina. De esta manera, puede ocultar el formulario, con los
controles de servidor, y reemplazarla con la etiqueta Mensaje Enviado, sin causar ningn
parpadeo pgina.
Para informar al usuario de que se est enviando su mensaje, tambin agreg un control
UpdateProgress al sitio. De forma predeterminada, se mostrar este control al actualizar
el UpdatePanel que se adjunta a tarda ms de 500 milisegundos (medio segundo). El
elemento <ProgressTemplate> para el control contena un simple elemento <div> con su
clase se establece en PleaseWait. Que ha aadido la siguiente regla CSS para los dos
archivos CSS para los temas:
.PleaseWait
{
height: 32px;
width: 500px;
background-image: url(Images/PleaseWait.gif);
background-repeat: no-repeat;
padding-left: 40px;
line-height: 32px;

}
Este cdigo establece primero que las dimensiones del mensaje de actualizacin van a
ser de 500 pxeles de ancho y 32 pxeles de alto.
Esto es suficiente como para abarcar el ancho del bloque de contenido, que le da
suficiente espacio para un mensaje ms largo.
El cdigo a continuacin, aade la imagen animada como imagen de fondo. Para evitar
que la imagen se repita en el fondo, la propiedad de repeticin se establece en norepeticin. A continuacin, el relleno a la izquierda se establece en 40 pxeles. Esto mueve
el texto en el <div> a la derecha, por lo que aparece junto a la imagen animada. Por
ltimo, la lnea de altura del texto se establece en 32 pxeles, la misma altura que la
totalidad <div>. Ello se centra todo el bloque de texto verticalmente dentro del elemento
<div> y lo alinea perfectamente con la imagen animada.
Por ltimo, se ha aadido la siguiente lnea de cdigo al controlador que enva el mensaje:
System.Threading.Thread.Sleep (5000);
Este cdigo detiene la ejecucin de la pgina durante 5 segundos (el nmero se pasa al
mtodo del sueo se expresa en milisegundos) para que pueda obtener un buen aspecto
en el mensaje en el control UpdateProgress.
En el cdigo de produccin, se debe eliminar esta lnea, ya que ralentiza la pgina
considerablemente sin aadir ningn valor a la pgina.
Adems de actualizaciones de la pgina, disparadas por el usuario, como se vio con el
botn Enviar, tambin puede desencadenar que la pgina se actualice mediante
programacin en un intervalo especificado, como se discute en la siguiente seccin.
NOTA Cuando enrolle la funcionalidad del lado del servidor en un UpdatePanel, a veces
puede ser difcil ver si se ha producido un error, y lo que es el mensaje de error dice
exactamente. Por ejemplo, cuando se enva el correo electrnico no funciona, no podr
ver el mensaje de error real, ya que est escondido en el cdigo JavaScript. Para que sea
ms fcil ver el mensaje de error en caso de que algo va mal, puede eliminar
temporalmente el UpdatePanel de la pgina, o comente sus etiquetas de cierre y apertura
usando el lado del servidor comenta etiquetas <% - y -%> como esta:
<% - <Asp: UpdatePanel ID = "UP1" runat = "server"> <ContentTemplate> -%>
... Contenido existente va aqu
<% - </ ContentTemplate> </ asp: UpdatePanel> -%>

El control Timer
El control Timer, que encontramos en la categora Extensiones AJAX, de la caja de
herramientas, es ideal para ejecutar cdigo en el servidor de forma repetitiva. Por
ejemplo, se puede utilizar para actualizar el contenido de un UpdatePanel cada 5
segundos. El contenido de este UpdatePanel podra venir de una variedad de fuentes,
tales como una base de datos con los ltimos mensajes en el foro en un foro o noticias
artculos en un sitio de noticias, un archivo XML con la informacin para hacer girar la
publicidad en el navegador, cotizaciones de acciones de una poblacin servicio web, y
mucho ms.
El control Timer es bastante simple de usar. Transcurrido un intervalo especificado de
tiempo, el control dispara el evento Tick.
Dentro de un controlador de eventos para este evento se puede ejecutar cualquier cdigo
que le parezca. El siguiente fragmento de cdigo muestra el marcado de una simple
UpdatePanel y un control Timer, que se puede colocar dentro de una pgina de contenido,
basado en su pgina principal (porque la pgina principal ya contiene el ScriptManager se
requiere):
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:Timer ID="Timer1" runat="server" Interval="5000" OnTick="Timer1_Tick" />
</ContentTemplate>
</asp:UpdatePanel>
NOTA Cuando se est usando VB.NET, usted no necesita el onclick en el mando
temporizador debido a que es atendido con la palabra clave Handles en el archivo de
cdigo subyacente en ese idioma.
Cuando el temporizador hace tictac ("ticks") entonces hace surgir su evento Tick, que se
puede manejar con el siguiente cdigo:
Protected Sub Timer1_ Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
Label1.Text = System.DateTime.Now.ToString()
End Sub
Cuando este cdigo se ejecuta en el navegador, la etiqueta se actualizar con la fecha y
la hora actual, cada 5 segundos. Si usted quiere que el tick sea ms lento o ms rpido,
necesita ajustar su propiedad Interval, que especifica el tiempo en milisegundos.
Este escenario, con un panel de actualizacin automtica, y la capacidad de actualizar el
contenido, con un clic de botn, es bastante comn. El panel se actualiza
automticamente, de una manera no intrusiva, para alimentar al usuario con informacin,
lo ms estricta, disponible desde el servidor. Adems, usted podra ofrecerle a sus
usuarios un botn para forzar una actualizacin de los datos en cualquier momento que
ellos deseen. Desde una perspectiva de codificacin, no tendra que cambiar mucho;
llamaran el mismo cdigo (preferiblemente envuelto en un mtodo separado), desde el
manejador de evento Tick del temporizador, y del controlador de eventos Click del botn.
Para obtener ms informacin sobre el control Timer, echa un vistazo a la documentacin
de MSDN en http://tinyurl.com/TimerClass4-5.

Ahora ha visto los ms importantes controles del lado del servidor que ASP.NET AJAX
tiene que ofrecer. En el resto de este captulo, encontramos una discusin de los servicios
WCF y mtodos de pgina, en sus pginas web habilitadas para Ajax. Cuando estemos
trtando los servicios web, se ver cmo utilizar el ScriptManagerProxy, el control final en
la categora Extensiones AJAX, de la caja de herramientas.

Uso de servicios Web, y mtodos de pgina en sitios web

AJAX
La posibilidad de llamar a servicios web, y los mtodos de pgina, desde un sitio web
ASP.NET habilitado para Ajax, es una gran adicin a su conjunto de herramientas de
desarrollo web. Ser capaz de llamar a un servicio web, o el mtodo de la pgina, significa
que es ahora mucho ms fcil de acceder a los datos en el servidor, desde cdigo de
cliente, que le da una gran alternativa a las devoluciones de datos completos. La siguiente
seccin trata sobre los servicios web, y una seccin posterior se clava en el trabajo con
los mtodos de pginas de ASP.NET.

Qu son los Servicios Web?

Los servicios web son esencialmente mtodos, que se pueden llamar a travs de Internet,
y que opcionalmente puede devolver los datos al cdigo de llamada. Esto las hace ideales
para el intercambio de datos entre diferentes sistemas.
Debido a que los servicios web se basan en normas slidas y bien entendidas, hacen que
sea fcil para el intercambio de datos, entre diferentes tipos de plataformas y sistemas.
Por ejemplo, con un servicio web, es posible el intercambio de datos entre una pgina
web ASP.NET, que se ejecuta en Microsoft Windows, y un sitio basado en PHP, que se
ejecuta en Linux. Pero, al mismo tiempo, tambin es posible el intercambio de datos, entre
una pgina web ASP.NET o PHP, y un navegador cliente, usando JavaScript.

WCF
Para construir servicios web, en un sitio web de ASP.NET, se utiliza Windows
Communication Foundation (WCF), plataforma de Microsoft para aplicaciones orientadas
a servicios, utilizando el Framework .NET. En las versiones anteriores de ASP.NET,
tambin se puede hacer uso de los llamados servicios web ASMX, pero stos ahora
han quedado en desuso en favor de WCF. Sin embargo, esto no es realmente un
problema, porque WCF puede hacer cualquier cosa que los servicios web ASMX podan
hacer y mucho ms.
WCF es compatible con una serie de diferentes tecnologas de comunicacin de red
subyacentes, tales como HTTP, .NET remoto, Microsoft Message Queue Server y
Enterprise Services. Esto hace que sea una plataforma ideal para el intercambio de datos,
en una variedad de escenarios, como localmente en una sola mquina, en una red
corporativa, o a travs de Internet. Para los sitios web de cara al pblico, tales como el
sitio Planet Wrox, HTTP o HTTPS (la versin segura de HTTP), es la eleccin natural, ya
que funcionar a travs del navegador, y a travs de cortafuegos.
Para obtener informacin acerca de las otras tecnologas compatibles, echa un vistazo a
este artculo en el sitio web de MSDN en
http://msdn.microsoft.com/library/dd943056.aspx, u obtener una copia de Profesional
WCF 4: Windows Communication Foundation con .NET 4 (Wrox, ISBN: 978-0-470-563144).
Para construir un servicio web WCF, se agrega un servicio WCF (con una extensin .svc)
a su proyecto. Como se ve ms adelante, usted tiene algunas plantillas diferentes
disponibles, cada uno sirviendo a un propsito diferente. Dentro de este archivo de
servicio, se definen un contrato de servicio, y un contrato de operacin. El contrato de
servicio define el servicio en general, y en el Contrato de Operacin se definen los
diferentes mtodos que estn disponibles en el servicio. El siguiente fragmento de cdigo
muestra un servicio WCF simple con un solo mtodo:

<ServiceContract(Namespace:="")>
<AspNetCompatibilityRequirements(
RequirementsMode:=AspNetCompatibilityRequirementsMode.Allowed)>
Public Class NameService
<OperationContract()>
Public Function HelloWorld(name As String) As String
Return String.Format("Hello {0}", name)
End Function
End Class

Usted define el contrato de servicios mediante la aplicacin de un atributo ServiceContract

a su clase. Un atributo es como un pequeo rtulo o etiqueta que se puede pegar en
elementos de cdigo, como las clases, mtodos, propiedades, y as sucesivamente, para
marcar ese trozo de cdigo como algo especial. Otro cdigo que interacte con el cdigo
con atributos, puede entonces ver qu atributos contiene ese cdigo y tomar decisiones
en base a esa informacin.
No se preocupe por eso demasiado, ya que no tiene que leer los atributos por s mismo,
cuando se trabaja con los servicios web. Todo lo que necesita hacer es pegar el atributo,
en una clase o mtodo, para habilitarlo para WCF.
En C # se utilizan corchetes, para envolver el atributo, mientras que VB.NET se utilizan
parntesis angulares. Tambin pueden ver ejemplos en los que el atributo VB.NET es
seguido de un espacio y un guion bajo, ya que las versiones anteriores de VB.NET
requieren esto. No es necesario el subrayado ms, aunque es perfectamente vlido
utilizarlo de todos modos.
Con este atributo en su lugar, usted enva una seal, hacia el tiempo de ejecucin, que
realmente quiere exponer esta clase como un servicio WCF.
El atributo AspNetCompatibilityRequirements, que se aplica a la clase de servicio,
determina cmo el servicio WCF se comporta en tiempo de ejecucin. El Valor allowed le
permite a su servicio ejecutarse en lo que se llama el modo de compatibilidad de
ASP.NET, que ejecuta el servicio WCF de una manera similar a como se llevaron a cabo
los servicios ASMX. Cuando se establece el valor en NOT ALLOWED, sus servicios no
van a funcionar correctamente en sus sitios web ASP.NET.
Adems del atributo en la clase, cada mtodo que desea exponer al servicio est
marcado con el atributo OperationContract. Este modelo opt-in le permite crear otros
mtodos (por ejemplo, mtodos de ayuda que llama desde su mtodos de servicio) sin
exponerlos a su servicio.
Llamando a Servicios desde cdigo del lado del cliente
Llamar a un servicio WCF, desde una pgina HTML cliente, es muy simple. ASP.NET se
encarga de la mayor parte del trabajo duro por usted, generando el cdigo JavaScript
necesario, para interactuar con el servicio. Todo lo que tiene que hacer es registrar el
servicio con el control ScriptManager, y luego llamarlo desde el cdigo del lado del cliente.

Dada el NameService, que ya hemos visto anteriormente, se configura el ScriptManager

de la siguiente manera:
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/WebServices/NameService.svc" />
</Services>
</asp:ScriptManager>
En este ejemplo, el archivo de servicio se llama NameService.svc, y se encuentra en una
carpeta llamada WebServices, en la raz de su sitio web.
Una vez que configure el servicio, puede llamar al servicio desde JavaScript, del lado del
cliente, en una pgina ASPX como esto:
NameService.HelloWorld('Imar', helloWorldCallback);
function helloWorldCallback(result)
{
alert(result);
}
Tenga en cuenta que, en este cdigo, se utiliza una mezcla de caso camello y caso
Pascal. Para alinearse con las directrices de programacin .NET, se utiliza el mtodo de
servicio carcasa Pascal y se escribe como HelloWorld. En JavaScript es comn escribir
mtodos utilizando caso camello, y por lo tanto el mtodo de devolucin de llamada se
escribe como helloWorldCallback con una "h" minscula. Me quedo con estas
convenciones de nombres a lo largo del captulo, lo que nos ayudar a determinar si algo
es un mtodo cliente puro, o un mtodo en el servidor. Para llamar a un mtodo de
servicio, se utiliza ServiceName.MethodName. As, en el ejemplo anterior, NameService
es el nombre del servicio, y HelloWorld es el mtodo al que desea llamar. Al escribir este
cdigo en Visual Studio (y registrado, el servicio en el ScriptManager para la pgina
maestra que la pgina de contenido est utilizando), se obtiene la ayuda de IntelliSense
como se muestra en la Figura 10-5.

Aunque la definicin de servicio real tiene un solo parmetro (el parmetro nombre), el
mtodo del lado del cliente, en este ejemplo, tiene cuatro parmetros. El primero de ellos
es el parmetro de nombre, que he creado en el mtodo de servicio HelloWorld. Si el
servicio de espera ms parmetros, que se enumeran aqu tambin. El segundo
parmetro le permite especificar un mtodo de devolucin de llamada de xito - un
mtodo que defina en su cdigo que se llama cuando la llamada de servicio se realiza
completamente. En el ejemplo de cdigo, este mtodo se llama helloWorldCallback. Se
puede nombrar a este mtodo cualquier forma que desee (siempre y cuando sea un
nombre vlido en JavaScript), pero yo prefiero llamarlo serviceMethodNameCallback para
expresar claramente para qu tipo de cdigo este sirve como una devolucin de llamada.
Como parmetro, el mtodo de devolucin de llamada recibe el valor devuelto por el

servicio. En este ejemplo, este resultado es una cadena simple, pero ver ms adelante
ver cmo tambin puede pasar objetos complejos. El tercer parmetro es tambin un
mtodo de devolucin de llamada y se llama cuando falla la llamada de servicio (por
ejemplo, debido a que el servicio se encuentre un error o no est disponible).
El ltimo parmetro se llama userContext, y le permite pasar datos adicionales a sus
mtodos de devolucin de llamada. Esto es til si necesita datos adicionales de contexto,
para procesar correctamente la devolucin de llamada xito.
En este ejemplo, se requiere el primer parmetro, y los otros tres son opcionales. Sin
embargo, en la mayora de los escenarios de la vida real, se va a implementar al menos la
devolucin de llamada onSuccess, con el fin de trabajar con los datos devueltos por el
servicio.
En este ejemplo, el cdigo de la devolucin de llamada de xito de helloWorldCallback es
muy simple; lo nico que hace es emitir una alerta, con el valor devuelto por el servicio.
Sin embargo, no tiene por qu ser as. Los valores que se pueden devolver, desde el
servicio, no se limitan a cadenas simples, como se ve en la siguiente seccin.
El intercambio de objetos complejos con WCF
A pesar de que una cadena simple, a veces, puede ser suficiente, la respuesta desde un
servicio, normalmente se necesita ms informacin. Por ejemplo, es posible que desee
cargar las dos ltimas crticas a partir de una llamada de servicio cuando un usuario hace
clic en un botn de actualizacin. En lugar de publicar de nuevo toda la pgina, se puede
llamar a un servicio, recuperar las crticas de la base de datos y los muestra en la pgina
de alguna manera. Aqu est un ejemplo de cmo un servicio que recupera crticas poda
mirar:

<ServiceContract(Namespace:="")>
<AspNetCompatibilityRequirements(
RequirementsMode:=AspNetCompatibilityRequirementsMode.Allowed)>
Public Class ReviewsService
<OperationContract()>
Public Function GetLatestReviews() As List(Of Review)
Dim temp As New List(Of Review) From
{
New Review() With {.Id = 1,
.Title = "21st Century Breakdown by Green Day"},
New Review() With {.Id = 2,
.Title = "Sonic Youth: Daydream Nation live in Roundhouse, London"}
}
Return temp
End Function
End Class
Public Class Review
Public Property Id As Integer
Public Property Title As String
End Class

Para mostrar cmo trabajar con datos complejos en el cliente, este ejemplo de cdigo
devuelve dos instancias de revisin codificadas. En captulos posteriores se ve cmo
trabajar con comentarios en una base de datos por lo que podra hacer que este ejemplo
verdaderamente dinmico. Por ahora, slo sirve para el propsito de mostrar los
comentarios en el cliente.
El cdigo establece una coleccin genrica de instancias de revisin. Por ahora, una
opinin es una clase simple con dos propiedades: una identificacin y un ttulo. La
coleccin es entonces llenada mediante un inicializador de coleccin que aade dos
instancias de revisin, cada uno de ellos creados con un objeto iniciador. Vase el
Captulo 5 para obtener ms informacin sobre la recogida y los inicializadores de objeto.
Cuando se llama al mtodo GetLatestReviews, de cdigo de cliente, se obtiene de nuevo
una coleccin de instancias de revisin que pueda reproducir indefinidamente. El
siguiente cdigo muestra el mtodo getLatestReviewsCallback que logra esto:
function getLatestReviewsCallback(result)
{
var listItems = '';
for (i = 0; i < result.length; i++)
{
listItems += '<li>' + result[i].Title + '</li>';
}
document.getElementById('Reviews').innerHTML = listItems;
}

Este cdigo declara por primera vez una cadena que contendr los ttulos de los
comentarios. Despus devuelve en los comentarios en la variable de resultado. JavaScript
no es compatible con foreach, pero utilizando un loop for estndar se puede acceder
fcilmente a todos los elementos de la coleccin. Dentro del bucle, el ttulo de la revisin
se recupera mediante result [i].Ttle, que se envuelve en un par de etiquetas <li> y se
aade a una variable de cadena.
Al final, se aade la cadena como el innerHTML de un elemento llamado crticas (que
podra tener este aspecto en el cdigo: <ul id = "Comentarios"> </ ul>) por lo que los
ttulos de revisin terminan en una lista con vietas.
Al escribir este cdigo, se dar cuenta de que no obtiene IntelliSense para el objeto
resultado. VS no sabe el tipo real de la variable de resultado, y como tal no puede ayudar
a encontrar propiedades tales como la identificacin y el ttulo.
Tenga en cuenta que este cdigo es un poco torpe. Utilizar document.getElementById e
innerHTML no es la mejor manera de escribir cdigo como este. Por lo tanto, en el
siguiente captulo se presentan mejores alternativas cuando se discute jQuery. Por ahora,
sin embargo, esto debera ser suficiente, que muestra el concepto bsico de trabajar con
objetos complejos de volver de un servicio WCF.
Es importante tener en cuenta que el objeto Reviews, con el que trabajar en JavaScript,
no es exactamente el mismo objeto como el que se utiliza en el servicio. Su cdigo
VB.NET hace referencia a .NET Framework en el servidor, mientras que el JavaScript se
ejecuta en el cliente. Para conseguir el objeto para el cliente, WCF serializa la coleccin
de comentarios en JavaScript Object Notation (JSON) - una representacin de cadena de
los objetos que se pueden utilizar directamente en el cdigo JavaScript. Usted ve un
ejemplo de JSON en un ejercicio posterior.
Los servicios web, en el proyecto Planet Wrox, slo se utilizarn para hacer que una
pgina del cliente, en el navegador, logre comunicarse con el servidor, e intercambie
datos. Por lo tanto, en este sitio, el servidor y el cliente, estn en el mismo proyecto web uno se ejecuta en el cliente (el cdigo JavaScript, que llama al servidor web), y el otro vive
en el servidor (el servicio web en s). Desde un punto de vista de la seguridad, esta es la
solucin ms fcil debido a que ambas partes confan entre s.
Si desea que sus pginas del lado del cliente, hablen con un servicio web en un dominio
diferente, podra alojar un servicio en su propio sitio que llama al servicio web remoto. El
navegador del cliente a continuacin, llama a su servicio, que a su vez llama al servicio
remoto. Sin embargo, este escenario, est fuera del alcance de este captulo,.
Ves esta teora WCF en la prctica en el siguiente ejercicio.

Creacin de Servicios Web

La creacin de servicios WCF con VS es bastante fcil. Al igual que con todos los otros
tipos de documentos, VS viene con una plantilla para un servicio WCF. Agrega el servicio
al sitio utilizando el cuadro de dilogo Agregar nuevo elemento. A continuacin, modifica el
cdigo de servicio para satisfacer sus necesidades. A continuacin, se registra el servicio
en un ScriptManager o ScriptManagerProxy y entonces usted est listo para terminar de
una pgina web del cliente.
VS viene con algunas plantillas diferentes para crear un servicio de WCF. Para crear uno
que sea exigible desde un sitio web, se utiliza la plantilla de servicio WCF para AJAX.

Cuando se agrega un servicio basado en esta plantilla, VS aade el cdigo de

configuracin necesario, para permitir llamar a este servicio, desde una pgina Web, para
el archivo Web.config por usted. Adems, el modelo de codificacin de este servicio es un
poco ms fcil que la plantilla de servicio WCF estndar, ya que almacena todo el cdigo
en una nica clase y archivo.

EJERCICIO
CREAR SERVICIO WEB
En este ejercicio se crea un simple servicio web "Hola mundo". Este servicio acepta su
nombre como un parmetro de entrada y devuelve un saludo amistoso personalizado. No
hay mucho uso en el mundo real para este servicio web exactamente, pero debido a la
simplicidad en el servicio en s, es fcil que le permita centrarse en los conceptos
subyacentes.
1. Crear una nueva carpeta llamada WebServices en la raz de su sitio para agrupar
todos los servicios web en una sola carpeta. Esto no es necesario, pero ayuda en
la organizacin de su sitio.
2. A continuacin, haga clic en esta nueva carpeta y elija Agregar I Agregar nuevo
elemento. Haga clic en el elemento Servicio WCF para AJAX. Debido a que la lista
de plantillas puede ser bastante largo, se puede encontrar rpidamente el artculo
correcto mediante la bsqueda de WCF en el cuadro de bsqueda en la esquina
superior derecha del cuadro de dilogo Agregar nuevo elemento.
Asegrese de que hace clic en el elemento para su lenguaje de programacin, y
llama a su servicio NameService, como se muestra en la Figura 10-6.

3. Haga clic en Agregar para agregar el servicio al sitio. Observe que se aade el
archivo .svc a la carpeta servicios web y el archivo de cdigo subyacente (.vb o
.cs) se coloca en la carpeta App_Code del sitio se muestra en la Figura 10-7.

4. Abrir el archivo de Cdigo subyacente de NameService en la carpeta App_Code, y

cambie el nombre del mtodo DoWork a HelloWorld, y cambiar el cdigo para que
acepte una cadena y devuelve un saludo personalizado.
Observe que en VB es necesario cambiar el cdigo de un sub a una funcin y
tienen que devolver una cadena, y en C # desde void a un mtodo de cadena,
debido a que el mtodo de servicio devuelve una cadena. Usted debe terminar con
el cdigo de la siguiente manera:
Public Class NameService
...
<OperationContract()>
Public Function HelloWorld(name As String) As String
Return String.Format("Hello {0}", name)
End Function
End Class
5. Eso es. Acaba de crear un servicio WCF, que se puede llamar desde el cdigo del
lado del cliente. Tenga en cuenta que si intenta solicitar el archivo .svc,
directamente en el navegador, aparece una pantalla similar a la figura 10-8.

Se obtiene esta pantalla porque, por defecto, y por razones de seguridad, los servicios
WCF no exponen sus metadatos.
Esto significa que no le dicen al mundo exterior cmo funcionan y cmo se llaman
ellos. Si desea probar su servicio WCF podra permitirle a publicar sus metadatos
siguiendo las instrucciones de la pgina de servicio se muestra en la Figura 10-8. Una
vez que haya habilitado los metadatos, se obtiene ms informacin sobre cmo probar
el servicio mediante un programa cliente de prueba WCF. Por lo general no hago esto
para los servicios WCF simples, sin embargo; a menudo es tan fcil de llamar al
servicio desde una pgina del lado del cliente, como se ver en el siguiente ejercicio.
Cmo funciona
Los servicios WCF son esencialmente mtodos, que pueden ser llamados a travs de
una red, como Internet o una red local. Estn diseados para que las aplicaciones
puedan comunicarse e intercambiar datos entre s.
El formato del mensaje subyacente por defecto para un servicio WCF habilitado para
Ajax es JSON. Esta es una manera muy sucinta para intercambiar datos. Por ejemplo,
las dos crticas que vimos en un ejemplo anterior se transfieren desde el servidor al
cliente mediante el siguiente cdigo JSON:
{"d":[{"__type":"Review:#","Id":1,"Title":"21st Century Breakdown
by Green Day"},{"__type":"Review:#","Id":2,"Title":
"Sonic Youth: Daydream Nation live in Roundhouse, London"}]}

http://www.json.org/

Cuando se agrega un servicio web a su proyecto, no todos los mtodos en este

archivo se convierten en invocables, en la web para que se puedan llamar de forma
automtica.
Para exponer un mtodo como un servicio, es necesario aplicar el atributo
OperationMethod:
<OperationMethod()>
Public Function HelloWorld(name As String) As String
Con este atributo, el mtodo es visible para el mundo exterior, y por lo tanto puede ser
accesible por sistemas externos.
Con el servicio creado, los siguientes pasos son para registrarlo con el ScriptManager
y decir que es cdigo de cliente. Estos dos temas se discuten a continuacin.
Configuracin del ScriptManager
En una seccin anterior de este captulo se vio que el control ScriptManager es un
componente necesario, en casi todas las operaciones relacionadas con el Ajax. Se
registra archivos JavaScript del lado del cliente (los utilizados por el marco Ajax y
opcionalmente suyos), se encarga de las actualizaciones de pginas parciales con el
UpdatePanel, y se ocupa de la interaccin con los servicios web que han sido
definidos en su sitio web. Puede aadir un ScriptManager a una pgina individual o a
la pgina maestra, de modo que est disponible a travs de su sitio. Al utilizar los
servicios web, tambin hay que decirle al ScriptManager que desea exponer su
servicio web para el script de cliente. Tienes dos maneras de hacer esto:
En el ScriptManager, en la pgina maestra
En una pgina de contenido, que utiliza el servicio web, utilizando la clase
ScriptManagerProxy
Cuando se va a utilizar el servicio web en todas, o en la mayora de las pginas, es
mejor declarar el servicio web en el ScriptManager de la pgina maestra de. Esto se
hace dndole al control ScriptManager un elemento <Servicios>, que a su vez
contiene uno o ms elementos ServiceReference, que apuntan a sus servicios
pblicos. Por ejemplo, para hacer que el servicio que ha creado NameService.svc est
disponible para todas las pginas de su sitio, agregue el siguiente cdigo resaltado a
la pgina maestra:
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/WebServices/NameService.svc" />
</Services>
</asp:ScriptManager>
Mediante la referencia al servicio, en la pgina principal, est disponible a todas las
pginas en base a ese maestro.
Esto tambin significa que cada pgina descargar los archivos de cdigo JavaScript
necesarios para ejecutar este servicio.

Esta es una prdida de ancho de banda, y recursos, si la pgina no est utilizando en

absoluto el servicio web. Por lo tanto, para los servicios que se utilizan en slo unas
pocas pginas, es mejor hacer referencia al servicio en la pgina en s.
En una pgina normal, que no utiliza una pgina principal con un ScriptManager, slo
tiene que aadir un ScriptManager a la forma del Web directamente. Sin embargo, si
est utilizando una pgina maestra que ya tiene su propia ScriptManager (como es el
caso de las pginas en el sitio web de Planet Wrox), es necesario utilizar un control
ScriptManagerProxy. Debido a que puede tener slo un ScriptManager en una pgina,
no se puede agregar otra en una pgina de contenido que utiliza su pgina principal
con el ScriptManager. Por lo tanto, la ScriptManagerProxy sirve como un puente entre
el contenido de la pgina y el ScriptManager en la pgina maestra, que le da una gran
flexibilidad en cuanto a donde se registra sus servicios.
Cuando se tiene al ScriptManagerProxy en su lugar, adale exactamente el mismo
elemento <Servicios> a ella como se vio con el propio ScriptManager:
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
<Services>
<asp:ServiceReference Path="~/WebServices/NameService.svc" />
</Services>
</asp:ScriptManagerProxy>
El ejercicio siguiente muestra cmo registrar y accedar a tu servicio web, desde cdigo
del lado del cliente, utilizando el ScriptManagerProxy.
TRY IT OUT Calling Web Services from Client-Side Code (373)