mvc - ¿Cómo se configura la propiedad "Visible" de un control ASP.NET desde una función Javascript?

razor checkboxfor

Question

Básicamente, quiero saber la mejor manera de ocultar / mostrar un control ASP.NET desde una función de Javascript. Pensé que simplemente accedería al control en Javascript usando:

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

Luego, simplemente establezca la propiedad Visible del control en 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

Answer 1

Establezca el estilo en "mostrar: ninguno".

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

Answer 2

Esto debería ocultar el control:

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

Answer 3

Puede usar la propiedad de visualización 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";

Mostrar propiedad

Answer 4

en lugar de usar visible, configure su css para mostrar: none

//css:
.invisible { display:none; }
//C#
txtEditBox.CssClass = ''invisible'';
txtEditBox.CssClass = ''''; // visible again
//javascript
document.getElementById(''txtEditBox'').className = ''invisible''
document.getElementById(''txtEditBox'').className = ''''

Answer 5

Desea establecer la propiedad del estilo de visualización en ''ninguno'' (ocultar) o null para mostrar.

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

Haciéndolo de la manera jQuery:

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

Answer 6

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

Entonces, no se puede, técnicamente, establecer esa propiedad del control.

Dicho esto, si el control se representa en el cliente porque la propiedad Visible es verdadera cuando se representa la página, puede ocultarla usando javascript de esta manera:

var theControl = document.getElementById("txtEditBox");
theControl.style.display = "none";
// to show it again:
theControl.style.display = "";

Eso supone que el atributo de id del control es realmente "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 necesariamente hay una "mejor" manera, aunque un mejor enfoque es usar definiciones de clase CSS:

.invisible { display: none; }

Cuando desee ocultar algo, aplique dinámicamente esa clase al elemento; cuando quieras volver a mostrarlo, quítalo. Tenga en cuenta que creo que esto solo funcionará para elementos cuyo valor de display comience como block .

Answer 7

No puede ocultar / mostrar la versión ASP.NET del control ya que solo 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 ajustar 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 necesitas esto en tu código detrás:

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

Ahora, cuando haces clic en el botón, se produce una devolución de datos asíncrona y actualizará UpdatePanel.

Nota: Esta no es una buena solución, ya que será una solicitud AJAX muy pesada, porque debe enviar el ViewState.

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

Answer 8

O si no quieres usar css:

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