Insertar cdigo JavaScript en paginas ASP.

Net
Publicado por: Claudio Sebastin Delgado - Domingo, Enero 23, 2005 54 comentarios 135,962 views Imprimir Por ejemplo, las paginas en ASP.Net no provee en ningn sentido una posibilidad a reaccionar a ciertos eventos, como movimientos de mouse del usuario. En este caso, la sobrecarga de enviar la pagina de nuevo al servidor despus del movimiento del mouse provocara que la pagina sea muy lenta en el feedback con el usuario. Esto es porque el cdigo por detrs no puede interactuar con el navegador directamente, como ser desplegar ventanas emergentes, o administrar mltiples marcos de pagina. Para compensar estas limitaciones, los desarrolladores en ASP.Net a menudo recurren a un mix de pequeos cdigos en JavaScript dentro de paginas ASP.Net. El caso ms comn, es el de controles personalizados. Por ejemplo, muchos controles de men permiten al usuario navegar por mltiples niveles de men sin forzar a la pagina a hacer un postback al servidor cada vez que un nuevo nivel es mostrado. Puedes encontrar muchos de estos ejemplos en http://www.asp.net . Contenido Intoduccin Ventana Emergente (Pop-Up Window) Cambiando el foco de un control Manejando navegacin entre Marcos de Pgina Resumen

Intoduccin En este articulo, consideraremos tres casos comunes que requieren JavaScript. Puedes tomar estos ejemplos para solucionar problemas que no tienen solucin en cdigo nativo .Net. Seguiremos estos pasos: Definir el bloque que contenga la funcin de JavaScript. Puedes aadir esto directamente al cdigo HTML de la pagina, pero a mi criterio es ms flexible asignar el cdigo JavaScript a una variable de tipo string e insertar esto es una pagina programaticamente. Insertar el bloque de cdigo. Para hacer esto, usamos los mtodos Page.RegisterStartupScript() o Page.RegisterClientScriptBlock(). Si miramos la definicion notamos que: Page.RegisterStartupScript(): Permite a un control emitir un bloque de secuencia de comandos (que contiene una secuencia de comandos en lnea o que especifica la ubicacin de un archivo de comandos). El bloque de secuencia de comandos se procesa al final de la

pgina y se registra (con una clave) en ella de modo que slo se emita una vez, incluso cuando haya varias instancias del control en la pgina. Se utiliza cuando se desea emitir una secuencia de comandos que invoque elementos de la pgina o que deba ejecutarse al inicio. Debido a que esta secuencia de comandos se emite al final de la pgina, se garantiza que los elementos a los que se refiera ya existirn antes de que se ejecute. Nota: Un bloque de secuencia de comandos emitido al final de la pgina se denomina bloque de secuencia de comandos de inicio en una pgina ASP.NET. Page.RegisterClientScriptBlock(): Permite a un control emitir un bloque de secuencia de comandos (que contiene una secuencia de comandos en lnea o que especifica la ubicacin de un archivo de comandos). El bloque de secuencia de comandos se procesa al comienzo de la pgina y se registra (con una clave) en ella de modo que slo se emita una vez, incluso cuando haya varias instancias del control en la pgina. Se usa cuando se desea incluir una biblioteca de secuencias de comandos o procesar un bloque de secuencia de comandos que contenga funciones generales (invocadas posteriormente en la pgina). En particular, las funciones invocadas durante la fase de procesamiento deben encontrarse al comienzo de la pgina. Nota Un bloque de secuencia de comandos emitido al comienzo de la pgina se denomina bloque de secuencia de comandos de cliente en una pgina ASP.NET. 1. Ventana Emergente (Pop-Up Window) Las ventanas emergentes a menudo son usadas para publicidades y promociones. La solucin es usar JavaScript, el cual provee la funcin window.open() La funcin window.open() requiere tres parmetros: El link a la nueva pagina. El marco o frame de la ventana. Una cadena de caracteres separadas por coma que configuran el estilo y tamao de la ventana emergente. Estos son atributos de height y width (valores en pixel); la barra de herramientas (toolbar), la barra de men (menubar) y la barra de desplazamiento (scrollbar) valores yes o no, dependiendo si quieres o no mostrar estos elementos y el atributo resizable para setear el tamao de la ventana mediante los bordes de la misma. Ejemplo en C# string popupScript = <script language=JavaScript> + window.open(PopUp.aspx, CustomPopUp, + width=200, height=200, menubar=yes, resizable=no) + </script>; Page.RegisterStartupScript(PopupScript, popupScript);

Ejemplo en Vb.Net Dim popupScript As String = <script language=JavaScript> & _ window.open(PopUp.aspx, CustomPopUp, & _ width=200, height=200, menubar=yes, resizable=no) & _ </script> Page.RegisterStartupScript(PopupScript, popupScript) Puedes usar este codigo en cualquier evento (page_load, button_click, etc). 2. Cambiando el foco de un control Los controles web de ASP.Net proveen la propiedad TabIndex, pero esta propiedad solo es aplicable a Internet Explorer y no puede ser usada programaticamente para setear el foco a un control que elijas. Para solucionar este inconveniente, necesitas JavaScript. El mtodo es focus() La manera ms fcil de manejar esta tarea es crear una funcin que acepta el control, extrae el ID del lado del cliente y usa esto para generar la funcin de JavaScript para establecer el foco. Ejemplo en C# private void SetFocus(Control ctrl) { string focusScript = <script language=JavaScript> + document.getElementById( + ctrl.ClientID + ).focus();</script>; Page.RegisterStartupScript(FocusScript, focusScript); } SetFocus(myTextBox); Ejemplo en Vb.Net Private Sub SetFocus(ByVal ctrl As Control) Dim focusScript As String = <script language=JavaScript> & _ document.getElementById( + ctrl.ClientID & _ ).focus();</script> Page.RegisterStartupScript(FocusScript, focusScript) End Sub SetFocus(myTextBox) Recorda que el cambio de foco no tomara efecto hasta que la pagina sea sea compilada y visualizada en el navegador web.

3. Manejando navegacin entre Marcos de Pgina Frames o marcos de pgina permiten mostrar mas de una pagina html en la misma ventana del navegador. En el caso de un sitio con un men, puedes desplegar verticalmente en dos frames. El frame de la izquierda seria quien contenga el control de navegacin y el de la derecha seria el destino de la misma. Debido a que solos los marcos de pagina existen en el lado del cliente, se necesita un poco mas de trabajo manipularlos desde ASP.Net Ejemplo en C# string url = NewPage.aspx; string frameScript = <script language=JavaScript> + window.parent.frames(1).location= + url + ;</script> Page.RegisterStartupScript(FrameScript, frameScript); Ejemplo en Vb.Net Dim url As String = NewPage.aspx Dim frameScript As String = <script language=JavaScript> & _ window.parent.frames(1).location= & Url & ;</script> Page.RegisterStartupScript(FrameScript, frameScript) Resumen Un pequeo bloque de codigo JavaScript puede hacer que tus paginas hechas en ASP.Net se vean mas dinmicas, agregandoles funcionalidad en el codebehind.