2008-11-05 13 views
15

Basicamente, quiero saber la mejor manera de ocultar/mostrar un control ASP.NET desde una función de Javascript. Que pensé que le acaba de acceder al control en Javascript usando:¿Cómo se configura la propiedad "Visible" de un control ASP.NET desde una función Javascript?

var theControl = document.getElementById("txtEditBox"); 

A continuación, sólo establece la propiedad Visible del control al verdadero/falso. Parece que no funciona, parece que no puedo averiguar cómo configurar "Visible" en verdadero/falso. ¿Cómo puedo hacer eso? Además, ¿es esa la mejor manera de ocultar/mostrar un control ASP.NET desde una función de Javascript?

Gracias, Jeff

+0

¿Por qué todos los que respondieron conseguir atacó con downvotes? –

+1

Bajé algunas de ellas porque no eran más que los recién llegados repitiendo lo que ya decía un par de personas, y ni siquiera les importa responder a todas las preguntas de la OP, sino que simplemente lanzan una única respuesta. La respuesta de esta pregunta es más compleja que el.style.display = 'none' –

+0

Las respuestas repetidas estuvieron separadas por aproximadamente un minuto. Todos formulábamos nuestras respuestas al mismo tiempo. –

Respuesta

24

La propiedad "Visible" de un control ASP.NET determina si es o no se representará en el cliente (es decir, envía al cliente). Si es falso cuando se representa la página, nunca llegará al cliente.

Por lo tanto, técnicamente no puede establecer esa propiedad del control.

Dicho esto, si el control se representar en el cliente debido a que la propiedad Visible es cierto cuando se representa la página, a continuación, puede ocultarlo usando javascript así:

var theControl = document.getElementById("txtEditBox"); 
theControl.style.display = "none"; 

// to show it again: 
theControl.style.display = ""; 

Eso supone que la El atributo id del control realmente es "txtEditBox" en el cliente y que ya está visible.

Además, ¿es esa la mejor manera de ocultar/mostrar un control ASP.NET desde una función de Javascript?

no hay necesariamente una "mejor", aunque un mejor enfoque consiste en utilizar las definiciones de clase CSS:

.invisible { display: none; } 

Cuando se desea ocultar algo, de forma dinámica aplicar esa clase para el elemento; cuando quieras volver a mostrarlo, quítalo. Tenga en cuenta que creo que esto solo funcionará para elementos cuyo valor display comience como block.

+0

¿Cuáles son las otras opciones para "style.display"? ¿Cómo lo muestro de nuevo? – Yttrium

+0

Actualicé con la respuesta ... –

+0

No hay pista ... pero gracias por señalar la duplicación insana ... He eliminado mi copia: P –

5

en lugar de utilizar visible, establezca su css de display: none

//css: 
.invisible { display:none; } 

//C# 
txtEditBox.CssClass = 'invisible'; 
txtEditBox.CssClass = ''; // visible again 

//javascript 
document.getElementById('txtEditBox').className = 'invisible' 
document.getElementById('txtEditBox').className = '' 
3

Esto debería ocultar el control:

theControl.style.display = 'none'; 
+0

¿Qué es esto? Todos los demás ya repitieron esto, ad nauseum. Esto solo agrega más desorden a la página. –

+0

Sin mencionar que ni siquiera responde todas sus preguntas. Intente formular una respuesta más larga y más pensada la próxima vez en lugar de una única vez con la esperanza de obtener puntos de reputación. –

+0

Oh, eres un tipo de VB ... eso lo explica. : P –

5

Establecer el estilo de "display: none".

var theControl = document.getElementById("<%= txtEditBox.ClientID %>"); 
theControl.style.display = "none"; 
+0

Ese "txtEditBox.ClientID" es un toque importante; si es runat = "servidor", lo necesitará siempre.+1 – ojrac

+0

No lo necesita cada vez; solo lo necesita si el control no está directamente en una página que no tiene una página maestra. Si está en una página ASPX simple, la ID seguirá siendo la misma. –

+0

Tiene usted razón ... Estoy acostumbrado a usar siempre las páginas maestras ASP.NET ... + 1 –

3

Puede usar la propiedad de pantalla para esto. Pero como notó Jason, esta es una propiedad DHTML DOM (lado del cliente) que es completamente independiente de la propiedad Visible ASP.NET (lado del servidor) que controla la representación.

theControl.style.display = "none"; 

Display Property

1

que desea establecer la propiedad de estilo de visualización 'none' (ocultar) o null para mostrar.

var theControl = document.getElementById("txtEditBox"); 

    theControl.style.display = 'none'; 

    theControl.style.display = null; 

Hacerlo de la manera jQuery:

$('#txtEditBox').hide(); 

    $('#txtEditBox').show(); 
3

No se puede ocultar/mostrar la versión ASP.NET del control, como que sólo existe en un contexto de servidor. Para usar JavaScript, debe jugar con el estilo de control/estado de visibilidad.

El único tipo de forma de hacerlo sería para envolver el control en un UpdatePanel y tener algo como esto:

<asp:UpdatePanel ID="panel" runat="server"> 
    <ContentTemplate> 
    <asp:TextBox ID="myTextBox" runat="server" /> 
    </ContentTemplate> 
    <Triggers> 
    <asp:AsynchronousPostbackTrigger ControlID="button" EventName="Click" /> 
    </Triggers> 
</asp:UpdatePanel> 
<asp:Button ID="button" runat="server" OnClick="toggle" Text="Click!" /> 

entonces usted necesita esto en su código detrás:

protected void toggle(object sender, EventArgs e){ 
    myTextBox.Visibility = !myTextBox.Visibility; 
} 

Ahora, cuando hace clic en el botón, se produce una devolución de datos asincrónica y actualizará UpdatePanel.

Nota: Esto no es una buena solución , ya que será una petición AJAX muy pesado, ya que es necesario someter el ViewState.

Además, puede que no sea 100% correcto, lo hice de memoria.

+0

¡Mierda, habla de recorrer el largo camino a casa! –

+0

Oye, nunca dije que fuera una BUENA solución, solo una solución enteramente .NET;) ¡Si no vas a usar display = "none" entonces eres un tonto! Acabo de ver que cada una de esas soluciones se ha votado negativamente, pensó que quizás se quería una solución pura de ASP.NET: P –

+0

Lo que da miedo es que usted y yo sabemos que esta no es una buena manera de hacerlo, pero Estoy dispuesto a apostar que alguien verá tu solución y pensar "Oye, esa es una gran manera de hacerlo, ¡no hay JavaScript!" - Esa gente me asusta. :) –

1

O si no desea utilizar css:

<asp:TextBox ID="txtBox" runat="server" style="display:none;"> 
Cuestiones relacionadas