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.

9 comments so far

  1. Horacio on

    Hola: soy nuevo en asp.net y mas aun si lo mezclo con javascript.
    En mi caso tengo una ventana popup lanzada con el siguiente codigo:

    y la funcion que me devuelve el valor seleccionado en un dropdown es :

    protected void DropDownList1_SelectedIndexChanged(object sender, System.EventArgs e)
    {
    try
    {
    string strjscript = «»;
    strjscript = (strjscript + («window.opener.»
    + (HttpContext.Current.Request.QueryString[«formname»] + («.value = \'»
    + (DropDownList1.SelectedItem.Text + «\’;window.close();»)))));
    strjscript = (strjscript + «»);
    Literal1.Text = strjscript;
    }
    catch (Exception ex)
    {
    Response.Write(ex.Message);
    }
    }
    sin master funciona perfecto pero con Master..
    Es un ejemplo similar al tuyo, pero al no usar getElement no me termino de dar cuenta como hacer. Desde ya muchas gracias.

  2. Horacio on

    no salio el codigo de envio:
    supongo que por ser un JavaScript. el formname es:

    formname=
    Form1.TextBox1′,’my_window’,
    y lo mando con un windowopen my_window

  3. Gerask8 on

    Hola… yo soy nuevo en esto y pues tomo como ejemplo lo que postearon y pues la verdad no me funciono y estube invetigando y no encontre nada del tema pero yo medi cuenta de que en asp.net al mostrar la pagina de curiosidad quise ver el codigo funte, y medi cuenta que esta como html con caracteres raros, en una parte en la que yo queria que al dar click un scrip se ejecutar tomando el valor que teni un TextBox y lo enviara a otro TextBox, medi cuenta que el texbox estaba pero como un input y teni un id el cual era asi ID=»ctl00_TexBox1″ y en lo demas era igual siempre tenian eso «ctl00_» antes del id que yo avia puesto en el control y dije pues que pierdo intentandol y en mi script de javascript el cual es:

    function Acp()
    {
    document.getElementById(‘ctl00_TextBox1’).value = document.getElementById(‘ctl00_TextBox2’).value;
    document.getElementById(‘ctl00_TextBox2’).value=»»;
    }

    le agrege esos caracteres y me funciono muy bien.

  4. Gustavo on

    gracias por sus experiencias… combinando la ultima parte de Gerask8 me dio la solucion… mirando la fuente en la parte del script hice una busqueda por el nombre del control y me salio algo parecido a Gerask8 pero con un _SampleContent_

    ctl00_SampleContent_TextBox1

    gracias…

  5. robert on

    Eso del ctl00 es variable en mi web a veces le pone eso y otras veces cargo el sistema y me da error veo el codigo y en lugar del ctl00 le puso otra cosa creo q el clientid es lo definitivo.
    Saludos

  6. agallardo1975 on

    Que tal tengo un problema con Java Script. mando a llamar un showmodaldialog y recibo en valor en un textbox, hasta ahi no tengo problema inclusive se despliega en pantalla, pero cuando ejecuto otro evento por ejemplo el clic de un boton, mi textbox no tiene el valor que le asigne, tiene el que tenia antes de la llamada al ShowModal Dialog, alguien podria ayudarme????

  7. Eliseo on

    Hola. Estoy en el mismo Problema. Tengo una Pagina que llamo una ventana modal para seleccionar un valor y al cerrar esa ventana, devuelvo el valor al formulario que lo llama y le asigno el valor a un TextBox, pero tengo el siguiente problema: Cuando utilizo el ClientScript.RegisterClientScriptBlock, me sale el mensaje de Error que no existe el objeto del document.getElementById(…).value, pero cuando utilizo el ClientScript.RegisterStartupScript, no me sale el error y me lo asigna, pero sigue ejecutando el codigo siguiente. Adjunto el ejemplo:
    Dim sCodigoScript As String
    sCodigoScript = «AbrirVentanaBusqueda(‘1’,'» & _
    Me.txtValBus.Text.Trim & «‘,'» & Me.txtId.ClientID.Trim & «‘);»

    ‘ ClientScript.RegisterClientScriptBlock(GetType(String), «VentanaBusqueda», sCodigoScript)

    Response.Write(sCodigoScript)

    If Not String.IsNullOrEmpty(Me.txtId.Text.Trim) Then

    Else
    Me.lblError.Visible = True
    Me.lblError.Text = «No se selecciono ningun registro.»
    End If

  8. miguel on

    hola yo tengo un problema no se si me puedan ayudar????

    mando a llamer a un calendario popup y no me aparece me sale un error, estoy trabajando con masterpage

    este es el codigo de ContentPlaceHolder:

    el error ocurre cuando doy click en textbox no me aparece en calendario que esta mal

  9. ReviviendoPosts on

    Dentro del control Content esta la propiedad ContentPlaceHolderID, el valor de este último es el que se toma para buscar el control que se busca. Ejemplo: busco un textbox de id «txtCasa» y este textbox se encuentra dentro del content con propiedad ContentPlaceHolderID = «MainContent». La busqueda en javascript quedaria algo así: document.getElementById(«MainContent_txtCasa»).value = valor;

    Espero les sirva. Aunque estos son post viejos, hoy me ayudaron a mi a resolver el problema leyendolos y aplicando otra lógica.

    Dejo esta solución para el que se tope con el problema en algún momento.

    Saludos.


Replica a ReviviendoPosts Cancelar la respuesta