none
Mostrar div oculto ¿ porque con runat no me funciona ? RRS feed

  • Pregunta

  • vereis tengo un problemilla con un div y la propiedad runat, la verdad es que no tengo ni idea de donde puede estar el problema, si en el div, en el runat o en el propio css. os comento a ver si podeis echarme una mano ya que es muy importante pues es una parte fundamental de mi desarrollo.

    tengo un div que a traves de css se muesta y se oculta ( creo que utiliza el target para eso, es un ejemplo que cogi de algun sitio ).

    El div es el siguiente

    <div id="emergente" class="modalmask"> <div class="modalbox resize"> <div class="modalcabecera" > <a href="#close" title="Close" class="close">X</a> <h2 id="emergenteTitulo" runat="server">Titulo de la ventana</h2> </div> <div id="emergenteContenido" class="modalcontenido" runat="server"> <p>Contenido de la ventana que mostramos</p> </div> </div> </div>

    tengo un enlace para mostrarlo <a href="#emergente">Redimensionar</a>.


    El caso es que este codigo funciona a la perfeccion, se muestra y oculta sin ningun problema, ( mas abajo os pondre el css ). el caso es que si a este div le añado la propiedad runat="server" para poder mostrarlo u ocultarlo desde el codebehind pues ya no funciona ni siquiera desde el enlace "Redimensionar" que si iba antes.  ¿ Porque lo hago asi y no con jQuery pues porque necesito que vaya al server compruebe si existen datos los cargue en el div y lo muestre; si no existen datos no debe mostrar el div.

    Espero podais echarme una manilla a averiguar en que me estoy equivocando y como solucionarlo, os copio el css como dije: 

    .modalmask
    {
        ;
        top: 0;
        right:0;
        bottom:0;
        left:0;
        background: rgba(147, 177, 232, 0.4);
        z-index: 99999;
        opacity: 0;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }
    
    .modalmask:target
    {
        opacity: 1;
        pointer-events: auto;
    }
    
    /* Propiedades de la ventana */
    .modalbox
    {
        width: 300px;
        ;
        /*
        padding: 5px 20px 13px 20px;
        */
        background: #fff;
        border:3px solid cadetblue;
        border-radius: 5px;
        transition: all 500ms ease-in;
    }
    
    .modalcabecera
    {
        width: auto;
        background-color: cadetblue;
        line-height: 30px;
        padding-left: 10px;
        font-weight: bold;
        color: white;
    }
    
    .modalcontenido
    {
        width: auto;
        height: auto;
        margin-top: 20px;
        margin-left: 20px;
    }
    
    /* Animaciones que podra hacer la ventana */
    .resize 
    {
        margin: 10% auto;
        width: 0;
        height: 0;
    }
    
    .modalmask:target .resize 
    {
        width: 400px;
        height: 200px;
    }
    
    /* Cerrar la ventana */
    .close
    {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        ;
        right: 1px;
        text-align: center;
        top: 1px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        border-radius: 3px;
    }
    
    .close:hover 
    {
        background-color: #FAAC58;
        color: #222;
    }
    
     Gracias por vuestra ayuda

    lunes, 3 de agosto de 2015 7:49

Respuestas

Todas las respuestas

  • Entiendo que lo que haces en el código de servidor es establecer la propiedad Visible del div a false.

    El problema es que cuando estableces la propiedad Visible de un control de servidor a false éste no se renderiza en la página, es decir, el código HTML del control no se genera, por lo que no puedes mostrarlo a través de JavaScript.

    Puedes comprobarlo examinando el código HTML generado a través de las herramientas de desarrollo de tu navegador (generalmente se muestran pulsando F12): cuando ocultas el div desde el servidor no se genera el código HTML para éste por lo que únicamente puedes mostrarlo haciendo un nuevo postback.


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    lunes, 3 de agosto de 2015 8:03
  • Gracias por la respuesta, pero creo que no es eso, en el codebehind nunca pongo el div a visible=false, de hecho solo lo quiero para ponerlo a true.

    El div esta oculto directamente cuando carga la pagina html ( de hecho con firebug lo veo ), ( de eso se encarga el css ), lo que quiero es:

        1.- Si incluyo en el div el runat="server", sin hacer nada en el servidor este deja de funcionar, es decir no se muestra tal y como debería de hacer al pulsar el enlace "redimensionar" (el div sigue estando ahi)  el único cambio fue anñadir runat="server" en el div id="emergente".

        2.- Si voy a servidor y pongo emergente.Visible = true; tampoco se muestra el div. entiendo que al bajar a servidor podria desaparecer el div ( que tampoco es el caso ) pero que el enlace tampoco vaya solo por añadir esa propiedad ya mosquea 

     Creo que el problema esta el target que cuando haces emergente.Visible = true, no se ejecuta el target, y dado que este es el que realmente hace mostrar el div pues no se ve. alguna idea para poder ejecutar target ?

    • Editado Veleras lunes, 3 de agosto de 2015 8:32 completar info
    lunes, 3 de agosto de 2015 8:19
  • ¿Podrías mostrar el código JavaScript con el que muestras y ocultas el div?

    Lo más probable es que el id con el que se esté generando el div en cliente sea diferente. Al convertirlo en un control de servidor con el runat="server" la propiedad id pasa a ser el id del control en servidor. El id en cliente lo genera automáticamente asp.net.

    Con el firebug puedes comprobar si el id que te está generando para el div es diferente.

    Puedes modificar tu código utilizando <%=emergente.ClientID%> para asegurarte de que utilizas el id generado por asp.net.

    Por ejemplo:

    $("#<%=emergente.ClientID%>").hide();


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    lunes, 3 de agosto de 2015 8:32
  • Es que no utilizo ningún javascript para mostrar el div, el div lo muestra el codebehind solo si es necesario, ahora mismo en vez de hacer visible el div con la propiedad visible = true; lo que estoy haciendo es establecerle nuevos estilos con Atributtes["class"] = "" de tal forma que coga un estilo en el que se vea el div y medio funciona. aunque con algun problemilla

    Insisto en que el problema creo que esta en que se muestra con CSS utilizando el target ¿ la pregunta es hacer visible un div desde codebehind ejecuta la propiedad target ? yo creo que no y es ahí donde falla.

    lunes, 3 de agosto de 2015 9:27
  • Pero ¿has comprobado el id generado para el div?

    Lo más probable es que el asp.net te lo esté cambiando y tengas que cambiarlo en el link redimensionar para que te localice el target correctamente:

    <a href="#<%=emergente.ClientID%>">Redimensionar</a>


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    lunes, 3 de agosto de 2015 9:33
  •   Con esto resuelvo parte del problema y es que el enlace vuelve a funcionar correctamente, y muestra el div perfectamente. Muchas Gracias.

    Ahora me queda resolver la segunda parte y es que desde el codebehind cuando hago el visible = true el div se muestra pero no ejecuta el target del estilo por lo que la ventana desde el codebehind se queda mal. ¿ Se puede hacer de alguna forma que se ejecute el target desde el codebehind ?

    Saludos y Gracias por tu ayuda.

    lunes, 3 de agosto de 2015 10:14
  • Lo que puedes hacer es establecer el target con JavaScript:

    ClientScript.RegisterStartupScript(this.GetType(), "hash", "location.hash = '#" & emergente.ClientID & "';", true);


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    lunes, 3 de agosto de 2015 10:43