Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Proyecto Final 10 ASP - Net AJAX
Proyecto Final 10 ASP - Net AJAX
ASP.NE
T 4.5
Temas a tratar
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.
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.
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:
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
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.
}
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.
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
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.
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.
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/