Archive for the ‘JavaScript’ Category

Evento Load de Página ASPX Solo se Ejecuta la Primera Vez, Cuando se Abre la Página con JavaScript en Modo Modal.

Nuevamente uno de esos problemas que a uno lo ponen a pensar, y como ya es costumbre proviene de una amiga (que bueno que me hagan estas consultas, así tengo material para el Blog).

El Problema
Cuando abrimos una página ASP .Net en modo modal (diálogo), mediante la instrucción de JavaScript:

showModalDialog();

El código que ponemos en el controlador del evento load de la página que estamos abriendo, se ejecuta solo la primera vez que abrimos la página; en las siguientes veces, simplemente no ejecuta nada, es decir no se produce el evento load de la página.

La Solución
Como es costumbre lo primero que hice, fue reproducir el problema, y me pareció bastante extraño el comportamiento que tenía, luego pase a depurar el programa poniendo un punto de interrupción en la primera instrucción del controlador del evento Load de la página, ejecute el programa y como se esperaba se detuvo en el punto de interrupción, desde ahí comencé a ejecutarlo paso a paso presionando la tecla F10, hasta que se muestre la página por completo, luego cerré la página para abrirla de nuevo, y al abrir de nuevo la página, ¡o sorpresa!, ingresó nuevamente al controlador del evento Load donde estaba el punto de interrupción, y donde se suponía ya no debería de entrar. Así que detuve el proceso de depuración, ejecuté el programa y todo funcionó a la perfección.

Le comenté esto a mi amiga y le dije que después de depurar el programa, todo funcionaba a la perfección, pero ella no puedo reproducir lo que yo había logrado. Rato después cuando probé nuevamente el programa, surgió nuevamente el problema y como era de esperar, mi amiga se rió en mi cara.

Así que me puse a buscar la solución definitiva, luego de probar con muchas posibles soluciones y claro después de buscar en San Google, recordé que cuando una página es servida desde la caché de salida, no se ejecuta ningún código del lado del servidor. Así que procedí a desactivar la caché de salida de la página en cuestión, y que creen, eso solucionó el problema definitivamente, resulta que en las páginas que se muestran como diálogo (Modal), la caché de salida se activa de forma automática y claro no hay manera que se ejecute nuestro controlador de evento Load. Para desactivar la caché de salida de una página basta con colocar la siguiente declaración en el archivo apsx de la página:

<%@ OutputCache Location=”None” VaryByParam=”None” %>

Justo después de la directiva @Page.

Cómo Buscar Controles de ASP .Net con JavaScript Dentro de ContentPages

Ayer como a medio día, uno de mis viejos amigos, (uhmm esa ultima frase no me gusto mucho, me recuerda que estoy cada vez más viejo) me visitó y me comentó que tenia un problema cuando trabajaba con Master Pages y que no lograba que funcione una llamada a un calendario utilizando JavaScript.

Como yo no soy de escapar a estos desafíos, me dispuse a revisar el código y le dije a mi amigo, esto lo soluciono en un par de minutos, luego de media hora de hacer todas las pruebas posibles, tuve que decirle (no tengo la más mínima idea de cómo solucionar esto) que esto necesita ser revisado con paciencia y que lo solucionaría cuando tenga más tiempo.

El problema
Ahora que ya se fue mi amigo, comienzo a depurar con más calma el programa y localizo la fuente del problema, cuando se ejecuta el código desde un content page, la función de JavaScript:

document.getElementById(‘txtFecha’).Value

Devuelve null, es decir no encuentra el control txtFecha que como supondrán es un control TextBox, lo extraño es que cuando se ejecuta el mismo código desde una página Aspx normal que no utiliza master pages, funciona a la perfección.

Al parecer cuando se realiza la combinación del master page con el content page ya no se utilizan los nombres (ID) que les colocamos a los controles de nuestro formulario, esto para evitar posibles conflictos de nombres entre los controles que están en el master y content page.

La solución
Después de buscar información en muchas páginas y de probar infructuosamente muchas posibles soluciones, llegue a la conclusión de que como la función no encontraba el nombre (ID), que le había asignado al control, tendría que buscarlo por otro nombre, y ese nombre es el que esta en la propiedad ClientID de los controles. El valor de ClientID es generado automáticamente concatenando el valor de la propiedad (ID) del control con el valor de la propiedad UniqueID del control padre.

Un pequeño ejemplo
Suponiendo que tenemos un Content Page que se ha creado a partir de un Master Page, y que colocamos dentro un TextBox de nombre: txtFecha y un Button, en la página de código tendremos el método que maneja el evento click del botón:

protected void Button1_Click(object sender, EventArgs e)
{
    string codigo = “document.getElementById(‘”+
        txtFecha.ClientID + “‘).value = ‘Hola'”;
    ClientScript.RegisterStartupScript(GetType(), “prueba”, codigo);
}

Noten que como parámetro de la función document.getElementById utilizamos la propiedad ClientID del TextBox. El fragmento de código anterior solo coloca en la propiedad Text del control txtFecha el valor de “Hola”.

De esta manera solucionamos el problema de los nombres de los controles cuando trabajamos con JavaScript y Master Pages.