route - Cambiar la visibilidad de la etiqueta ASP.NET con JavaScript

forms asp net core

Question

Tengo una página ASP.NET con un botón asp: que no está visible. No puedo convertirlo en visible con JavaScript porque no se representa en la página.

¿Qué puedo hacer para resolver esto?

Answer 1

Asegúrese de que la propiedad Visible esté establecida en verdadero o que el control no se muestre en la página. Entonces puedes usar script para manipularlo.

Answer 2

Continuando con lo que dijo Dave Ward :

• No puede establecer la propiedad Visible en falso porque el control no se representará.
• Debería usar la propiedad Style para configurar su visualización en none .

Diseño de página / control

<asp:Label runat="server" ID="Label1" Style="display: none;" />
<asp:Button runat="server" ID="Button1" />

Código detrás

En algún lugar de la sección de carga:

Label label1 = (Label)FindControl("Label1");
((Label)FindControl("Button1")).OnClientClick = "ToggleVisibility(''" + label1.ClientID + "'')";

Archivo Javascript

function ToggleVisibility(elementID)
{
var element = document.getElementByID(elementID);
if (element.style.display = ''none'')
{
element.style.display = ''inherit'';
}
else
{
element.style.display = ''none'';
}
}

Por supuesto, si no desea alternar sino solo mostrar el botón / etiqueta, ajuste el método javascript en consecuencia.

El punto importante aquí es que debe enviar la información sobre el ClientID del control que desea manipular en el lado del cliente al archivo javascript configurando variables globales o mediante un parámetro de función como en mi ejemplo.

Answer 3

Si espera hasta que se cargue la página, y luego configura la pantalla del botón en ninguno, eso debería funcionar. Entonces puedes hacer que sea visible en un momento posterior.

Answer 4

Si necesita manipularlo en el lado del cliente, no puede usar la propiedad Visible en el lado del servidor. En su lugar, configure su estilo de visualización CSS en "ninguno". Por ejemplo:

<asp:Label runat="server" id="Label1" style="display: none;" />

Entonces, podría hacerlo visible en el lado del cliente con:

document.getElementById(''Label1'').style.display = ''inherit'';

Podrías esconderlo de nuevo con:

document.getElementById(''Label1'').style.display = ''none'';

Tenga en cuenta que puede haber problemas con ClientID siendo más complejo que "Label1" en la práctica. Deberá usar ClientID con getElementById, no la ID del lado del servidor, si difieren.

Answer 5

Debe tener cuidado con XSS cuando hace cosas como esta:

document.getElementById(''<%= Label1.ClientID %>'').style.display

Lo más probable es que nadie pueda manipular el ClientID de Label1 en esta instancia, pero para estar seguro, es posible que desee pasar su valor a través de uno de los métodos de la biblioteca AntiXss :

document.getElementById(''<%= AntiXss.JavaScriptEncode(Label1.ClientID) %>'').style.display

Answer 6

Prueba esto.

<asp:Button id="myButton" runat="server" style="display:none" Text="Click Me" />
<script type="text/javascript">
function ShowButton() {
var buttonID = ''<%= myButton.ClientID %>'';
var button = document.getElementById(buttonID);
if(button) { button.style.display = ''inherit''; }
}
</script>

No use el código del lado del servidor para hacer esto porque eso requeriría una devolución de datos. En lugar de usar Visibility = "false", puede establecer una propiedad de CSS que oculte el botón. Luego, en javascript, cambia esa propiedad cuando quieras volver a mostrar el botón.

ClientID se usa porque puede ser diferente de la identificación del servidor si el botón está dentro de un control de nombre de contenedor. Estos incluyen paneles de varios tipos.

Answer 7

Esta es la forma más fácil que encontré:

 BtnUpload.Style.Add("display", "none");
FileUploader.Style.Add("display", "none");
BtnAccept.Style.Add("display", "inherit");
BtnClear.Style.Add("display", "inherit");

Tengo lo opuesto en Else, así que maneja mostrarlos también. Esto puede ir en la carga de la página o en un método para actualizar los controles en la página.