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.