sábado, 13 de diciembre de 2008

Manipular controles desde javascript

1.- Cómo referenciamos un control de servidor desde una función javascript embebida en la página?
simple pues... para poder manipularlo desde javascript, necesitamos saber cuál es el Id del control, en este caso su ClientID, cierto? claro pes.
Veamos un ejemplo simple de manipulación de controles:
Queremos pegar el texto "some text" en el control asp:textbox, pero desde javascript, el texto se debe pegar en textbox1, al presionar el botón asp:Button












Observa la información que he resaltado... como te darás cuenta, estoy usando la propiedad ClientID del control TextBox1, para que me devuelva el identificador del control... observa, además, que el botón está haciendo uso del evento onclientclick.
Entonces, al presionar el botón, el texto recibirá la frase "some text"

Qué simple, no es cierto? claro, y esta solución le resuelve el problema de manipulación de controles de servidor desde javascript.

Pero eso no es todo niño Juanito.
(y el niño Juanito dice: Lo sabía, no podía ser tan simple!!)
En realidad es simple, pero tenemos otro caso.

2.- Cómo referenciamos un control de servidor desde una función javascript contenida en un archivo js externo?
Tú dirás: simple pes, pongo la misma función javascript en el archivo js externo, luego añado la referencia al archivo javascript... y listo... todo debe funcionar bien... veamos:

















Déjame decirte que esto no funcionará mi querido amigo.
Oh nooooooo, estamos perdidos.

No estamos perdidos, para que todo funcione como debería, simplemente añadimos unas líneas a la cabecera de la página:









y en el archivo js externo hacemos un cambio mínimo:









Y listo... todo funcionará perfectamente bien.

Otro método:
Guardar el valor de ClientID en un control hiddenfield con runat="server"



lo registramos desde el code-beside:






y lo usamos desde el javascript:








Estos métodos pueden aplicarse para múltiples controles, sin problemas... sin embargo hay un método que funciona perfecto cuando se trata de registrar múltiples controles a la vez.
Este nuevo método consiste en registrar un array con los clientId de los controles que necesito manipular desde javascript.







De esta manera registro un array llamado MyControls, cuyos elementos son el ClientID de 3 textboxes. Veamos cómo se renderiza esto en el html:










y para usar este array desde el archivo js externo, simplemente haríamos:









Imagínate otra situación en la que le podrías sacar mucho provecho a este método... digamos que tienes un gridview con varios controles anidados, si registras los clientIDs de estos controles, sería muy simple asignarles valores desde el javascript.

Hay otros métodos, pero eso se los dejo para que investiguen.

No hay comentarios.: