Esta documentación está archivada y no tiene mantenimiento.

Secuencias de comandos del cliente en páginas Web ASP.NET

ASP.NET es una tecnología basada en servidor y, por consiguiente, no interactúa directamente con el explorador. Por ejemplo, no existe ningún método de ASP.NET para obtener las acciones realizadas en el explorador mediante el teclado, responder a los eventos del mouse (ratón) o realizar otras tareas que impliquen una interacción del usuario con el explorador. ASP.NET puede obtener los resultados de tales acciones una vez enviada la página, pero no puede responder directamente a las acciones del explorador.

Estos tipos de tareas de interacción con el explorador se controlan mejor con secuencias de comandos de cliente escritas en ECMAScript (JavaScript o JScript). Las secuencias de comandos de cliente que se ejecutan en el explorador pueden responder inmediatamente a las acciones del usuario. Por ejemplo, mediante secuencias de comandos de cliente, se pueden crear efectos de "activación" para cambiar un botón o un elemento del menú cuando el usuario pase el puntero del mouse sobre él. Del mismo modo, se pueden utilizar secuencias de comandos de cliente para comprobar los datos proporcionados con el teclado en un cuadro de texto carácter por carácter, cambiar dinámicamente la apariencia de la página o realizar cualquier otra tarea orientada principalmente a la interfaz de usuario que requiera una respuesta inmediata.

Controles de servidor ASP.NET y secuencias de comandos de cliente

La funcionalidad de algunos controles de servidor ASP.NET depende de secuencias de comandos de cliente. Por ejemplo, el control LinkButton requiere secuencias de comandos para implementar su comportamiento de devolución de datos. Las secuencias de comandos de cliente requeridas para los controles de servidor Web ASP.NET se agregan automáticamente a la página cuando ésta se representa. Las secuencias de comandos generadas para estos controles son independientes de las secuencias de comandos creadas por el desarrollador.

Para obtener más información, vea Controles de servidor Web ASP.NET que utilizan secuencias de comandos de cliente.

Incluir su propia secuencia de comandos de cliente en las páginas ASP.NET

Dado que las páginas Web ASP.NET son, en última instancia, sólo páginas Web, es posible agregarles secuencias de comandos de cliente. Las páginas ASP.NET admiten secuencias de comandos de cliente en la medida en que el explorador que solicita la página admite dichas secuencias. Por ejemplo, si la página Web ASP.NET se ejecuta en Microsoft Internet Explorer o Mozilla, puede agregar secuencias de comandos de cliente a una página que utilice HTML dinámico para manipular cualquier elemento de la página. Si la página se ejecuta en un explorador de un teléfono u otro dispositivo móvil, el grado de compatibilidad con la secuencia de comandos de cliente variará según el explorador.

Las páginas pueden incluir secuencias de comandos de cliente del mismo modo que cualquier página HTML (o con otro formato). Se pueden agregar bloques script a la página para manipular los elementos de ésta, del mismo modo que se haría con cualquier página HTML. También se pueden utilizar secuencias de comandos de cliente para escribir controladores de eventos para eventos de cliente como el evento onload de la página. Cuando la página ASP.NET se ejecuta en el explorador, los elementos de formato de la página serán direccionables en la secuencia de comandos de cliente y provocarán todos los eventos de cliente que provocarían en una página HTML.

El trabajo con secuencias de comandos de cliente en páginas Web ASP.NET es diferente del trabajo con páginas HTML en las áreas siguientes:

Agregar eventos de la secuencia de comandos de cliente a los controles de servidor ASP.NET

Los controles ASP.NET se representan como elementos de la página (los elementos exactos representados por cada control dependen del lenguaje de formato de la página: HTML, XHTML u otro lenguaje). Por lo tanto, puede agregar el control de eventos de la secuencia de comandos de cliente a los controles del mismo modo que lo haría con cualquier elemento de la página. En algunos casos, sin embargo, debe tener en cuenta cómo representa el control su resultado y qué atributos se reserva para sí mismo.

Agregar controladores de eventos de cliente mediante declaración

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 formato como el siguiente:

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

Si incluye un atributo que no se corresponde con ninguna propiedad del control, ASP.NET omitirá el atributo durante el procesamiento del servidor y lo pasará al explorador tal y como está en el formato generado por el control. Por ejemplo, el control TextBox no tiene ninguna propiedad denominada onkeyup. Por consiguiente, si incluye un atributo onkeyup en el formato de un control TextBox, el atributo se pasará a través del explorador. Este comportamiento permite agregar enlaces de evento a los controles de servidor declarándolos en el formato. 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:

Security noteNota de seguridad

TextBox acepta los datos proporcionados por el usuario, lo que puede suponer una amenaza para la seguridad. De forma predeterminada, las páginas Web ASP.NET validan los datos escritos por el usuario para comprobar que no incluyen secuencias de comandos ni elementos HTML. Para obtener más información, vea Información general sobre los ataques mediante secuencias de comandos.

<asp:textbox id="TextBox1" runat="server" text="Sample Text" onkeyup="spanCounter.innerText=this.value.length;" />

Opcionalmente, el evento podría llamar a un método definido en una secuencia de comandos de cliente situada en otra parte de la página:

<asp:textbox id="TextBox1" runat="server" text="Sample Text" onkeyup="DisplayCount(this);" />

Recuerde que el lenguaje empleado para el código de servidor (Visual Basic o C#) no tiene efecto alguno en las secuencias de comandos de cliente, que siempre se escriben en ECMAScript.

Para obtener información detallada, vea Cómo: Agregar eventos de secuencias de comandos de cliente a los controles de servidor Web ASP.NET.

Agregar atributos en el código de servidor

Además de agregar atributos de paso a través a un control mediante declaración, también se pueden agregar atributos mediante programación utilizando el código de servidor. Esto es útil cuando el valor del atributo que se va a agregar es dinámico. Para obtener información detallada, vea Cómo: Establecer atributos HTML de controles en páginas Web ASP.NET.

Identificar los controles de servidor en la secuencia de comandos de cliente

Cuando se representa un control de servidor ASP.NET, la propiedad ClientID del control se representa en la página como atributos id y name del elemento resultante. (La propiedad ClientID se genera automáticamente a partir de la propiedad ID que se establezca.) Por ejemplo, podría crear el control de servidor ASP.NET siguiente:

Security noteNota de seguridad

TextBox acepta los datos proporcionados por el usuario, lo que puede suponer una amenaza para la seguridad. De forma predeterminada, las páginas Web ASP.NET validan los datos escritos por el usuario para comprobar que no incluyen secuencias de comandos ni elementos HTML. Para obtener más información, vea Información general sobre los ataques mediante secuencias de comandos.

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

La propiedad ClientID se establece en TextBox1 y el elemento resultante tendría la apariencia siguiente en un explorador basado en HTML:

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

El elemento form sólo representa un atributo ID, no un atributo name.

Por consiguiente, puede hacer referencia al control de servidor en la secuencia de comandos de cliente mediante estos atributos. Generalmente debe hacer referencia al control utilizando una referencia completa en la secuencia de comandos de cliente; si el control es un elemento secundario del elemento form de la página, generalmente hará referencia al control en la secuencia de comandos de cliente con la sintaxis que se muestra en el ejemplo de código siguiente.

document.forms[0].TextBox1.value = "New value";

En el segundo ejemplo se supone que, para el elemento form de la página, el atributo id se ha establecido en form1.

La sintaxis exacta necesaria para hacer referencia a un control de servidor depende del control que se esté utilizando y de si es un elemento secundario de otro control. Si no está seguro de cómo hacer referencia a un control, puede ser útil ejecutar la página, ver su código y determinar cómo se ha representado el control.

Hacer referencia a controles representados en otros controles

Algunos controles representan controles secundarios en la página. Entre ellos se encuentran los controles de lista de datos, como GridView, DetailsView, FormView, DataList y Repeater, así como los controles de usuario y los controles de elementos Web.

En estos casos, es posible que los controles secundarios no tengan identificadores únicos, bien porque dichos controles se han definido en una plantilla que genera nuevas instancias del control para cada fila de datos (controles de lista de datos), o bien porque el control primario puede agregarse a la página desde un origen externo (controles de usuario y controles de elementos Web). Por consiguiente, estos controles primarios son contenedores de nombres (es decir, implementan INamingContainer). Un contenedor de nombres garantiza que sus controles secundarios tengan identificadores únicos en la página.

Por ejemplo, podría crear una propiedad ItemTemplate en el control DataList y agregar un control CheckBox cuyo identificador se ha establecido en checkEnabled. Cuando se representa el control DataList, se representa un nuevo control checkEnabled para cada elemento de datos. La página representada no debe contener múltiples instancias de un elemento denominado checkEnabled, por lo que el control DataList creará una identidad única para cada uno de sus controles secundarios.

Las identidades únicas para los controles secundarios de un contenedor de nombres se generan al representar dos propiedades. Para cada control secundario:

  • La propiedad UniqueID del control se representa como atributo name.

  • La propiedad ClientID del control se representa como atributo id.

Ambas propiedades, ClientID y UniqueID, están basadas en la propiedad ID original, corregida con suficiente información para garantizar que el resultado sea único en la página. Se puede hacer referencia al valor de ClientID (es decir del atributo id del elemento representado) en la secuencia de comandos de cliente.

Si visualiza una página con un contenedor de nombres en el explorador, puede examinar el código fuente de la página para ver los identificadores únicos generados como atributos name e id para los controles secundarios del contenedor de nombres. Sin embargo, se recomienda no confiar en las referencias directas a los identificadores tal como se ven en el explorador. La fórmula utilizada para generar los identificadores únicos de los controles secundarios puede cambiar. En lugar de ello, obtenga el valor de la propiedad ClientID del control secundario y utilice dicho valor para hacer referencia a dicho control. Por ejemplo, podría crear dinámicamente una secuencia de comandos de cliente en la página. Si la secuencia de comandos de cliente hace referencia a un control secundario, obtenga la propiedad ClientID del control secundario y genérela en la secuencia de comandos dinámica.

Agregar dinámicamente la secuencia de comandos de cliente a una página

En muchos casos, la secuencia de comandos de cliente para la página se puede crear mediante declaración, normalmente como un bloque de secuencia de comandos. Sin embargo, a veces es conveniente crear dinámicamente la secuencia de comandos de cliente. Esto es útil si la secuencia de comandos o los valores que contiene dependen de información que sólo está disponible en el servidor. Por ejemplo, podría insertar la secuencia de comandos de cliente en una página que direccione un control de servidor cuyo nombre (id.) no se conozca hasta que se ejecute la aplicación.

También puede insertar una instrucción include de la secuencia de comandos de cliente que haga referencia a un archivo. Esto resulta útil si mantiene la secuencia de comandos de cliente en archivos .js, no en las propias páginas, y puede ser especialmente útil si la aplicación se utiliza con exploradores que no admiten directamente secuencias de comandos.

Para insertar secuencias de comandos de cliente o una instrucción include de la secuencia de comandos en una página debe llamar a métodos de la clase ClientScriptManager, como RegisterClientScriptBlock y RegisterStartupScript. Para obtener más información, vea Cómo: Agregar secuencias de comandos de cliente a las páginas Web ASP.NET dinámicamente.

En todos los métodos debe proporcionar un tipo con el que esté asociado el bloque de secuencia de comandos y asignar una clave a este bloque. Al proporcionar un tipo resulta más fácil evitar colisiones si tanto la página como los controles (controles personalizados o controles de usuario) agregan bloques de secuencia de comandos a la misma página. El uso de la clave permite evitar la duplicación; si llama a uno de los métodos para agregar la secuencia de comandos y ya existe una secuencia de comandos con la misma clave y el mismo tipo, la secuencia de comandos no se vuelve a agregar.

El tipo y la clave proporcionados evitan la duplicación innecesaria, por lo que generalmente no será necesario determinar de forma explícita si ya existe un bloque de secuencias de comandos. Sin embargo, si es útil en la aplicación comprobar si ya existe un bloque de secuencia de comandos, puede llamar a los métodos siguientes:

Provocar eventos Click de cliente para los controles de servidor

Tal como se ha explicado anteriormente en este tema, puede agregar eventos Click de cliente a la mayoría de los controles de servidor ASP.NET si agrega el atributo onclick al formato 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 declaración para agregar un controlador de secuencia de comandos de cliente al control.

El controlador de secuencia de comandos de cliente para el evento Click se puede agregar de dos maneras:

  • Establezca la propiedad OnClientClick del control como la secuencia de comandos que se debe ejecutar. Cuando se representa el control de botón, el valor de OnClientClick se convierte en un atributo onclick.

  • Agregue el atributo onclick mediante programación llamando al método Add de la colección Attributes del control.

En el ejemplo de código 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!" />

Compartir información entre la secuencia de comandos de cliente y el código del servidor

Como norma, la secuencia de comandos de cliente y el código del servidor no se pueden comunicar directamente. Por ejemplo, una función de secuencia de comandos de cliente no puede pasar un valor directamente al código del servidor durante un evento de devolución de datos.

NoteNota

La secuencia de comandos de cliente podrá llamar directamente al código del servidor si se implementan devoluciones de llamada de cliente. Para obtener información detallada, vea Implementar devoluciones de llamada de cliente sin devoluciones de datos en las páginas Web ASP.NET.

Sin embargo, puede hacer que la secuencia de comandos de cliente y el código del servidor interactúen indirectamente. Una forma de hacerlo consiste en agregar un control HiddenField a la página. A continuación, podrá hacer referencia al campo oculto en la secuencia de comandos y en el código del servidor mediante su identificador, almacenar valores en cualquiera de los dos bloques de código y leerlos en el otro. Para pasar información del código del servidor a la secuencia de comandos de cliente, puede crear un campo oculto mediante programación con el método RegisterHiddenField. Con este método podrá especificar un identificador y un valor para el campo, lo que permitirá almacenar valores dinámicos en la página de modo que la secuencia de comandos de cliente pueda leerlos.

También puede compartir valores entre el código del servidor y el código de cliente mediante cookies. Para obtener más información sobre la escritura y la lectura de cookies en el código del servidor, vea Cómo: Escribir una cookie y Cómo: Leer una cookie.

Llamar al código del servidor desde la secuencia de comandos de cliente sin devolución de datos

En la secuencia normal de las páginas Web ASP.NET, cada acción del usuario que ejecuta código del servidor requiere una devolución de datos. Sin embargo, también se puede escribir código que implemente una devolución de llamada del cliente. En este escenario, la secuencia de comandos de cliente envía una solicitud al servidor para ejecutar una página sin necesidad de realizar un ciclo de devolución de datos completo. La página puede ejecutar un método y devolver los resultados del método a una función del cliente en el explorador. Las devoluciones de llamada del cliente son útiles cuando se desea retener el estado del cliente, por ejemplo variables locales, mientras se obtiene información del servidor.

Para obtener información detallada, vea Implementar devoluciones de llamada de cliente sin devoluciones de datos en las páginas Web ASP.NET.

Vea también

Mostrar: