Cambiar la visibilidad de la etiqueta ASP.NET con JavaScript

Question

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

¿Qué puedo hacer para resolver esto?

Answer 1

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

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

Luego, podrías hacerlo visible en el lado del cliente con:

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

Podrías ocultarlo nuevamente con:

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

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

Answer 2

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 utilice código del lado del servidor para hacer esto porque requeriría una devolución de datos.En lugar de usar Visibility="false", puedes simplemente establecer una propiedad CSS que oculte el botón.Luego, en javascript, vuelva a cambiar esa propiedad cada vez que desee mostrar el botón nuevamente.

El ClientID se utiliza porque puede ser diferente del ID del servidor si el botón está dentro de un control de contenedor de nombres.Estos incluyen Paneles de varios tipos.

Answer 3

Siguiendo con lo que David Ward dicho:

• No puedes configurar el Visible propiedad a false porque el control no se representará.
• Deberías usar el Estilo propiedad para establecer su mostrar a ninguno.

---

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 de 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 ya sea configurando variables globales o mediante un parámetro de función como en mi ejemplo.

Answer 4

Tienes que tener cuidado con XSS al hacer cosas como esta:

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

Lo más probable es que nadie pueda alterar el ClientID de Label1 en este caso, pero para estar seguro es posible que desee pasar su valor a través de uno de los Biblioteca AntiXss métodos:

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

Answer 5

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, por lo que también se encarga de mostrarlos.Esto puede ir en la carga de la página o en un método para actualizar los controles de la página.

Answer 6

Si espera hasta que se cargue la página y luego configura la visualización del botón en ninguno, debería funcionar.Luego podrás hacerlo visible en un momento posterior.

Answer 7

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