ASP .Net 4.5 - Script de Cliente ASP Net

Script de Cliente ASP .
NET
Script de Cliente ASP .NET

ASP.NET proporciona dos enfoques para incluir capacidades de cliente. El primer enfoque consiste en utilizar las
caractersticas Ajax de ASP.NET. Microsoft Ajax incluye archivos de script de biblioteca que contienen funciones de script
de cliente que incorporan muchas de las ventajas de programacin orientada a objetos y del modelo de ASP.NET para
scripting de cliente. Microsoft Ajax tambin proporciona compatibilidad basada en servidor que incluye controles de
servidor web que pueden representar automticamente el script de cliente necesario para la funcionalidad Microsoft
Ajax.
El segundo enfoque es crear el script de cliente e integrarlo usted mismo en las pginas web ASP.NET. Este enfoque solo
resulta til si tiene pequeos fragmentos de script de cliente o si desea integrar el script de cliente existente en la
aplicacin. Muchos controles de servidor web de ASP.NET (por ejemplo, los controles de validacin de ASP.NET) utilizan
este enfoque para agregar la funcionalidad de cliente.
1. Scripts de Cliente en pginas Web ASP.NET

Las aplicaciones web ASP.NET no se limitan a los lenguajes y las herramientas basados en servidor. Puede incluir
ECMAScript (JavaScript o JScript) en sus pginas web ASP.NET para crear funcionalidad enriquecida basada en
explorador. ASP.NET dispone de una amplia gama de caractersticas para la compatibilidad con los scripts de cliente.
Una opcin consiste en crear y agregar fragmentos de cdigo individuales de script de cliente a las pginas web
ASP.NET para admitir el comportamiento de explorador que disee para la aplicacin. Esta opcin resulta prctica si solo
desea incluir algunas partes pequeas de cdigo JavaScript o si trabaja con cdigo JavaScript que ya tiene. Esta opcin
tambin permite que el tamao de las pginas web ASP.NET sea el mnimo.
Asimismo, puede aprovechar las eficaces caractersticas AJAX de ASP.NET. Entre estas caractersticas AJAX se incluye un
completo marco de trabajo que admite lo siguiente:
Programacin orientada a objetos en JavaScript.

Postbacks asincrnicos.
Escenarios
Incluir script de cliente personalizado en pginas ASP.NET
Servicios Web de aplicacin para autenticacin y perfiles.

Controles de servidor que administran los scripts de cliente con compatibilidad ampliada para depuracin y
seguimiento de traza.
Las caractersticas AJAX de ASP.NET permiten aprovechar las ventajas de la funcionalidad de JavaScript con menos
codificacin manual. Esta proporciona la funcionalidad de JavaScript ampliada, adems de un marco de trabajo para
crear la funcionalidad de cliente que se integra en ASP.NET.
En este tema se proporciona informacin general sobre las opciones para agregar script de cliente a las pginas web
ASP.NET. Contiene las siguientes secciones:
Ampliar JavaScript con caractersticas AJAX de ASP.NET

Controles de servidor ASP.NET que dependen de scripts de cliente
Agregar eventos del script de cliente a los controles de servidor ASP.NET
Hacer referencia a controles de servidor en scripts de cliente
Provocar eventos Click de cliente para los controles de servidor
Comunicacin entre scripts de cliente y cdigo de servidor
Crear componentes de script de cliente
Agregar funcionalidad de cliente a los controles de servidor
1. Escenarios
Use los scripts de cliente cuando desee hacer lo siguiente:
Mejorar la experiencia del usuario con pginas web ms enriquecidas, que son ms receptivas a las acciones
del usuario y presentan un comportamiento similar a las aplicaciones cliente tradicional. Por ejemplo, puede
usar scripts de cliente para comprobar los datos proporcionados con el teclado en un cuadro de texto a
medida que se escribe cada uno de los caracteres.
Agregar funcionalidad AJAX a las pginas web ASP.NET, lo que le permite hacer lo siguiente:
o Reducir las actualizaciones de pgina completa y evitar el parpadeo de la pgina mediante la
manipulacin dinmica de los elementos DOM de la pgina.
o Actualizar y administrar la interfaz de usuario sin necesidad de un postback al servidor.
o Organizar el cdigo en componentes de cliente. Los componentes de cliente son objetos
reutilizables que encapsulan JavaScript basado en Microsoft Ajax Library. Los componentes de
cliente tambin se pueden administrar mediante controles del lado servidor personalizados o
asociar a controles de servidor existentes para agregar funcionalidad de cliente.
2. Incluir script de cliente personalizado en pginas ASP.NET
MCT: Luis Dueas
Pag. 1 de 35

Dado que las pginas web ASP.NET solo presentan marcado HTML, puede agregarles su propio script de cliente. Las
pginas ASP.NET admiten scripts de cliente en la medida en que el explorador que solicita la pgina admite dichos
scripts. Si la pgina se ejecuta en un explorador de un telfono u otro dispositivo mvil, el grado de compatibilidad con
el script de cliente variar segn el explorador.
Existen varias opciones para incluir scripts de cliente en las pginas ASP.NET:
Puede incluir scripts de cliente de forma esttica en un bloque script que incluya cdigo o que use un
atributo include para hacer referencia a un archivo JavaScript (.js). Use esta opcin para insertar bloques de
script o archivos JavaScript que contengan scripts de cliente que no sea necesario crear dinmicamente y que
no requieran la funcionalidad AJAX adicional que proporciona Microsoft Ajax Library.
Puede crear y agregar dinmicamente el script de cliente a una pgina web ASP.NET mediante la
clase ClientScriptManager. Use esta opcin si desea crear scripts que dependan de informacin que solo est
disponible en tiempo de ejecucin.
Si desea aprovechar las caractersticas AJAX de ASP.NET, puede administrar los archivos de script de cliente
mediante el control de servidor ScriptManager. El control de servidor ScriptManager tambin garantiza que
Microsoft Ajax Library se cargue en el explorador antes de ejecutarse los scripts.
Incluir bloques de script de cliente estticos

Se pueden agregar bloques de script a una pgina ASP.NET del mismo modo que se hara en cualquier pgina
HTML. Tambin se pueden utilizar scripts de cliente para escribir controladores de eventos para eventos de cliente como
el evento onload de la pgina. Cuando una pgina ASP.NET se ejecuta en el explorador, los elementos de marcado de la
pgina son direccionables en el script de cliente. Estos generan los mismos eventos de cliente que en una pgina HTML.
Nota
Puede hacer referencia a los controles de servidor ASP.NET en el script de cliente.
Una pgina web ASP.NET tambin puede tener acceso a un archivo de script al hacer referencia a este en el
atributo src de una etiqueta <script>, como en el ejemplo siguiente:
<script type="text/javascript" src="MyScript.js"></script>

Mantener los scripts de cliente en archivos .js externos en lugar de mantenerlos en las pginas en s puede ayudar a
organizarlos. Tambin puede facilitar su administracin por parte del control de versiones y hacer que sea ms fcil
compartirlos entre pginas.
El explorador almacena en cach los archivos .js externos, de forma similar a como se almacenan en cach las imgenes
y las pginas web. Una vez que el explorador carga el script como archivo externo, este est disponible en la memoria
cach para cualquier otra pgina web que lo necesite. Esto puede ayudar a aumentar el rendimiento de la aplicacin
web.
Crear script de cliente de forma dinmica

En muchos casos, el script de cliente para la pgina se puede crear mediante declaracin, normalmente como un bloque
de script. Sin embargo, tambin se puede crear script de cliente de forma dinmica. Esto resulta til si el script depende
de informacin que solo est disponible en tiempo de ejecucin. Por ejemplo, puede insertar el script de cliente en una
pgina que direcciona un control de servidor cuyo nombre (identificador) no se conoce hasta que se ejecuta la
aplicacin, o puede crear un script que depende de los valores recibidos de un usuario.
Para crear e insertar script de cliente de forma dinmica en una pgina presentada, llame a los mtodos de la clase
ClientScriptManager, como los siguientes:
RegisterClientScriptBlock, que inserta un bloque de script en la parte superior de la pgina presentada.

RegisterStartupScript, que inserta un bloque de script al final de la pgina presentada.
En el ejemplo siguiente se muestra cmo agregar a la pgina el script de cliente generado dinmicamente. El cdigo
comprueba si est activada la casilla denominada checkDisplayCount. En caso afirmativo, el cdigo realiza las
siguientes tareas:
Crea una funcin de script de cliente que usa un elemento span para mostrar el recuento de caracteres en un
control TextBox denominado TextBox1.
Agrega un evento de cliente al control TextBox.

Genera el elemento span.
El cdigo supone que la pgina contiene una casilla denominada checkDisplayCount cuya propiedad AutoPostBack
est establecida en true y un control PlaceHolder denominado PlaceHolder1.
void Page_Load(object sender, EventArgs e)
{
if(checkDisplayCount.Checked)
{
String scriptText = "";
scriptText += "function DisplayCharCount(){";
scriptText += "
spanCounter.innerText = " +
" document.forms[0].TextBox1.value.length";
MCT: Luis Dueas
Pag. 2 de 35
scriptText += "}";
ClientScriptManager.RegisterClientScriptBlock(this.GetType(),
"CounterScript", scriptText, true);
TextBox1.Attributes.Add("onkeyup", "DisplayCharCount()");
LiteralControl spanLiteral = new
LiteralControl("<span id=\"spanCounter\"></span>");
PlaceHolder1.Controls.Add(spanLiteral);
}
}
Para los mtodos de la clase ClientScriptManager, se proporciona un tipo al que est asociado el bloque de script y se
asigna una clave a este bloque. Al proporcionar un tipo resulta ms fcil evitar colisiones si tanto la pgina como los
controles (controles personalizados o controles de usuario) agregan bloques de script a la misma pgina. El uso de una
clave permite evitar la duplicacin. Si llama a uno de los mtodos para agregar el script y ya existe un script con la
misma clave y el mismo tipo, el script no se vuelve a agregar.
El tipo y la clave proporcionados permiten evitar una duplicacin innecesaria. Por lo tanto, generalmente no tendr que
determinar de forma explcita si ya existe un bloque de script. Sin embargo, si es til en la aplicacin comprobar si ya
existe un bloque de script, puede llamar a los mtodos siguientes:
IsClientScriptBlockRegistered
IsClientScriptIncludeRegistered
IsOnSubmitStatementRegistered
IsStartupScriptRegistered
Agregar un script de cliente mediante el control ScriptManager

Si usa las caractersticas AJAX de ASP.NET, el control ScriptManager ofrece una forma de agregar archivos de script a
una pgina. Esto incluye los archivos de script estticos (archivos .js) del disco y los archivos de script incrustados como
recursos en un ensamblado. Los archivos de script se pueden especificar mediante declaracin en el control. Como
alternativa, puede usar los mtodos de registro del control ScriptManager que permiten administrar los archivos de
script de cliente existentes mediante programacin y trabajar con scripts para admitir la actualizacin parcial de la
pgina.
Nota
Si usa las caractersticas AJAX de cliente de ASP.NET, pero no las caractersticas basadas en servidor, use los mtodos
de la clase ClientScriptManager para insertar scripts en una pgina web ASP.NET. Por ejemplo, si no usa el
control UpdatePanel ni las caractersticas de localizacin de scripts, no necesita el control ScriptManager. Por
consiguiente, no puede llamar a sus mtodos para insertar el script de cliente en la pgina. El uso de los mtodos de la
clase ClientScriptManager suele ser ms eficaz que usar los mtodos del control ScriptManager. Esto se debe a que los
mtodos de la clase ClientScriptManager no requieren el procesamiento adicional de las caractersticas basadas en
servidor admitidas por el control ScriptManager. Si tiene que crear el script de forma dinmica (en lugar de
simplemente administrar el script existente), use la clase ClientScriptManager para insertar el script de cliente en una
pgina. Por ejemplo, use la clase ClientScriptManager si desea crear el script de cliente mediante programacin en
funcin de la informacin a la que un archivo de script ya existente no puede hacer referencia.
3. Ampliar JavaScript con caractersticas AJAX de ASP.NET

ASP.NET admite la funcionalidad AJAX, lo que permite usar scripts de cliente para agregar caractersticas enriquecidas a
una pgina web ASP.NET. Entre ellas se incluyen los postbacks asincrnicos y una interfaz de usuario con capacidad de
respuesta muy elevada. La funcionalidad AJAX se implementa mediante Microsoft Ajax Library, que se compone de
bibliotecas de scripts de cliente que incorporan las tecnologas entre exploradores ECMAScript (JavaScript) y HTML
dinmico (DHTML). La funcionalidad AJAX se integra en la plataforma de desarrollo para servidores de ASP.NET.
Puede usar el sistema de tipos de Microsoft Ajax Library, las caractersticas orientadas a objetos y las extensiones de
objetos JavaScript a fin de ofrecer las caractersticas siguientes para la creacin de scripts de cliente personalizados:
Espacios de nombres
Herencia
Interfaces
Enumeraciones
Reflexin
Aplicaciones auxiliares de depuracin
Traza
Control de excepciones con tipo
Mtodos auxiliares para cadenas y matrices.
Nota
MCT: Luis Dueas
Pag. 3 de 35
Puede usar Microsoft Ajax Library aunque no tenga previsto usar las caractersticas AJAX para
servidores de ASP.NET.
Compatibilidad para exploradores de las caractersticas AJAX

El nivel de compatibilidad con exploradores de Microsoft Ajax Library proporciona compatibilidad con scripting de Ajax
para los exploradores que se usan con ms frecuencia (incluidos Microsoft Internet Explorer, Mozilla Firefox y Apple
Safari). Esto permite escribir el mismo script independientemente del explorador compatible al que est destinado.
4. Controles de servidor ASP.NET que dependen de scripts de cliente

La funcionalidad de algunos controles de servidor ASP.NET depende del script de cliente. Por ejemplo, el
control LinkButton requiere scripts de cliente para implementar su comportamiento de devolucin de datos. Los scripts
de cliente requeridos para los controles de servidor Web ASP.NET se agregan automticamente a la pgina cuando sta
se representa. Los scripts de cliente generados para estos controles son independientes de los scripts creados por el
desarrollador.
5. Agregar eventos del script de cliente a los controles de servidor ASP.NET

Los controles ASP.NET se presentan como elementos en la pgina. (Los elementos exactos presentados por un control
dependen del lenguaje de marcado de la pgina, que puede incluir HTML, XHTML u otro lenguaje). Por lo tanto, puede
agregar el control de eventos del script de cliente a los controles del mismo modo que lo hara con cualquier elemento
de la pgina. Sin embargo, en algunos casos, debe saber cmo presenta el control su resultado y qu atributos se
reserva para s mismo.
Agregar controladores de eventos de cliente mediante declaracin

En el formato de los controles de servidor ASP.NET, los valores de las propiedades se establecen mediante atributos. Por
ejemplo, para establecer la propiedad Text de un control TextBox, puede crear un marcado como el siguiente:
<asp:textbox id="TextBox1" runat="server" text="Sample Text" />

Nota sobre la seguridad
TextBox acepta los datos proporcionados por el usuario, lo que puede suponer una amenaza para la
seguridad. De forma predeterminada, las pginas web ASP.NET validan los datos escritos por el usuario para
comprobar que no incluyen script ni elementos HTML.
Si se incluye un atributo que no est asignado a ninguna propiedad del control, ASP.NET omite el atributo durante el
procesamiento del servidor. Lo pasa al explorador tal cual, como parte del marcado generado por el control. Por
ejemplo, el control TextBox no tiene ninguna propiedad denominada onkeyup. Por consiguiente, si incluye un
atributo onkeyup en el marcado de un control TextBox, el atributo se pasa a travs del explorador. Este
comportamiento permite agregar enlaces de eventos a los controles de servidor declarndolos en el marcado. Por
ejemplo, el formato siguiente de un control TextBox hace que el cuadro de texto muestre la longitud del texto actual en
un elemento span denominado spanCounter cada vez que el usuario presiona una tecla en el cuadro de texto:
<asp:textbox id="TextBox1" runat="server" text="Sample Text"

onkeyup="spanCounter.innerText=this.value.length;" />
Opcionalmente, el evento podra llamar a un mtodo definido en un script de cliente situado en otra parte de la pgina:
<asp:textbox id="TextBox1" runat="server" text="Sample Text"

onkeyup="DisplayCount(this);" />
Recuerde que el lenguaje empleado para el cdigo de servidor (Visual Basic o C#) no afecta al script de cliente, que
siempre se escribe en ECMAScript (JavaScript or JScript).
Agregar atributos en el cdigo de servidor

Adems de agregar atributos de paso a travs a un control mediante declaracin, tambin se pueden agregar atributos
mediante programacin utilizando el cdigo de servidor. Esto resulta til si el valor del atributo que se va a agregar se
conoce solo en tiempo de ejecucin.
6. Hacer referencia a controles de servidor en scripts de cliente

Cuando se presenta un control de servidor ASP.NET, la propiedad ClientID del control se presenta en la pgina como
atributo id del elemento resultante. (La propiedad ClientID se genera automticamente a partir de la propiedad ID que
se establezca.) Por ejemplo, podra crear el control de servidor ASP.NET siguiente:
<asp:textbox id="TextBox1" runat="server" text="Sample Text" />

La propiedad ClientID se establece en TextBox1 y el elemento resultante tendra la apariencia siguiente en un explorador
basado en HTML:
<input name="TextBox1" type="text" value="Sample Text" id="TextBox1" />

Por consiguiente, puede hacer referencia al control de servidor en el script de cliente mediante estos
atributos. Normalmente, el control se direcciona utilizando una referencia completa en el script de cliente. Si el control
MCT: Luis Dueas
Pag. 4 de 35

es un elemento secundario del elemento form de la pgina, normalmente se hace referencia a l en el script de cliente
mediante sintaxis, como se muestra en el siguiente ejemplo:
var tb1 = document.getElementById("TextBox1");

tb1.value = "New value";
En el ejemplo siguiente se supone que, para el elemento form de la pgina, el atributo id se ha establecido en form1.
document.form1.TextBox1.value = "New value";

El atributo id que se generar para un control de servidor depende del control que se est usando y de si es un
elemento secundario de otro control. Cuando un control est incluido en un control de repeticin, como el
control GridView, ListView o Repeater, un solo control definido en el marcado suele crear varias instancias del control en
el HTML presentado. El marco de la pgina ASP.NET proporciona un mecanismo para asegurarse de que cada control en
el HTML presentado de una pgina tiene un identificador nico.
7. Provocar eventos Click de cliente para los controles de servidor

Tal como se ha explicado anteriormente, puede agregar eventos Click de cliente a la mayora de los controles de
servidor ASP.NET si agrega el atributo onclick al marcado del control. Sin embargo, algunos controles reservan el
atributo onclick para definir el enlace al evento de servidor. Entre estos se encuentran los controles Button,
LinkButton e ImageButton. Estos controles no permiten utilizar el atributo onclick mediante declaracin para agregar un
controlador de script de cliente al control.
El controlador de script de cliente para el evento Click se puede agregar de dos maneras:
Establezca la propiedad OnClientClick del control como el script que se debe ejecutar. Cuando se representa
el control de botn, el valor de OnClientClick se convierte en un atributo onclick.
Agregue el atributo onclick mediante programacin llamando al mtodo Add de la coleccin Attributes del
control.
Nota
No puede agregar un atributo onclick mediante programacin a un control de servidor si este ya
usa onclick como parte de su funcionalidad bsica, como LinkButton.
En el ejemplo de cdigo siguiente se muestra un control Button que produce eventos Click en el cliente y en el servidor:
<asp:button id="Button1" runat="server"

OnClientClick="return confirm('Ok to post?')"
onclick="Button1_Click" Text="Click!" />
8. Comunicacin entre scripts de cliente y cdigo de servidor

Adems de usar los postbacks estndar, las pginas web ASP.NET pueden comunicarse con el script de cliente y el
cdigo de servidor de varias maneras. Las caractersticas AJAX de ASP.NET, como el control de servidor UpdatePanel,
automatizan las actualizaciones asincrnicas parciales de la pgina. Adems, AJAX de ASP.NET permite llamar a los
servicios Web de forma asincrnica.
Si no usa las caractersticas AJAX de ASP.NET, puede invocar una devolucin de llamada de cliente personalizada
directamente y compartir la informacin entre el explorador y el servidor a travs de diversos mtodos. En la seccin
siguiente se proporciona informacin sobre las opciones disponibles.
Llamar al cdigo de servidor directamente desde el script de cliente

El script de cliente puede llamar directamente al cdigo de servidor si se implementa una devolucin de llamada de
cliente. En una secuencia normal de pginas web ASP.NET, cada accin del usuario que ejecuta cdigo de servidor
requiere un postback. Sin embargo, tambin puede invocar el procesamiento del servidor desde el explorador sin un
postback completo. En este caso, el explorador no enva la pgina entera al servidor y la recarga posteriormente cuando
el servidor responde. En su lugar, el explorador enva una cantidad pequea de datos al servidor. Cuando el servidor
enva una respuesta, el script de cliente en el explorador procesa los datos devueltos sin recargar la pgina. Durante el
procesamiento del servidor, se mantiene todo el estado del cliente, como las variables locales. Este proceso se conoce
como postback asincrnico y es clave para la representacin parcial de la pgina.
Puede llamar a los mtodos de servidor desde el script de cliente sin un postback de las siguientes maneras:
Use el control de servidor ASP.NET UpdatePanel. Este control forma parte de la funcionalidad AJAX de
ASP.NET. Permite definir una regin de una pgina que se actualizar con una actualizacin parcial de la
pgina. Cuando use el control UpdatePanel, no es necesario que escriba ningn script de cliente para invocar
las actualizaciones asincrnicas parciales de la pgina.
Use la compatibilidad con AJAX de ASP.NET para la comunicacin de servicios Web para escribir scripts de
cliente que invoquen un mtodo de servidor web. Este enfoque es conceptualmente similar a escribir su
propia devolucin de llamada del script de cliente para llamar a un mtodo de servidor web.Sin embargo,
Microsoft Ajax Library administra los detalles de la invocacin del mtodo de servidor y proporciona una
biblioteca de scripts de cliente ms slida para realizar y procesar la llamada.
MCT: Luis Dueas
Pag. 5 de 35
Implemente una devolucin de llamada de cliente. En este caso, se escribe el cdigo de cliente que enva la
solicitud y procesa el resultado. El enfoque ms comn es crear una funcin de llamada en el script de cliente
y una funcin de devolucin de llamada que se invoca cuando el servidor devuelve los resultados.
Cada enfoque tiene sus ventajas. Crear una devolucin de llamada de cliente propia suele ofrecer menos sobrecarga y
un tamao de pgina ms pequeo. Usar el control de servidor UpdatePanel permite implementar actualizaciones
parciales de la pgina sin necesidad de escribir ningn script de cliente. Usar AJAX para llamar a los servicios Web
tambin elimina la mayora de los scripts de cliente que debera escribir para realizar llamadas asincrnicas a los
servicios Web.
Compartir datos mediante un control HiddenField

Puede compartir informacin entre el script de cliente y el cdigo de servidor si agrega un control HiddenField a la
pgina. Puede hacer referencia al campo oculto en el script de cliente mediante su identificador. Tambin puede hacer
referencia al campo oculto en el cdigo de servidor. Esto permite almacenar los valores en cualquiera de los bloques de
cdigo y leerlos en el otro. Para pasar informacin del cdigo de servidor al script de cliente, puede crear un campo
oculto mediante programacin con el mtodo RegisterHiddenField. Este mtodo permite especificar un identificador y
un valor para el campo. Puede usar el campo para almacenar valores dinmicos en la pgina de manera que ese script
de cliente pueda leerlos.
Compartir datos mediante cookies

Tambin puede compartir valores entre el cdigo de servidor y el cdigo de cliente mediante cookies.
Compartir datos durante postbacks asincrnicos

Si usa las caractersticas AJAX de ASP.NET, puede enviar datos personalizados como una cadena desde el servidor al
cliente durante los postbacks asincrnicos (representacin parcial de la pgina) con el mtodo RegisterDataItem. El
mtodo RegisterDataItem permite usar el cdigo de servidor para registrar un campo asociado a un control. Puede
obtener acceso al valor del campo del script de cliente en el explorador a travs de los objetos Sys.WebForms.
PageLoadingEventArgs y Sys.WebForms.PageLoadedEventArgs de ASP.NET AJAX. Solo se puede llamar al mtodo
RegisterDataItem durante un postback asincrnico.
9. Crear componentes de script de cliente

Los componentes de cliente son objetos reutilizables que encapsulan JavaScript basado en Microsoft Ajax Library. La
biblioteca proporciona las siguientes clases base de tipos de objeto de cliente: Component (clase base para
componentes no visuales), Control y Behavior. Puede derivar de estas clases para proporcionar funcionalidad de cliente
enriquecida, que incluye lo siguiente:
Obtener acceso al ciclo de vida de un componente desde la inicializacin a la eliminacin. Se incluyen los
eventos que se generan cuando cambian los valores de propiedad.
Representar un elemento DOM como un objeto de cliente que tiene una nueva funcionalidad. De esta manera
se ampla el comportamiento de elementos DOM. Por ejemplo, puede agregar un comportamiento de
impresin de marcas de agua que se puede asociar a un cuadro de texto existente.
10. Agregar funcionalidad de cliente a los controles de servidor

Cualquier control de servidor ASP.NET existente o personalizado se puede convertir en un control extensor AJAX de
ASP.NET. Un control extensor es un control de servidor web que usa las capacidades de ECMAScript (JavaScript), DHTML
y AJAX del explorador web para agregar caractersticas como la interactividad y la comunicacin asincrnica con el
servidor.
1.1. Controles de servidor web de ASP.NET que usan un script de

cliente
La funcionalidad de algunos controles de servidor ASP.NET depende del script de cliente. Adems, algunas funciones de
las pginas ASP.NET tambin dependen de script de cliente. Resulta til conocer el modo en que los controles y las
pginas ASP.NET utilizan el script de cliente para poder entender cmo las pginas web se vern afectadas por las
diferencias en el modo en que los exploradores admiten el script de cliente. Por ejemplo, a veces los usuarios
deshabilitan el script en un explorador por motivos de seguridad. Cuando lo hacen, se pierde la funcionalidad que
proporciona el script de cliente.
Adems, las pautas de accesibilidad anteriores requieren que la funcionalidad de la pgina web sea accesible cuando el
script de cliente est desactivado o no se admita en un explorador. Si desea cumplir estas directrices, quizs tenga que
evitar los controles que siempre usan el script de cliente.
Compatibilidad del explorador para el script de cliente

El script de cliente que ASP.NET genera automticamente para admitir la funcionalidad de una pgina o un control es
compatible con todos los exploradores que admiten ECMAScript (JScript o JavaScript); es decir, no depende de las
funciones avanzadas de scripting de HTML dinmico (DHTML). Una excepcin es el conjunto de controles de elementos
MCT: Luis Dueas
Pag. 6 de 35

web. Los controles de elementos web requieren la versin 5.5 o posteriores de Microsoft Internet Explorer para
implementar toda la funcionalidad de los controles. Algunas funciones de validacin pueden aprovechar las ventajas
que ofrece el uso de DHTML si est disponible en el explorador, aunque dicho lenguaje no es necesario.
Funcionalidad del script de cliente que usan todos los controles

Las siguientes caractersticas, admitidas por la mayora de los controles de servidor web, pueden hacer que utilicen script
de cliente:
El comportamiento de AutoPostBack para los controles que no son botones se implementa mediante script de
cliente. Por lo tanto, establecer la propiedad AutoPostBack de cualquier control de servidor web en true hace
que el control dependa del script de cliente.
Las propiedades o mtodos que establecen el foco en controles usan el script de cliente. Por ejemplo, el
mtodo Control.Focus y el mtodo Page.SetFocus requieren el script de cliente.
Controles que usan script de cliente

En la tabla siguiente se muestran los controles y los miembros de los controles que aprovechan las ventajas del script de
cliente y explica la funcionalidad proporcionada por dicho script. Los controles que solo usan el script de cliente para
admitir el comportamiento de AutoPostBack o para establecer el foco no se incluyen en esta lista.
Control
Funcionalidad del script de cliente
Button
Cuando se establece la propiedad OnClientClick, el botn depende

del script de cliente.
Calendar
Este control usa controles LinkButton para implementar la

navegacin por da, semana y meses.
Si utiliza el control Calendar para mostrar un nico mes sin
ninguna seleccin o navegacin, dicho control no requiere script
de cliente.
ChangePassword
Este control genera controles de validacin para cuadros de texto y

controles LinkButton para los botones de envo y cancelacin.
DataPager
Si no se establece la propiedad QueryStringField y est utilizando

objetos NextPreviousPagerField o NumericPagerField,
el
control DataPager requiere el script de cliente.
DetailsView
De forma predeterminada, este control usa controles LinkButton.

Para evitar la necesidad de script de cliente, cree plantillas y
agregue controles Button para estas funciones.
El script de cliente se puede utilizar para paginar si el control de
origen de datos asociado admite esta funcionalidad.
Si la propiedad EnablePagingCallbacks es true, se usa el script de
cliente para administrar la devolucin de llamada.
FormView
De forma predeterminada, el control usa controles LinkButton para

funciones tales como cambiar al modo de edicin, paginar,
etc. Para evitar la necesidad del script de cliente, utilice la
propiedad PagerTemplate y agregue controles Button para estas
funciones.
GridView
De forma predeterminada, el control usa controles LinkButton para

funciones tales como cambiar al modo de edicin, paginar,
ordenar, etc. Para evitar la necesidad de script de cliente, cree
plantillas y agregue controles Button para estas funciones.
Si la propiedad EnableSortingAndPagingCallbacks es true, se usa
el script de cliente para administrar la devolucin de llamada.
HtmlButton
El script de cliente se utiliza para permitir los eventos de

devolucin de datos.
HtmlForm
La etiqueta <form runat=server> crea implcitamente este
MCT: Luis Dueas
Pag. 7 de 35
control. Las propiedades siguientes requieren script de cliente:

DefaultFocus
DefaultButton
ImageButton

devolucin de datos.
ImageMap
Si establece la propiedad HotSpotMode del control o de zonas

activas individuales como PostBack, el control necesita script de
cliente para funcionar.
LinkButton

devolucin de datos.
LoginStatus
El control usa un control LinkButton para mostrar el

vnculo Cerrar sesin. Para evitar la necesidad de script de
cliente, cree plantillas y agregue controles Button para estas
funciones.
Menu
El script de cliente se utiliza para abrir y cerrar elementos de men,

mostrar paneles emergentes y controlar la presentacin cuando los
usuarios sitan el puntero del mouse sobre los elementos de men.
Page
La propiedad MaintainScrollPositionOnPostback() requiere

script de cliente.
PasswordRecovery
Si la propiedad ClientTarget de la pgina se establece

como Downlevel, el control necesita script de cliente para
funcionar.
ScriptManager
Este control administra archivos de script de cliente y carga

Microsoft Ajax Library.
Timer
El script de cliente se utiliza para realizar eventos de devolucin de

datos desde el explorador a intervalos definidos.
TreeView
El script de cliente se utiliza para abrir y cerrar nodos. Tambin se

utiliza cuando el control TreeView se configura para rellenar
nodos a peticin.
El script de cliente se puede deshabilitar para el control TreeView,
en cuyo caso el comportamiento de la seleccin se realiza en el
cdigo del servidor despus de una devolucin de datos. Sin
embargo, los nodos en s se representan como vnculos que utilizan
el script de cliente para realizar una devolucin de datos. Por
consiguiente, si el explorador no admite el script de cliente, el
control TreeView no puede realizar un postback.
UpdatePanel
El script de cliente se utiliza para la representacin parcial de la

pgina (devoluciones de datos asincrnicas) y es una parte integral
de la funcionalidad de este control.
Controles validadores:
CompareValidator
CustomValidator
RangeValidator
RegularExpressionValidator
RequiredFieldValidator
ValidationSummary
De forma predeterminada, los controles de validacin representan

el script de cliente para realizar la validacin del lado cliente y
proporcionar los comentarios de la validacin de forma
inmediata. Sin embargo, dado que los controles validadores
integrados (excepto el control CustomValidator) realizan
automticamente una comprobacin de validacin redundante en
cdigo de servidor, puede establecer la propiedad
EnableClientScript en false con objeto de evitar que se representen
script de cliente para los controles de validacin.
MCT: Luis Dueas
el
Pag. 8 de 35
Controles de elementos web
El script de cliente se usa para admitir el comportamiento de

arrastrar y colocar, para agregar controles de elementos web a
zonas y verbos, y para admitir la funcionalidad de importacin y
exportacin.
Wizard , CreateUserWizard
El control representa controles LinkButton para la navegacin.

Para evitar la necesidad de script de cliente, cree plantillas y
agregue controles Button para estas funciones.
1.2. Crear un script de cliente personalizado mediante Microsoft

Ajax Library
Las caractersticas AJAX de ASP.NET ayudan a crear scripts de cliente e integrarlos en aplicaciones ASP.NET. Incluyen un
sistema de tipos para ECMAScript (JavaScript) y extensiones para los objetos ECMAScript (JavaScript) existentes para
darles la riqueza de las clases .NET Framework. ASP.NET tambin incluye el control ScriptManager para administrar estas
bibliotecas de scripts y cualquier script personalizado de su aplicacin.
Este tema contiene las siguientes secciones:
Escenarios
Utilizar el sistema de tipos
Utilizar las extensiones de los tipos base de JavaScript
Integrar scripts de cliente en aplicaciones web ASP.NET
1. Escenarios
Use las caractersticas de Microsoft Ajax Library incluidas en Visual Studio 2010 y Microsoft Visual Web Developer
Express cuando desee hacer lo siguiente:
Agregar capacidades orientadas a objetos al cdigo JavaScript para aumentar la reutilizacin, flexibilidad y
mantenimiento del cdigo.
Utilizar la reflexin para examinar la estructura y los componentes de los scripts de cliente en tiempo de
ejecucin.
Utilizar enumeraciones para proporcionar una alternativa fcilmente legible a las representaciones de enteros.
Utilizar las extensiones de depuracin y una caracterstica de traza para lograr una depuracin ms rpida y
ms informativa que con las tcnicas tradicionales de depuracin de JavaScript.
Utilizar las extensiones de los tipos base de JavaScript para reducir el tiempo de desarrollo de las tareas de
scripting comunes.
2. Utilizar el sistema de tipos

Microsoft Ajax Library agrega un sistema de tipos y extensiones a los objetos JavaScript para proporcionar las
caractersticas orientadas a objetos de uso ms frecuente similares a las caractersticas de .NET Framework. Permiten
escribir aplicaciones ASP.NET habilitadas para AJAX de una manera estructurada que mejora el mantenimiento, facilita la
incorporacin de caractersticas y facilita la funcionalidad de capas. Las extensiones de Microsoft Ajax Library agregan
las siguientes capacidades a JavaScript:
Clases
Espacios de nombres
Herencia
Interfaces
Enumeraciones
Reflexin
La biblioteca tambin proporciona funciones auxiliares para cadenas y matrices.
Clases, miembros y espacios de nombres

Microsoft Ajax Library incluye las clases base y los objetos y componentes que derivan de ellos. Juntas, estas clases
permiten usar un modelo de programacin orientada a objetos para escribir scripts de cliente.
La clase Type agrega caractersticas orientadas a objetos como espacios de nombres, clases y herencia a la
programacin de JavaScript. Cualquier objeto JavaScript que se registra mediante la clase Type tiene acceso
automticamente a esta funcionalidad. En el ejemplo siguiente se muestra cmo utilizar la clase Type para crear y
registrar un espacio de nombres y una clase en un archivo JavaScript:
Type.registerNamespace("Demo");
Demo.Person = function(firstName, lastName, emailAddress) {
this._firstName = firstName;
this._lastName = lastName;
MCT: Luis Dueas
Pag. 9 de 35
this._emailAddress = emailAddress;
}
Demo.Person.prototype = {
getFirstName: function() {
return this._firstName;
},
getLastName: function() {
return this._lastName;
},
getName: function() {
return this._firstName + ' ' + this._lastName;
},
dispose: function() {
alert('bye ' + this.getName());
}
}
Demo.Person.registerClass('Demo.Person', null, Sys.IDisposable);
// Notify ScriptManager that this is the end of the script.
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
Las clases pueden tener cuatro tipos de miembros: campos, propiedades, mtodos y eventos. Los campos y las
propiedades son pares de nombre y valor que describen las caractersticas de una instancia de una clase. Los campos
estn compuestos por tipos primitivos y son de acceso directo, como en el ejemplo siguiente:
myClassInstance.name="Fred"
Las propiedades pueden representar cualquier tipo primitivo o de referencia. El acceso a los valores de la propiedad se
obtiene con los mtodos de descriptor de acceso get y set. En Microsoft Ajax Library, los descriptores de acceso get y
set son funciones que, por convencin, utilizan el prefijo "get_" o "set_" en el nombre de la funcin. Por ejemplo, para
obtener o establecer un valor para una propiedad como cancel, llame a los mtodos get_cancel o set_cancel.
Microsoft Ajax Library provoca eventos en respuesta a las acciones que se producen durante el ciclo de vida de una
aplicacin cliente de AJAX. Microsoft Ajax Library tambin proporciona un mtodo estndar para crear eventos
personalizados para los componentes de cliente de AJAX.
Microsoft Ajax Library proporciona una manera de registrar los espacios de nombres con el fin de agrupar las
funcionalidades comunes. En el ejemplo siguiente se muestra cmo agregar una clase Person al espacio de
nombres Demo utilizando los mtodos Type.registerNamespace y .registerClass.
Para habilitar la funcionalidad de AJAX para una pgina web ASP.NET, debe agregar un control ScriptManager a la
pgina. Cuando se representa la pgina, se generan automticamente las referencias de script correspondientes a las
bibliotecas de scripts de cliente de AJAX. En el ejemplo siguiente se muestra una pgina con un control ScriptManager.
<asp:ScriptManager runat="server" ID="scriptManager" />

En el ejemplo siguiente se muestra cmo registrar el espacio de nombres, crear la clase y, a continuacin, registrar la
clase.
}
},
},
},
}
}
// Notify ScriptManager that this is the end of the script.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
MCT: Luis Dueas
Pag. 10 de 35
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Namespace</title>
</head>
<body>
<form id="Main" runat="server">
</form>
<div>
<p>This example creates an instance of the Person class
and puts it in the "Demo" namespace.</p>
<input id="Button1" value="Create Demo.Person"
type="button" onclick="return OnButton1Click()" />
</div>
<script type="text/javascript" src="Namespace.js"></script>
<script type="text/javascript" language="JavaScript">
function OnButton1Click()
{
var testPerson = new Demo.Person(
'John', 'Smith', 'john.smith@example.com');
alert(testPerson.getFirstName() + " " +
testPerson.getLastName() );
return false;
}
</script>
</body>
</html>
Modificadores de acceso
La mayora de los lenguajes de programacin orientados a objetos incluyen el concepto de modificadores de acceso, que
permiten especificar en qu contextos est disponible una clase o miembro, por ejemplo, para programas externos,
clases internas dentro del mismo espacio de nombres o slo dentro de un bloque de cdigo concreto. No hay ningn
modificador de acceso en JavaScript. Sin embargo, en Microsoft Ajax Library, la convencin es que los miembros con
nombres que comienzan por el carcter de subrayado ("_") se consideran privados y no se tiene acceso a ellos fuera de
la clase de la que forman parte.
Herencia
La herencia es la capacidad de una clase de derivarse de otra clase. Una clase derivada hereda automticamente todos
los campos, propiedades, mtodos y eventos de la clase base. Una clase derivada puede agregar nuevos miembros o
invalidar los miembros existentes de la clase base para cambiar su comportamiento.
El ejemplo siguiente contiene dos clases definidas en el script: Person y Employee, donde Employee deriva
de Person. Ambas clases muestran el uso de los campos privados y ambas tienen propiedades y mtodos
pblicos. Adems, Employee invalida la implementacin toString de la clase Person y utiliza la funcionalidad de la clase
base.
}
},
},
getEmailAddress: function() {
return this._emailAddress;
},
setEmailAddress: function(emailAddress) {
},
},
MCT: Luis Dueas
Pag. 11 de 35
},
sendMail: function() {
var emailAddress = this.getEmailAddress();
if (emailAddress.indexOf('@') < 0) {
emailAddress = emailAddress + '@example.com';
}
alert('Sending mail to ' + emailAddress + ' ...');
},
toString: function() {
return this.getName() + ' (' + this.getEmailAddress() + ')';
}
}
Demo.Employee = function(firstName, lastName, emailAddress, team, title) {
Demo.Employee.initializeBase(this, [firstName, lastName, emailAddress]);
this._team = team;
this._title = title;
}
Demo.Employee.prototype = {
getTeam: function() {
return this._team;
},
setTeam: function(team) {
this._team = team;
},
getTitle: function() {
return this._title;
},
setTitle: function(title) {
this._title = title;
},
toString: function() {
return Demo.Employee.callBaseMethod(this, 'toString') + '\r\n' +
this.getTitle() + '\r\n' + this.getTeam();
}
}
Demo.Employee.registerClass('Demo.Employee', Demo.Person);
<head>
<title>Inheritance</title>
</head>
<body>
<script type="text/javascript" src="Inheritance.js"></script>
</form>
<h2>Inheritance</h2>
<p />
<div>
This file contains two classes defined in script: Person and Employee,
where Employee derives from Person.
<p />
Each class has private fields, and public properties and methods. In
addition, Employee overrides the toString implementation, and in doing
so, it uses the base class functionality.
<p />
This example puts the Person class in the "Demo" namespace.
<p />
</div>
<div>
<ul>
MCT: Luis Dueas
Pag. 12 de 35
<li><a href="#" onclick="return OnTestNewClick()">

Object Creation</a></li>
<li><a href="#" onclick="return OnTestDisposeClick()">
Object Dispose</a></li>
<li><a href="#" onclick="return OnTestPrivatePropertyClick()">
Public vs. Private Properties</a></li>
<li><a href="#" onclick="return OnTestInstanceMethodClick()">
Instance Methods</a></li>
<li><a href="#" onclick="return OnTestOverrideMethodClick()">
Overriden Methods</a></li>
<li><a href="#" onclick="return OnTestInstanceOfClick()">
Instance Of Check</a></li>
</ul>
</div>
function GetTestPerson()
{
return new Demo.Person('Jane', 'Doe', 'jane.doe@example.com');
}
function GetTestEmployee()
{
return new Demo.Employee('John', 'Doe', 'john.doe@example.com',
'Platform', 'Programmer');
}
function OnTestNewClick() {
var aPerson = GetTestPerson();
alert(aPerson.getFirstName());
alert(aPerson);
alert(Object.getType(aPerson).getName());
var testPerson = GetTestPerson();
alert(testPerson.getFirstName());
alert(testPerson);
return false;
}
function OnTestDisposeClick() {
var aPerson = GetTestEmployee();
alert(aPerson.getFirstName());
aPerson.dispose();
}
function OnTestPrivatePropertyClick() {
alert('aPerson._firstName = ' + aPerson._firstName);
alert('aPersona.getFirstName() = ' + aPerson.getFirstName());
return false;
}
function OnTestInstanceMethodClick() {
aPerson.sendMail('Hello', 'This is a test mail.');
return false;
}
function OnTestOverrideMethodClick() {
var testPerson = GetTestEmployee();
alert(testPerson);
return false;
}
function OnTestInstanceOfClick() {
if (Demo.Employee.isInstanceOfType(aPerson)) {
MCT: Luis Dueas
Pag. 13 de 35
alert(aPerson.getName() + ' is an Employee instance.\r\nTitle

property: ' + aPerson.getTitle());
}
return false;
}
</script>
</body>
</html>
Interfaces
Una interfaz define los requisitos de entrada y salida de las clases que la implementan. Esto permite a una funcin
interactuar con las clases que implementan la misma interfaz independientemente de qu otra funcionalidad
implementa la clase.
En el ejemplo siguiente se definen una clase base Tree y una interfaz IFruitTree. Apple y Banana, dos clases derivadas,
implementan la interfaz IFruitTree, pero la clase Pine no la implementa. Cualquier clase que implemente la
interfaz IFruitTree garantiza que un mtodo bearFruit es miembro de esa clase.
Type.registerNamespace("Demo.Trees");
Demo.Trees.IFruitTree = function() {}
Demo.Trees.IFruitTree.Prototype = {
bearFruit: function(){}
}
Demo.Trees.IFruitTree.registerInterface('Demo.Trees.IFruitTree');
Demo.Trees.Tree = function(name) {
this._name = name;
}
Demo.Trees.Tree.prototype = {
returnName: function() {
return this._name;
},
toStringCustom: function() {
return this.returnName();
},
makeLeaves: function() {}
}
Demo.Trees.Tree.registerClass('Demo.Trees.Tree');
Demo.Trees.FruitTree = function(name, description) {
Demo.Trees.FruitTree.initializeBase(this, [name]);
this._description = description;
}
Demo.Trees.FruitTree.prototype.bearFruit = function() {
return this._description;
}
Demo.Trees.FruitTree.registerClass('Demo.Trees.FruitTree', Demo.Trees.Tree,
Demo.Trees.IFruitTree);
Demo.Trees.Apple = function() {
Demo.Trees.Apple.initializeBase(this, ['Apple', 'red and crunchy']);
}
Demo.Trees.Apple.prototype = {
makeLeaves: function() {
alert('Medium-sized and desiduous');
},
toStringCustom: function() {
return 'FruitTree ' + Demo.Trees.Apple.callBaseMethod(this,
'toStringCustom');
}
}
Demo.Trees.Apple.registerClass('Demo.Trees.Apple', Demo.Trees.FruitTree);
Demo.Trees.GreenApple = function() {
Demo.Trees.GreenApple.initializeBase(this);
// You must set the _description feild after initializeBase
// or you will get the base value.
this._description = 'green and sour';
}
Demo.Trees.GreenApple.prototype.toStringCustom = function() {
return Demo.Trees.GreenApple.callBaseMethod(this, 'toStringCustom') + ' ... its
GreenApple!';
MCT: Luis Dueas
Pag. 14 de 35
}
Demo.Trees.GreenApple.registerClass('Demo.Trees.GreenApple', Demo.Trees.Apple);
Demo.Trees.Banana = function(description) {
Demo.Trees.Banana.initializeBase(this, ['Banana', 'yellow and squishy']);
}
Demo.Trees.Banana.prototype.makeLeaves = function() {
alert('Big and green');
}
Demo.Trees.Banana.registerClass('Demo.Trees.Banana', Demo.Trees.FruitTree);
Demo.Trees.Pine = function() {
Demo.Trees.Pine.initializeBase(this, ['Pine']);
}
Demo.Trees.Pine.prototype.makeLeaves = function() {
alert('Needles in clusters');
}
Demo.Trees.Pine.registerClass('Demo.Trees.Pine', Demo.Trees.Tree);
<head>
<title>Interface</title>
</head>
<body>
</form>
<h2>Interface</h2>
<p />
<div>
This file contains a Tree base class, and an IFruitTree interface.
Apple and Banana, two derived classes implement that interface,
whereas, Pine does not implement that interface.
<p />
</div>
<script type="text/javascript" src="Interface.js"></script>
<div>
<ul>
<li><a href="#" onclick="return OnTestNewClick()">
Object Creation</a></li>
<li><a href="#" onclick="return OnTestImplementsClick()">
Implements Check</a></li>
<li><a href="#" onclick="return OnTestInterfaceMethodClick()">
Call interface method</a></li>
</ul>
</div>
function OnTestNewClick() {
var apple = new Demo.Trees.Apple('Apple');
alert(apple.returnName());
apple.makeLeaves();
return false;
}
function OnTestImplementsClick() {
var apple = new Demo.Trees.Apple();
if (Demo.Trees.IFruitTree.isImplementedBy(apple)) {
alert('Apple implements IFruitTree');
}
else {
alert('Apple does not implement IFruitTree');
}
var pine = new Demo.Trees.Pine();
if (Demo.Trees.IFruitTree.isImplementedBy(pine)) {
alert('Pine implements IFruitTree');
MCT: Luis Dueas
Pag. 15 de 35
}
else {
alert('Pine does not implement IFruitTree');
}
return false;
}
function OnTestInterfaceMethodClick() {
var apple = new Demo.Trees.Apple();
ProcessTree(apple);
var pine = new Demo.Trees.Pine();
ProcessTree(pine);
var banana = new Demo.Trees.Banana();
ProcessTree(banana);
var g = new Demo.Trees.GreenApple();
ProcessTree(g);
return false;
}
function ProcessTree(tree) {
alert('Current Tree ' + tree.returnName());
alert(tree.toStringCustom());
if (Demo.Trees.IFruitTree.isImplementedBy(tree)) {
alert(tree.returnName() + ' implements IFruitTree; Fruit is ' +
tree.bearFruit());
}
}
</script>
</body>
</html>
Enumeraciones
Una enumeracin es una clase que contiene un conjunto de constantes enteras con nombre. El acceso a los valores,
como las propiedades, se realiza como en el ejemplo siguiente:
myObject.color = myColorEnum.red
Las enumeraciones proporcionan una alternativa fcilmente legible a las representaciones de enteros. En el ejemplo
siguiente se define una enumeracin de colores con nombre que representan valores hexadecimales.
// Define an enumeration type and register it.
Demo.Color = function(){};
Demo.Color.prototype =
{
Red:
0xFF0000,
Blue:
0x0000FF,
Green: 0x00FF00,
White: 0xFFFFFF
}
Demo.Color.registerEnum("Demo.Color");
<head>
<title>Enumeration</title>
</head>
<body>
</form>
<div>
<p>This example creates an Enumeration of colors
and applies them to page background.</p>
<select id="ColorPicker"
onchange="ChangeColor(options[selectedIndex].value)">
<option value="Red" label="Red" />
<option value="Blue" label="Blue" />
MCT: Luis Dueas
Pag. 16 de 35
<option value="Green" label="Green" />

<option value="White" label="White" />
</select>
</div>
<script type="text/javascript" src="Enumeration.js"></script>
function ChangeColor(value)
{
document.body.bgColor = eval("Demo.Color." + value + ";");
}
</script>
</body>
</html>
Reflexin
La reflexin es la capacidad de examinar la estructura y los componentes de un programa en tiempo de ejecucin. Las
API que implementan la reflexin son extensiones de la clase Type. Estos mtodos permiten recopilar informacin sobre
un objeto, por ejemplo, de quin hereda, si implementa una interfaz determinada y si es una instancia de una clase
determinada.
En el ejemplo siguiente se utilizan API de reflexin para probar la clase GreenApple del ejemplo de interfaz anterior.
<head>
<title>Reflection</title>
</head>
<body>
</form>
<div>
<p>This example tests the Demo.Trees.GreenApple class
against various reflection APIs.</p>
<input id="Button1" value="Check Type"
<input id="Button2" value="Check Inheritance"
<input id="Button3" value="Check Interface"
</div>
<script type="text/javascript" src="Interface.js"></script>
var g = new Demo.Trees.GreenApple();
var gt = Demo.Trees.GreenApple;
var a = new Array(
Demo.Trees.Apple,
Demo.Trees.Tree,
Demo.Trees.Pine,
Demo.Trees.IFruitTree,
Sys.IContainer);
{
for (var i = 0; i < a.length; i ++)
{
if (a[i].isInstanceOfType(g))
{
alert(gt.getName() + " is a " + a[i].getName() + ".");
}
else alert(gt.getName() + " is not a " + a[i].getName() + ".");
}
}
{
MCT: Luis Dueas
Pag. 17 de 35
{
if (gt.inheritsFrom(a[i]))
{
alert(gt.getName() + " inherits from " + a[i].getName() + ".");
}
else alert(gt.getName() + " does not inherit from " +
a[i].getName() + ".");
}
}
{
{
if (Type.isInterface(a[i]))
{
if (gt.implementsInterface(a[i]))
{
alert(gt.getName() + " implements the " + a[i].getName() +
" interface.");
}
else alert(gt.getName() + " does not implement the " +
a[i].getName() + " interface.");
}
else alert(a[i].getName() + " is not an interface.");
}
}
</script>
</body>
</html>
3. Utilizar las extensiones de los tipos base de JavaScript

Las extensiones de los tipos base de JavaScript proporcionan funcionalidad adicional para esos tipos.
La clase Sys.Debug proporciona funciones ampliadas de depuracin.
Si crea componentes basados en Microsoft Ajax Library, puede crear versiones de depuracin y lanzamiento de los
archivos de script que administra automticamente el control ScriptManager. Puede identificar las versiones de
depuracin de los archivos de script incluyendo ".debug" como parte del nombre de archivo del script. Por ejemplo, los
siguientes nombres de archivo de script identifican las versiones comerciales y de depuracin de un archivo:
MyScript.js (comercial)
MyScript.debug.js (depuracin)
4. Integrar scripts de cliente en aplicaciones web ASP.NET

Cualquier pgina web ASP.NET puede tener acceso a un archivo de script si hace referencia a l en un bloque script,
como en el ejemplo siguiente:
<script type="text/javascript" src="MyScript.js"></script>

Sin embargo, un script invocado de esta manera no puede participar en la representacin parcial de la pgina ni tener
acceso a ciertos componentes de Microsoft Ajax Library. Para que un archivo de script est disponible para la
representacin parcial de la pgina en una aplicacin web ASP.NET habilitada para AJAX, el script se debe registrar con
el control ScriptManager en la pgina. Para registrar un archivo de script, cree un objeto ScriptReference que seale al
archivo en cuestin y que lo agregue a la coleccin Scripts. En el siguiente ejemplo se muestra cmo realizar esta accin
en el marcado:
<asp:ScriptManager ID="SMgr" runat="server">
<Scripts>
<asp:ScriptReference path="MyScript.js" />
</Scripts>
</asp:ScriptManager>
Para que los archivos de script sean correctamente procesados por el control ScriptManager, cada nombre de archivo
debe incluir una llamada al mtodo Sys.Application.notifyScriptLoaded al final del archivo. Esta llamada notifica a la
aplicacin que el archivo se ha terminado de cargar. En el ejemplo siguiente se muestra el cdigo que hay que usar con
este fin:

Tambin puede incrustar archivos .js como recursos en ensamblados de cdigo administrado. (Puede hacerlo si crea un
control de servidor ASP.NET con funcionalidad AJAX que se implementa en el script de cliente.) Si el script se incrusta en
un ensamblado, no tiene que incluir una instruccin de notificacin en el script. Tampoco tiene que especificar un
MCT: Luis Dueas
Pag. 18 de 35

atributo path en la referencia de script. Sin embargo, debe proporcionar el nombre del ensamblado sin la extensin de
nombre de archivo, como se muestra en el ejemplo siguiente:
<Scripts>
<asp:ScriptReference Name="MyScript.js" Assembly="MyScriptAssembly"/>
</Scripts>
Nota
Este escenario no es habitual para los desarrolladores de pginas, porque la mayora de los controles con
bibliotecas de scripts incrustadas hacen referencia a sus scripts internamente.
Los scripts tambin se pueden registrar mediante programacin creando referencias de script en el cdigo y, a
continuacin, agregndolos a la coleccin Scripts.
Puede registrar los scripts necesarios para las actualizaciones parciales de la pgina utilizando los mtodos de registro
del control ScriptManager. Puede utilizar estos mtodos de las siguientes maneras:
Para generar el script de cliente en el cdigo, genere un bloque de script como una cadena y pselo al
mtodo RegisterClientScriptBlock.
Para agregar archivos de script independientes que no tienen ninguna dependencia de Microsoft Ajax Library,
utilice el mtodo RegisterClientScriptInclude.
Para agregar archivos de script que se incrustan en un ensamblado, utilice el mtodo RegisterClient
ScriptInclude.
Nota
Los scripts que se registran con estos mtodos no admiten la localizacin.
Los bloques de scripts o scripts insertados que vaya a registrar deben estar dentro del elemento form de la pgina. De
lo contrario, el script no se registra con el control ScriptManager y no tiene acceso a la funcionalidad AJAX de ASP.NET.
1.3. Cmo: Agregar eventos de script de cliente a los controles

de servidor web ASP.NET
El script de cliente se puede agregar a los controles de una pgina Web ASP.NET mediante declaracin, del mismo
modo que se agregaran a elementos HTML.Opcionalmente, puede agregar eventos de script de cliente a un control de
servidor Web ASP.NET mediante programacin, lo que resulta til cuando el evento o el cdigo depende de informacin
que slo est disponible en tiempo de ejecucin.
Nota
Puede hacer referencia a los controles mediante el identificador en el script de cliente.
Para agregar un evento onclick de script de cliente a los botones es necesario seguir un procedimiento especial, que se
explica ms adelante en este tema.
Nota
La compatibilidad con el script de cliente depende del explorador. Por ejemplo, Microsoft Internet Explorer,
Mozilla Firefox y los exploradores para dispositivos mviles pueden proporcionar tipos de compatibilidad
distintos para el script de cliente.
Para agregar un controlador de eventos de cliente a un control de servidor ASP.NET

mediante declaracin
En el formato del control, agregue un atributo para el evento, por ejemplo, onmouseover u onkeyup. Para el
valor del atributo, agregue el script de cliente que desea ejecutar.
Nota
Agregue siempre un punto y coma (;) a continuacin del script de cliente en el atributo. Esto es
necesario para que, si ASP.NET genera el script de cliente para el control (por ejemplo, si la
propiedad AutoPostBack del control est establecida en true), el cdigo se ejecute en primer lugar.
Los pares de atributo y valor del formato del control que no se corresponden con las propiedades de ste se
pasan al explorador tal y como estn.
MCT: Luis Dueas
Pag. 19 de 35

En el ejemplo de cdigo siguiente se muestra una pgina web ASP.NET que incluye un script de cliente que
cambia el color del texto de un botn cuando el usuario pasa el puntero por encima de l.
<%@ Page Language="C#" %>
<html>
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
var previousColor;
function MakeRed()
{
previousColor = window.event.srcElement.style.color;
window.event.srcElement.style.color = "#FF0000";
}
function RestoreColor()
{
window.event.srcElement.style.color = previousColor;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:button id="Button1" runat="server" text="Button1"
onmouseover="MakeRed();" onmouseout="RestoreColor();" />
</form>
</body>
</html>
Para agregar un controlador de eventos de cliente a un control de servidor ASP.NET

mediante programacin
En el evento Init o Load de la pgina, llame al mtodo Add de la coleccin Attributes del control.
En el ejemplo de cdigo siguiente se muestra cmo agregar un script de cliente a un control TextBox. El script
de cliente muestra la longitud del texto en el control TextBox. El script presupone que la pgina contiene un
protected void Page_Load(object sender, EventArgs e)
{
String displayControlName = "spanCounter";
TextBox1.Attributes.Add("onkeyup", displayControlName +
".innerText=this.value.length;");
}
Para agregar un evento onclick de cliente a un control de botn
En el control de botn (controles Button, LinkButton e ImageButton), establezca la propiedad OnClientClick

en el script de cliente que se debe ejecutar.
En el ejemplo de cdigo siguiente se muestra cmo agregar un evento Click de script de cliente a un
control Button.
<script runat="server">
protected void Button1_Click(Object sender, EventArgs e)
{
Label1.Text = "Server click handler called.";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<asp:Button ID="Button1" Runat="server" OnClick="Button1_Click"
OnClientClick="return confirm('Ready to submit.');"
Text="Test Client Click" />
<br />
<asp:Label ID="Label1" Runat="server" text="" />
</form>
</body>
</html>
MCT: Luis Dueas
Pag. 20 de 35
1.4. Cmo: Agregar script de cliente a las pginas Web ASP.NET

dinmicamente
El uso de cdigo del servidor permite agregar script de cliente a una pgina. La creacin de script de cliente en el cdigo
del servidor es til cuando el contenido de dicho script depende de informacin que nicamente est disponible en
tiempo de ejecucin. La adicin de script de cliente a la pgina de forma dinmica tambin resulta til cuando se desea
que dicho script se ejecute en las situaciones siguientes:
Cuando la pgina ha terminado de cargarse

Cuando los usuarios envan la pgina
Nota
Tambin puede agregar eventos de cliente, como onmouseover y onkeyup, a ciertos controles.
Para agregar script de cliente a una pgina Web ASP.NET dinmicamente
En el cdigo del servidor, llame a uno de los mtodos mostrados en la tabla siguiente.
Mtodo
Descripcin
RegisterClientScriptBlock
Agrega un bloque de script a la parte superior de la pgina. Cree el

script como una cadena y, a continuacin, pselo al mtodo, que lo
agregar a la pgina. Puede utilizar este mtodo para insertar
cualquier script en la pgina. Tenga en cuenta que el script se podra
representar en la pgina antes de que terminen todos los elementos;
por consiguiente, es posible que no pueda hacer referencia a todos
los elementos de la pgina desde el script.
RegisterClientScriptInclude
Similar al mtodo RegisterClientScriptBlock, pero agrega un

bloque de script que hace referencia a un archivo .js externo. El
archivo de inclusin se agrega antes que cualquier script agregado
dinmicamente; por consiguiente, es posible que no pueda hacer
referencia a algunos de los elementos de la pgina.
RegisterStartupScript
Agrega un bloque de script a la pgina que se ejecuta cuando finaliza

la carga de sta, pero antes de que se produzca el evento onload. El
script no se suele crear como un controlador de eventos o una
funcin; generalmente slo incluye las instrucciones que se deben
ejecutar una sola vez.
RegisterOnSubmitStatement
Agrega un script que se ejecuta en respuesta al evento onsubmit de

la pgina. El script se ejecuta antes de que se enve la pgina y ofrece
la oportunidad de cancelar el envo.
El siguiente ejemplo de cdigo muestra cmo agregar script de cliente a una pgina que se ejecuta cuando el
usuario hace clic en un botn. El botn tiene un identificador de ConfirmSubmit y devuelve la pgina al
servidor. El script de cliente muestra una ventana emergente que solicita al usuario que confirme la devolucin
de datos.
protected void Page_Load(Object sender, EventArgs e)
{
String scriptText = "return confirm('Do you want to submit the page?')";
ClientScript.RegisterOnSubmitStatement(this.GetType(), "ConfirmSubmit",
scriptText);
}
El siguiente ejemplo de cdigo muestra cmo agregar a la pgina cdigo de cliente generado
dinmicamente. El cdigo comprueba si est activada una casilla que tiene un identificador
de checkDisplayCount. En caso afirmativo, el cdigo realiza las siguientes tareas:
o Crea una funcin de script de cliente que utiliza un elemento span para mostrar el recuento de
caracteres en un control TextBox denominado TextBox1.
o Agrega un evento de cliente al control TextBox.
o Genera el elemento span.
El cdigo supone que la pgina contiene una casilla denominada checkDisplayCount con su
propiedad AutoPostBack establecida en true y un control PlaceHolder denominado PlaceHolder1.
MCT: Luis Dueas
Pag. 21 de 35

{
if(checkDisplayCount.Checked)
{
String scriptText = "";
scriptText += "function DisplayCharCount(){";
scriptText += "
spanCounter.innerText = " +
" document.forms[0].TextBox1.value.length";
scriptText += "}";
ClientScript.RegisterClientScriptBlock(this.GetType(),
"CounterScript", scriptText, true);
TextBox1.Attributes.Add("onkeyup", "DisplayCharCount()");
LiteralControl spanLiteral = new
LiteralControl("<span id=\"spanCounter\"></span>");
PlaceHolder1.Controls.Add(spanLiteral);
}
}
1.5. Asignar referencias de script de forma dinmica

En la mayora de los escenarios, la manera ms fcil de agregar un archivo de script a una pgina ASP.NET es con
marcado, como en el ejemplo siguiente:
<Scripts>
<asp:ScriptReference Path="./Script.js" />
</Scripts>
Sin embargo, tambin es posible agregar dinmicamente referencias de script. Los desarrolladores de pginas pueden
hacer esto para tener ms control sobre cmo se agrega un script. Por ejemplo, podran agregar scripts dinmicamente
para ayudar a conservar los recursos de memoria, no cargando una biblioteca de scripts grande a menos que sea
necesario. O bien, podran cargar versiones de scripts diferentes para tipos de usuarios diferentes. Los desarrolladores
de controles agregan scripts dinmicamente al crear controles de script o controles extensores para dejar disponibles
los recursos del script automticamente para la pgina que hospeda el control.
Las referencias de script pueden especificar archivos de script o scripts incrustados como recursos en ensamblados. Los
scripts se pueden encontrar en las versiones de depuracin y comerciales. El siguiente procedimiento muestra cmo
asignar una referencia de script a una pgina en cada una de estas situaciones.
Nota
Todos los archivos de script que se van a registrar con el control ScriptManager deben llamar al
mtodo notifyScriptLoaded para notificar a la aplicacin que el script ha terminado de cargarse. Los scripts
que se basan en ensamblados no deberan llamar a este mtodo en la mayora de los casos.
Para agregar dinmicamente una referencia de script a una pgina

1.
2.
3.
Si no conoce el identificador del elemento <asp:ScriptManager> de la pgina, llame al mtodo

ScriptManagerGetCurrent() del control ScriptManager para obtener la instancia actual del control.
Compruebe null en caso de que no haya ningn control ScriptManager en la pgina. Si sabe que hay un
elemento<asp:ScriptManager> en la pgina y conoce su valor ID, puede omitir este paso.
El ejemplo siguiente muestra cmo comprobar la existencia de un control ScriptManager en una pgina y, a
continuacin, obtiene la instancia actual o crea una nueva.
// If there is a ScriptManager on the page, use it.
// If not, throw an exception.
ScriptManager Smgr = ScriptManager.GetCurrent(Page);
if (Smgr == null) throw new Exception("ScriptManager not found.");
Crear un objeto ScriptReference.
ScriptReference SRef = new ScriptReference();
Para los scripts basados en archivos, si sabe que la propiedad ScriptPath del control ScriptManager est
establecida en la ubicacin correcta para el archivo de script, establezca la propiedad Name de la
instancia ScriptReference en el nombre del archivo de script. En caso contrario, establezca la propiedad Path
del objeto ScriptReference en la direccin URL absoluta, relativa o relativa a la aplicacin del archivo de script
que desea agregar.
// If you know that Smgr.ScriptPath is correct...
SRef.Name = "Script.js";
// Or, to specify an app-relative path...
MCT: Luis Dueas
Pag. 22 de 35
4.
5.
SRef.Path = "~/Scripts/Script.js";
Si el script forma parte de un ensamblado, establezca las propiedades Name y Assembly de la instancia
ScriptReference.
SRef.Name = "Script.js";
SRef.Assembly = "ScriptAssembly";
Especifique si desea ejecutar versiones de depuracin o de lanzamiento del script. Para establecer este modo
para todos los scripts de la pgina, establezca la propiedad ScriptMode del control ScriptManager. Para
establecer el modo depuracin para un script individual, establezca la propiedad ScriptMode del
objeto ScriptReference.
El ejemplo siguiente muestra ambas opciones.
// To set ScriptMode for all scripts on the page...
Smgr.ScriptMode = ScriptMode.Release;
//Or, to set the ScriptMode just for the one script...
SRef.ScriptMode = ScriptMode.Debug;
//If they conflict, the setting on the ScriptReference wins.
// To set ScriptMode for all scripts on the page...
Smgr.ScriptMode = ScriptMode.Release;
//Or, to set the ScriptMode just for the one script...
SRef.ScriptMode = ScriptMode.Debug;
//If they conflict, the setting on the ScriptReference wins.
Nota
Si no est establecida la propiedad Path del objeto ScriptReference, la propiedad ScriptMode del
control ScriptManager se establece en Release de forma predeterminada. Si est establecida la
propiedad Path del objeto ScriptReference, el control ScriptManager buscar los scripts de depuracin y
de lanzamiento, a menos que su propiedad ScriptMode est establecida en un modo concreto.
6.
Agregue el objeto ScriptReference a la coleccin Scripts del control ScriptManager.

Smgr.Scripts.Add(SRef);
1.6. Tutorial: Incrustar un archivo JavaScript como recurso en un

ensamblado
En este tutorial, se incluir un archivo JavaScript como un recurso incrustado en un ensamblado. Un archivo JavaScript se
incrusta si tiene un componente de script de cliente que se debe distribuir con un ensamblado que haya creado. Por
ejemplo, podra crear un control de servidor ASP.NET personalizado que utilice archivos JavaScript para implementar la
funcionalidad de AJAX para ASP.NET. Puede incrustar los archivos JavaScript en el ensamblado y, a continuacin, se
puede hacer referencia a ellos desde una aplicacin web que registre el ensamblado.
Requisitos previos
Para implementar los procedimientos de este tutorial necesitar:
Microsoft Visual Studio 2005.
Nota
No puede usar Visual Web Developer 2005 Express Edition, porque Visual Web Developer Express no
permite crear el proyecto de bibliotecas de clase que precisa el tutorial.
Crear un ensamblado que contiene un archivo JavaScript incrustado

Para comenzar, crear un archivo que contiene el cdigo JavaScript que desea incrustar en el ensamblado.
Para incrustar un archivo de script de cliente en un ensamblado

1.
2.
3.
4.
En Visual Studio, cree un nuevo proyecto de bibliotecas de clase denominado SampleControl.

Agregue al proyecto referencias a los
ensamblados System.Web, System.Drawing y System.Web.Extensions.
Agregue un nuevo archivo JScript denominado UpdatePanelAnimation.js al proyecto.
Agregue el siguiente cdigo al archivo UpdatePanelAnimation.js:
BorderAnimation = function(color) {
this._color = color;
}
BorderAnimation.prototype = {
animate: function(panelElement) {
var s = panelElement.style;
MCT: Luis Dueas
Pag. 23 de 35
s.borderWidth = '2px';
s.borderColor = this._color;
s.borderStyle = 'solid';
window.setTimeout(
function() {{
s.borderWidth = 0;
}},
500);
5.
6.
7.
}
}
El cdigo contiene una funcin JavaScript que muestra temporalmente un borde basado en el color alrededor
de un control UpdatePanel.
En la ventana Propiedades del archivo UpdatePanelAnimation.js, establezca Accin de generacin en
Recurso incrustado.
Agregue un archivo de clase denominado al proyecto.

Reemplace el cdigo del archivo CustomControl por el siguiente cdigo:
using System;
using System.Drawing;
using System.Web.UI;
using System.Web;
using System.Globalization;
namespace SampleControl
{
public class UpdatePanelAnimationWithClientResource : Control
{
private string _updatePanelID;
private Color _borderColor;
private Boolean _animate;
public Color BorderColor
{
get
{
return _borderColor;
}
set
{
_borderColor = value;
}
}
public string UpdatePanelID
{
get
{
return _updatePanelID;
}
set
{
_updatePanelID = value;
}
}
public Boolean Animate
{
get
{
return _animate;
}
set
MCT: Luis Dueas
Pag. 24 de 35
{
_animate = value;
}
}
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
if (Animate)
{
UpdatePanel updatePanel = (UpdatePanel)
FindControl(UpdatePanelID);
string script = String.Format(
CultureInfo.InvariantCulture,
@"Sys.Application.add_load(function(sender, args)
{{var {0}_borderAnimation = new BorderAnimation('{1}');
var panelElement = document.getElementById('{0}');
if (args.get_isPartialLoad()) {{
{0}_borderAnimation.animate(panelElement);
}}
}})",
updatePanel.ClientID,
ColorTranslator.ToHtml(BorderColor));
ScriptManager.RegisterStartupScript(this,
typeof(UpdatePanelAnimationWithClientResource),
ClientID, script, true);
}
}
8.
}
}
Esta clase contiene las propiedades para personalizar el borde que se muestra alrededor del control
UpdatePanel. El cdigo tambin registra cdigo JavaScript para utilizarlo en una pgina web. El cdigo crea
un controlador para el evento load del objeto Sys.Application. Se llama a la funcin animate del archivo
UpdatePanelAnimation.js cuando se procesa una actualizacin parcial de la pgina.
Agregue la siguiente lnea al archivo AssemblyInfo.
[assembly: System.Web.UI.WebResource("SampleControl.UpdatePanelAnimation.js",
"application/x-javascript")]
Nota
El archivo AssemblyInfo.vb est en el nodo My Project del Explorador de soluciones. Si no ve ningn
archivo en el nodo My Project, en el menProyecto, haga clic en Mostrar todos los archivos. El
archivo AssemblyInfo.cs est en el nodo Propiedades del Explorador de soluciones.
9.
La definicin WebResource debe incluir el espacio de nombres predeterminado del ensamblado y el nombre
del archivo .js.
Compile el proyecto.
Cuando finalice la compilacin, tendr un ensamblado denominado SampleControl.dll. El cdigo JavaScript
del archivo UpdatePanelAnimation.js se incrusta en este ensamblado como un recurso.
Hacer referencia al archivo de script incrustado

Ahora puede hacer referencia al archivo de script incrustado en una aplicacin web.
Nota
Aunque puede crear el proyecto de bibliotecas de clase y el sitio web en la misma solucin de Visual Studio, en
este tutorial no se supone que se haga esto. Si los proyectos se encuentran en soluciones independientes, se
emula la forma en que un desarrollador de controles y un desarrollador de pginas trabajaran por separado. Sin
embargo, por mayor comodidad, puede crear ambos proyectos en la misma solucin y realizar pequeos ajustes
en los procedimientos del tutorial.
Para hacer referencia al archivo de script incrustado

1.
2.
En Visual Studio, cree un nuevo sitio web habilitado para AJAX.

Cree una carpeta Bin en el directorio raz del sitio web.
MCT: Luis Dueas
Pag. 25 de 35

3.
Copie SampleControl.dll del directorio Bin\Debug o Bin\Release del proyecto de bibliotecas de clase a la
carpeta Bin del sitio web.
Nota
Si cre el proyecto de bibliotecas de clase y el sitio web en la misma solucin de Visual Studio, puede
agregar una referencia del proyecto de bibliotecas de clase al sitio web.
4.
5.
Reemplace el cdigo del archivo Default.aspx por el cdigo siguiente:

<%@ Register TagPrefix="Samples" Namespace="SampleControl"
Assembly="SampleControl" %>
<script runat="server">
</script>
<head runat="server">
<title>ScriptReference</title>
</head>
<body>
<div>
<asp:ScriptManager ID="ScriptManager1"
EnablePartialRendering="True" runat="server">
<Scripts>
<asp:ScriptReference Assembly="SampleControl"
Name="SampleControl.UpdatePanelAnimation.js" />
</Scripts>
<Samples:UpdatePanelAnimationWithClientResource
ID="UpdatePanelAnimator1" BorderColor="Green"
Animate="true" UpdatePanelID="UpdatePanel1"
runat="server" >
</Samples:UpdatePanelAnimationWithClientResource>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<asp:Calendar ID="Calendar2" runat="server">
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Este cdigo incluye un control ScriptReference que hace referencia al ensamblado y al nombre del archivo .js
que cre en el procedimiento anterior. El nombre del archivo .js incluye un prefijo que hace referencia al
espacio de nombres predeterminado del ensamblado.
Ejecute el proyecto y, en la pgina, haga clic en las fechas del calendario.
Cada vez que haga clic en una fecha del calendario, ver un borde verde alrededor del control UpdatePanel.
2. Implementar mediante programacin devoluciones de

llamada de cliente sin Postbacks en pginas web de ASP.NET
En el modelo predeterminado para las pginas Web ASP.NET, el usuario interacta con una pgina y hace clic en un
botn o realiza alguna otra accin que da como resultado una devolucin de datos. La pgina y sus controles se vuelven
a crear, se ejecuta el cdigo de la pgina en el servidor y se representa una nueva versin de la pgina en el
explorador. Sin embargo, en algunas situaciones, es til ejecutar cdigo del servidor desde el cliente sin realizar una
devolucin de datos. Si el script de cliente de la pgina incluye informacin de estado (por ejemplo, valores de variables
locales), enviar la pgina y obtener una nueva copia ocasiona la destruccin de dicho estado. Adems, las devoluciones
de datos de pgina producen una sobrecarga de procesamiento que puede disminuir el rendimiento y obligar al usuario
a esperar a que la pgina se procese y se vuelva a crear.
Para evitar la prdida del estado del cliente y no incurrir en la sobrecarga de procesamiento que supone enviar los datos
al servidor y esperar a que los devuelva tras procesarlos, puede agregar cdigo a una pgina Web ASP.NET para que
MCT: Luis Dueas
Pag. 26 de 35

pueda realizar devoluciones de llamada del cliente. En una devolucin de llamada del cliente, una funcin de script de
cliente enva una solicitud a una pgina web ASP.NET. La pgina web ejecuta una versin modificada de su ciclo de vida
normal. Se inicia la pgina y se crean sus controles y otros miembros; a continuacin, se invoca un mtodo
marcado. Dicho mtodo realiza el procesamiento especificado en el cdigo y, a continuacin, devuelve al explorador un
valor que otra funcin de script de cliente puede leer. A lo largo de este proceso, la pgina est activa en el explorador.
Varios controles de servidor web pueden usar devoluciones de llamada del cliente. Por ejemplo, el
control TreeView utiliza devoluciones de llamada del cliente para implementar su funcionalidad de rellenar a peticin del
usuario.
Hay varias opciones para automatizar las devoluciones de llamada del cliente en una pgina web ASP.NET. Las
caractersticas de AJAX en ASP.NET como el control de servidor UpdatePanel pueden automatizar actualizaciones
parciales de pgina asincrnicas y la caracterstica de comunicacin del servicio Web puede automatizar llamadas
asincrnicas al servicio Web.
Tambin puede escribir su propio script de cliente para implementar directamente las devoluciones de llamada del
cliente. En este tema se explica cmo implementar sus propias devoluciones de llamada de cliente para la comunicacin
asincrnica entre cliente y servidor.
Componentes de las devoluciones de llamada del cliente

La creacin de una pgina ASP.NET que implemente devoluciones de llamada del cliente mediante programacin es una
operacin similar a la creacin de cualquier pgina ASP.NET, excepto por unas pocas diferencias. El cdigo de servidor
de la pgina debe realizar las tareas siguientes:
Implementar la interfaz ICallbackEventHandler. Puede agregar esta declaracin de interfaz a cualquier pgina
Web ASP.NET.
Proporcione una implementacin para el mtodo RaiseCallbackEvent. Este mtodo se invocar para realizar la
devolucin de llamada en el servidor.
Proporcione una implementacin para el mtodo GetCallbackResult. Este mtodo devolver el resultado de la
devolucin de llamada al cliente.
Adems, la pgina debe contener tres funciones de script de cliente que realicen las acciones siguientes:
Una funcin que llama a un mtodo auxiliar que realiza la solicitud real al servidor. En esta funcin, puede
incluir lgica personalizada para preparar en primer lugar los argumentos de evento. Puede enviar una cadena
como parmetro al controlador de eventos de servidor de devolucin de llamadas de cliente.
Otra funcin que recibe (y a la que llama) el resultado del cdigo de servidor que ha procesado el evento de
devolucin de llamada y acepta una cadena que representa los resultados. Esto se conoce como la funcin de
devolucin de llamada del cliente.
Una tercera funcin es la funcin auxiliar que realiza la solicitud real al servidor. ASP.NET genera
automticamente esta funcin cuando se genera una referencia a ella mediante el mtodo GetCallbackEvent
Reference en cdigo de servidor.
Tanto las devoluciones de llamada del cliente como las devoluciones de datos son solicitudes para la pgina de
origen. Por tanto, ambas devoluciones se graban en los registros del servidor web como una solicitud de pgina.
Implementar las interfaces necesarias en cdigo de servidor

Para ejecutar cdigo de servidor desde script de cliente sin que se realice ninguna devolucin de datos, debe
implementar varias interfaces en el cdigo de servidor.
Declarar la interfaz ICallbackEventHandler

Puede declarar la interfaz ICallbackEventHandler como parte de la declaracin de clase para la pgina. Si crea una
pgina de cdigo subyacente, puede declarar la interfaz utilizando una sintaxis como la siguiente.
public partial class CallBack_DB_aspx :
System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
Si trabaja en un control de usuario o de pgina de un solo archivo, puede agregar la declaracin mediante una
directiva @ Implements en la pgina, como en los ejemplos de cdigo siguientes:
<%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>
Nota
Para el nombre de la interfaz se distingue entre maysculas y minsculas.
Crear un mtodo de devolucin de llamada del servidor

En el cdigo del servidor, debe crear un mtodo que implemente el mtodo RaiseCallbackEvent y un mtodo que
implemente el mtodo GetCallbackResult. El mtodo RaiseCallbackEvent toma un nico argumento de cadena en lugar
de los dos argumentos que se suelen utilizar con los controladores de eventos. Parte de este mtodo podra ser similar
al siguiente ejemplo:
public void RaiseCallbackEvent(String eventArgument)
MCT: Luis Dueas
Pag. 27 de 35
{
}
El mtodo GetCallbackResult no toma ningn argumento y devuelve una cadena. Parte de este mtodo podra ser
similar al siguiente ejemplo:
public string GetCallbackResult()
{
return aStringValue;
}
Crear funciones de script de cliente

Debe agregar funciones de script de cliente a la pgina para realizar dos funciones: enviar la devolucin de llamada a la
pgina del servidor y recibir los resultados. Ambas funciones de script de cliente estn escritas en ECMAScript
(JavaScript).
Enviar la devolucin de llamada

La funcin utilizada para enviar la devolucin de llamada se genera en el cdigo del servidor. La devolucin de llamada
real la realiza una funcin de biblioteca que est disponible para cualquier pgina que implemente la
interfaz ICallbackEventHandler. Para obtener una referencia a la funcin de biblioteca, llame al mtodo
GetCallbackEventReference de la pgina, al que se puede obtener acceso a travs de la propiedad ClientScript de la
pgina. A continuacin, cree dinmicamente una funcin de cliente que incluya una llamada al valor que devuelve el
mtodo GetCallbackEventReference. Pase a dicho mtodo una referencia a la pgina (this en C# o Me en Visual Basic),
el nombre del argumento que usar para pasar los datos, el nombre de la funcin de script de cliente que recibir los
datos de la devolucin de llamada y un argumento que pasa el contexto deseado.
Cuando haya creado la funcin, insrtela en la pgina llamando al mtodo RegisterClientScriptBlock.
En el ejemplo siguiente se muestra cmo crear dinmicamente una funcin denominada CallServer que invoca la
devolucin de llamada.
{
ClientScriptManager cm = Page.ClientScript;
String cbReference = cm.GetCallbackEventReference(this, "arg",
"ReceiveServerData", "");
String callbackScript = "function CallServer(arg, context) {" +
cbReference + "; }";
cm.RegisterClientScriptBlock(this.GetType(),
"CallServer", callbackScript, true);
}
Los nombres de los argumentos aceptados por la funcin que est generando deben coincidir con los nombres de los
valores pasados al mtodo GetCallbackEventReference.
En el ejemplo siguiente se muestra marcado que se puede utilizar para invocar la devolucin de llamada y procesar su
valor devuelto:
<input type="button" value="Callback" onclick="CallServer(1, alert('Callback'))"/>
<br />
<span id="Message"></span>
Recibir la devolucin de llamada

Puede escribir una funcin de cliente que reciba las devoluciones de llamada de forma esttica en la pgina. El nombre
de la funcin debe coincidir con el nombre pasado en la llamada al mtodo GetCallbackEventReference. La funcin
receptora acepta dos valores de cadena: uno para el valor devuelto y un segundo valor opcional para el valor de
contexto que se devuelve del servidor.
La funcin podra ser similar al siguiente ejemplo:
function ReceiveServerData(arg, context)
{
Message.innerText = 'Processed callback.';
}
</script>
2.1. Cmo: Implementar devoluciones de llamada en pginas

Web ASP.NET
En una devolucin de llamada de cliente, una funcin de script de cliente enva una solicitud a la pgina web ASP.NET,
que, a continuacin, ejecuta una versin abreviada de su ciclo de vida normal para procesar la devolucin de
llamada. Para garantizar que los eventos de devolucin de llamada se originan en la interfaz de usuario (UI) prevista, es
posible validar las devoluciones de llamada. Para la validacin de una devolucin de llamada, se registra un evento para
MCT: Luis Dueas
Pag. 28 de 35

su validacin durante la representacin de la pgina Web y, despus, durante la devolucin de llamada, se valida dicho
evento.
Para implementar la interfaz ICallBackEventHandler

1.
Para un control de usuario o una pgina de un solo archivo, implemente la interfaz ICallbackEventHandler
utilizando una directiva @ Implements en la pgina, como se muestra en el ejemplo siguiente.
<%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>
Nota
Si utiliza un modelo de pgina de cdigo subyacente, implemente la interfaz ICallbackEventHandler
para la clase parcial.
2.
3.
Implemente el mtodo RaiseCallbackEvent de la interfaz ICallbackEventHandler. El mtodo RaiseCallbackEvent

utiliza un nico argumento que representa los argumentos del evento, como se muestra en el ejemplo
siguiente.
{
}
Implemente el mtodo GetCallbackResult de la interfaz ICallbackEventHandler. El mtodo GetCallbackResult
no utiliza ningn argumento y devuelve una cadena que representa el resultado de la devolucin de
llamada. En el ejemplo siguiente, se devuelve una cadena denominada returnValue.
public String GetCallbackResult()
{
return returnValue;
}
Para registrar la devolucin de llamada para la validacin del evento
Reemplace el mtodo Render de la clase Page y utilice el mtodo RegisterForEventValidation de la

clase ClientScriptManager para registrar un evento para su validacin. Puede obtener una referencia a la
clase ClientScriptManager mediante la propiedad ClientScript de la clase Page. En el ejemplo siguiente, se
registra una devolucin de llamada denominada Callback1 para la validacin del evento.
protected override void Render(HtmlTextWriter writer)
{
Page.ClientScript.RegisterForEventValidation("ClientCallback1");
base.Render(writer);
}
Para validar la devolucin de llamada y devolver el resultado de la devolucin de llamada
En el mtodo RaiseCallbackEvent, utilice el mtodo ValidateEvent de la clase ClientScriptManager para validar

el evento. Utilice la misma firma de mtodo que utiliz cuando registr el evento para su validacin. En el
ejemplo siguiente, se usa la firma de mtodo que utiliza un solo argumento.
{
try
{
Page.ClientScript.ValidateEvent("ClientCallback1");
// Callback logic goes here.
returnValue = "callback result";
}
catch
{
// Failed callback validation logic.
}
}
Si la validacin es correcta, el cdigo debera continuar con la lgica del evento de devolucin de
llamada. Una vez que finaliza el mtodo RaiseCallbackEvent, se invoca el mtodo GetCallbackResult para
devolver el resultado de la devolucin de llamada como una cadena a una funcin de script de cliente.
2.2. Ejemplo de implementacin de devolucin de llamada de

cliente (C#)
MCT: Luis Dueas
Pag. 29 de 35

Muestra una pgina Web ASP.NET que implementa una devolucin de llamada del cliente.
Ejemplo
Descripcin
El ejemplo de cdigo siguiente se compone de dos partes. La primera parte muestra una pgina Web ASP.NET (la
pgina .aspx). La segunda parte muestra el archivo de cdigo subyacente correspondiente (el archivo .aspx.cs).
Nota
El ejemplo requiere que la pgina se denomine ClientCallback.aspx y el archivo de cdigo subyacente se
denomine ClientCallback.aspx.cs.
Cdigo
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="ClientCallback.aspx.cs" Inherits="ClientCallback" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head id="Head1" runat="server">
<title>Client Callback Example</title>
<script type="text/ecmascript">
function LookUpStock()
{
var lb = document.getElementById("ListBox1");
var product = lb.options[lb.selectedIndex].text;
CallServer(product, "");
}
function ReceiveServerData(rValue)
{
document.getElementById("ResultsSpan").innerHTML = rValue;
}
</script>
</head>
<body>
<div>
<asp:ListBox ID="ListBox1" Runat="server"></asp:ListBox>
<br />
<br />
<button type="Button" onclick="LookUpStock()">Look Up Stock</button>
<br />
<br />
Items in stock: <span id="ResultsSpan" runat="server"></span>
<br />
</div>
</form>
</body>
</html>
using
using
using
using
using
using
using
using
using
using
System;
System.Data;
System.Configuration;
System.Collections;
System.Web;
System.Web.Security;
System.Web.UI;
System.Web.UI.WebControls;
System.Web.UI.WebControls.WebParts;
System.Web.UI.HtmlControls;
public partial class ClientCallback : System.Web.UI.Page,

System.Web.UI.ICallbackEventHandler
{
protected System.Collections.Specialized.ListDictionary catalog;
MCT: Luis Dueas
Pag. 30 de 35
protected String returnValue;

{
String cbReference = Page.ClientScript.GetCallbackEventReference
(this,"arg", "ReceiveServerData", "context");
String callbackScript;
callbackScript = "function CallServer(arg, context)" +
"{ " + cbReference + ";}";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
catalog = new System.Collections.Specialized.ListDictionary();
catalog.Add("monitor", 12);
catalog.Add("laptop", 10);
catalog.Add("keyboard", 23);
catalog.Add("mouse", 17);
ListBox1.DataSource = catalog;
ListBox1.DataTextField = "key";
ListBox1.DataBind();
}
{
if (catalog[eventArgument] == null)
{
returnValue = "-1";
}
else
{
returnValue = catalog[eventArgument].ToString();
}
}
{
return returnValue;
}
}
Comentarios
La pgina Web emula una bsqueda de base de datos para determinar el nmero de elementos disponibles, o en
existencias, para una serie de productos (monitores, teclados, etc.). Para simplificar este ejemplo de cdigo, la base de
datos est representada por una lista de diccionario que contiene un pequeo grupo de elementos. Para cada elemento
de la tabla, la clave es el nombre del elemento (por ejemplo, monitor) y el valor es el nmero de elementos que hay en
existencias. En una aplicacin de produccin, se utilizara una base de datos.
Cuando se ejecuta la pgina, se enlaza un control ListBox a la tabla hash para que el control ListBox muestre la lista de
productos. La pgina tambin contiene un elemento button (no un control de servidor Web Button), cuyo
evento onclick est enlazado a una funcin de cliente denominada LookUpStock. Cuando los usuarios hacen clic en el
botn, ste ejecuta la funcin LookUpStock, que obtiene la seleccin actual del cuadro de lista y, a continuacin, realiza
la devolucin de llamada del cliente llamando a la funcin CallServer.
La pgina de cdigo subyacente agrega scripts de cliente a la pgina a travs del mtodo RegisterClientScriptBlock. El
script que se agrega a la pgina incluye una funcin denominada CallServer, que obtiene el nombre del mtodo que
realiza la devolucin de datos al servidor desde el mtodo GetCallbackEventReference.
La devolucin de llamada del cliente invoca al mtodo RaiseCallbackEvent para determinar las existencias disponibles
para el producto que se le ha pasado. El mtodo GetCallbackResult devuelve el valor. Tenga en cuenta que los
argumentos enviados entre el script de cliente y el cdigo del servidor slo pueden ser cadenas. Para pasar o recibir
varios valores, stos se pueden concatenar en la cadena de entrada o en la cadena devuelta, respectivamente.

Cuando se utiliza esta caracterstica, la seguridad puede verse amenazada. Los argumentos de la devolucin de
llamada no se validan y, por consiguiente, deben considerarse no seguros. Debe comprobar siempre el
contenido de los argumentos antes de utilizarlos.
MCT: Luis Dueas
Pag. 31 de 35
2.3. Ejemplo de devolucin de llamada del cliente con

implementacin de validacin
En una devolucin de llamada de cliente, una funcin de script de cliente enva una solicitud a la pgina web ASP.NET,
que, a continuacin, ejecuta una versin abreviada de su ciclo de vida normal para procesar la devolucin de
llamada. Para garantizar que esos eventos de devolucin de llamada se originan desde la interfaz de usuario prevista,
puede validar las devoluciones de llamada. La validacin de devoluciones de llamada implica registrar un evento para la
validacin durante la representacin de la pgina Web y despus validar el evento durante la devolucin de llamada.
Nota
La validacin de eventos permite proteger la aplicacin Web contra devoluciones (postbacks) manipuladas,
pero no sirve para protegerse de ataques de reproduccin. Un plan de validacin de eventos ms completo
debera tener en cuenta las caractersticas especficas de su aplicacin Web y los permisos del usuario que tiene
acceso a sus recursos.
El ejemplo que aqu se describe es una ampliacin del Ejemplo de implementacin de devolucin de llamada de cliente
(C#). En esos ejemplos, un control ListBox denominado ListBox1 es un control del servidor que muestra una lista de
productos. Un elemento <button> HTML (no un control de servidor Button) realiza una devolucin de llamada para
obtener informacin del inventario de productos. El ejemplo se ha ampliado para incluir informacin adicional sobre si
un producto est en venta y para permitir que esta informacin slo la vean los usuarios autenticados. Para mostrar el
contenido adicional, se utiliza un control LoginView con la propiedad LoggedInTemplate definida. A los usuarios
annimos de la pgina Web se les permite ejecutar una devolucin de llamada para obtener informacin del inventario,
mientras que a los usuarios registrados se les permite adems ejecutar una devolucin de llamada para obtener
informacin sobre las ventas. La devolucin de llamada de la informacin de ventas slo se registra para la validacin de
eventos si el usuario est autenticado. De esta forma, se evita que los usuarios que no estn autenticados ejecuten
devoluciones de llamada.
Ejemplo
Descripcin
En el ejemplo siguiente, una pgina Web simula una bsqueda en la base de datos para determinar el nmero de
productos que estn disponibles y si un producto est en venta. Para simplificar el ejemplo, el almacn de datos se
representa mediante dos listas de diccionario. En una aplicacin de produccin, se utilizara una base de datos. En el
ejemplo se muestra una situacin en la que, al validar las devoluciones de llamadas del cliente, se impide que un usuario
annimo ejecute una devolucin de llamada concebida nicamente para los usuarios autenticados.
Cdigo
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="ClientCallback.aspx.cs" Inherits="ClientCallback" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head id="Head1" runat="server">
<title>ASP.NET Example</title>
function ReceiveServerData(rValue)
{
Results.innerText = rValue;
}
</script>
</head>
<body>
<div>
<asp:ListBox id="ListBox1" runat="server"></asp:ListBox>
<br />
<br />
<button id="LookUpStockButton" type="button"
onclick="LookUpStock()">Look Up Stock</button>
<asp:LoginView id="LoginView1" runat="server">
<LoggedInTemplate>
<button id="LookUpSaleButton" type="button"
onclick="LookUpSale()">Look Up Back Order</button>
</LoggedInTemplate>
MCT: Luis Dueas
Pag. 32 de 35
</asp:LoginView>
<br />
Item status: <span id="Results"></span>
</div>
</form>
</body>
</html>
using
using
using
using
using
using
using
using
using
using
System;
System.Data;
System.Configuration;
System.Collections;
System.Web;
System.Web.Security;
System.Web.UI;
System.Web.UI.WebControls;
System.Web.UI.WebControls.WebParts;
System.Web.UI.HtmlControls;
public partial class ClientCallback : System.Web.UI.Page,

System.Web.UI.ICallbackEventHandler
{
protected System.Collections.Specialized.ListDictionary catalog;
protected System.Collections.Specialized.ListDictionary saleitem;
protected String returnValue;
protected String validationLookUpStock = "LookUpStock";
protected String validationLookUpSale = "LookUpSale";
{
validationLookUpStock, "function LookUpStock() { " +
"var lb = document.forms[0].ListBox1; " +
"if (lb.selectedIndex == -1) { alert ('Please make a selection.');
return; } " +
"var product = lb.options[lb.selectedIndex].text; " +
@"CallServer(product, ""LookUpStock"");} ", true);
if (User.Identity.IsAuthenticated)
{
validationLookUpSale, "function LookUpSale() { " +
"var lb = document.forms[0].ListBox1; " +
"if (lb.selectedIndex == -1) { alert ('Please make a selection.');
return; } " +
"var product = lb.options[lb.selectedIndex].text; " +
@"CallServer(product, ""LookUpSale"");} ", true);
}
String cbReference = "var param = arg + '|' + context;" +
Page.ClientScript.GetCallbackEventReference(this,
"param", "ReceiveServerData", "context");
String callbackScript;
callbackScript = "function CallServer(arg, context)" +
"{ " + cbReference + "} ;";
catalog = new System.Collections.Specialized.ListDictionary();
saleitem = new System.Collections.Specialized.ListDictionary();
catalog.Add("monitor", 12);
catalog.Add("laptop", 10);
catalog.Add("keyboard", 23);
catalog.Add("mouse", 17);
saleitem.Add("monitor", 1);
saleitem.Add("laptop", 0);
saleitem.Add("keyboard", 0);
saleitem.Add("mouse", 1);
ListBox1.DataSource = catalog;
MCT: Luis Dueas
Pag. 33 de 35
ListBox1.DataTextField = "key";
ListBox1.DataBind();
}
{
string[] argParts = eventArgument.Split('|');
if ((argParts == null) || (argParts.Length != 2))
{
returnValue = "A problem occurred trying to retrieve stock
count.";
return;
}
string product = argParts[0];
string validationaction = argParts[1];
switch (validationaction)
{
case "LookUpStock":
try
{
Page.ClientScript.ValidateEvent("LookUpStockButton",
validationaction);
if (catalog[product] == null)
{
returnValue = "Item not found.";
}
else
{
returnValue = catalog[product].ToString() +
" in stock.";
}
}
catch
{
returnValue = "Can not retrieve stock count.";
}
break;
case "LookUpSale":
try
{
Page.ClientScript.ValidateEvent("LookUpSaleButton",
validationaction);
if (saleitem[product] == null)
{
returnValue = "Item not found.";
}
else
{
if (Convert.ToBoolean(saleitem[product]))
returnValue = "Item is on sale.";
else
returnValue = "Item is not on sale.";
}
}
catch
{
returnValue = "Can not retrieve sale status.";
}
break;
}
}
{
return returnValue;
MCT: Luis Dueas
Pag. 34 de 35
}
protected override void Render(HtmlTextWriter writer)
{
Page.ClientScript.RegisterForEventValidation("LookUpStockButton",
validationLookUpStock);
if (User.Identity.IsAuthenticated)
{
Page.ClientScript.RegisterForEventValidation("LookUpSaleButton",
validationLookUpSale);
}
base.Render(writer);
}
}
Comentarios
La pgina Web emula una bsqueda de base de datos para determinar el nmero de elementos disponibles, o en
existencias, para una serie de productos (monitores, teclados, etc.). Para simplificar este ejemplo de cdigo, la base de
datos est representada por una lista de diccionario que contiene un pequeo grupo de elementos. Para cada elemento
de la tabla, la clave es el nombre del elemento (por ejemplo, monitor) y el valor es el nmero de elementos que hay en
existencias. En una aplicacin de produccin, se utilizara una base de datos.
Cuando se ejecuta la pgina, se enlaza un control ListBox a la tabla hash para que el control ListBox muestre la lista de
productos. Para los usuarios autenticados, la pgina se representa con dos elementos <button> HTML cuyos
eventos onclick se enlazan a dos funciones de cliente denominadas LookUpStock y LookUpSale, respectivamente. Para
los usuarios annimos, la pgina se representa con slo un elemento <button> HTML, cuyo evento onclick se enlaza a
LookUpStock. Se utiliza un control LoginView para especificar los botones que se muestran. En un evento Render
reemplazado de la pgina, los botones se registran para la validacin. Si el usuario no est autenticado, no se registra el
botn que inicia la devolucin de llamada para LookUpSale y cualquier intento de realizar una devolucin de llamada
producir un error.
La pgina de cdigo subyacente agrega scripts de cliente a la pgina a travs del mtodo RegisterClientScriptBlock. El
script que se agrega a la pgina incluye una funcin denominada CallServer, que obtiene el nombre del mtodo que
realiza la devolucin (postback) al servidor desde el mtodo GetCallbackEventReference.
La devolucin de llamada del cliente invoca al mtodo RaiseCallbackEvent para determinar las existencias disponibles
para el producto que se le ha pasado. El mtodo GetCallbackResult devuelve el valor. Tenga en cuenta que los
argumentos enviados entre el script de cliente y el cdigo del servidor slo pueden ser cadenas. Para pasar o recibir
varios valores, puede concatenar los valores en la cadena de entrada o en la cadena devuelta, respectivamente.

Si las devoluciones de llamada del cliente y de la pgina Web estn relacionadas con la presentacin de datos
confidenciales u operaciones que insertan, actualizan o eliminan datos, es recomendable que valide las
devoluciones de llamada para garantizar que el elemento de la interfaz de usuario previsto ejecuta la devolucin
de llamada.
MCT: Luis Dueas
Pag. 35 de 35

ASP .Net 4.5 - Script de Cliente ASP Net

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

ASP .Net 4.5 - Script de Cliente ASP Net

Încărcat de

Drepturi de autor:

Formate disponibile

Script de Cliente ASP .

Script de Cliente ASP .NET

1. Scripts de Cliente en pginas Web ASP.NET

Programacin orientada a objetos en JavaScript.

Servicios Web de aplicacin para autenticacin y perfiles.

Ampliar JavaScript con caractersticas AJAX de ASP.NET

2. Incluir script de cliente personalizado en pginas ASP.NET

MCT: Luis Dueas

Script de Cliente ASP .NET

Incluir bloques de script de cliente estticos

<script type="text/javascript" src="MyScript.js"></script>

Crear script de cliente de forma dinmica

RegisterClientScriptBlock, que inserta un bloque de script en la parte superior de la pgina presentada.

Agrega un evento de cliente al control TextBox.

MCT: Luis Dueas

Script de Cliente ASP .NET

Agregar un script de cliente mediante el control ScriptManager

3. Ampliar JavaScript con caractersticas AJAX de ASP.NET

MCT: Luis Dueas

Script de Cliente ASP .NET

Compatibilidad para exploradores de las caractersticas AJAX

4. Controles de servidor ASP.NET que dependen de scripts de cliente

5. Agregar eventos del script de cliente a los controles de servidor ASP.NET

Agregar controladores de eventos de cliente mediante declaracin

<asp:textbox id="TextBox1" runat="server" text="Sample Text" />

<asp:textbox id="TextBox1" runat="server" text="Sample Text"

<asp:textbox id="TextBox1" runat="server" text="Sample Text"

Agregar atributos en el cdigo de servidor

6. Hacer referencia a controles de servidor en scripts de cliente

<asp:textbox id="TextBox1" runat="server" text="Sample Text" />

<input name="TextBox1" type="text" value="Sample Text" id="TextBox1" />

MCT: Luis Dueas

Script de Cliente ASP .NET

var tb1 = document.getElementById("TextBox1");

document.form1.TextBox1.value = "New value";

7. Provocar eventos Click de cliente para los controles de servidor

<asp:button id="Button1" runat="server"

8. Comunicacin entre scripts de cliente y cdigo de servidor

Llamar al cdigo de servidor directamente desde el script de cliente

MCT: Luis Dueas

Script de Cliente ASP .NET

Compartir datos mediante un control HiddenField

Compartir datos mediante cookies

Compartir datos durante postbacks asincrnicos

9. Crear componentes de script de cliente

10. Agregar funcionalidad de cliente a los controles de servidor

1.1. Controles de servidor web de ASP.NET que usan un script de

Compatibilidad del explorador para el script de cliente

MCT: Luis Dueas

Script de Cliente ASP .NET

Funcionalidad del script de cliente que usan todos los controles

Controles que usan script de cliente

Funcionalidad del script de cliente

Cuando se establece la propiedad OnClientClick, el botn depende

Este control usa controles LinkButton para implementar la

Este control genera controles de validacin para cuadros de texto y

Si no se establece la propiedad QueryStringField y est utilizando

De forma predeterminada, este control usa controles LinkButton.

De forma predeterminada, el control usa controles LinkButton para

De forma predeterminada, el control usa controles LinkButton para

El script de cliente se utiliza para permitir los eventos de

La etiqueta <form runat=server> crea implcitamente este

MCT: Luis Dueas

Script de Cliente ASP .NET