Alterar a visibilidade do rótulo ASP.NET com JavaScript

StackOverflow https://stackoverflow.com/questions/7773

  •  08-06-2019
  •  | 
  •  

Pergunta

Eu tenho uma página ASP.NET com um asp:button que não está visível.Não consigo torná-lo visível com JavaScript porque ele não é renderizado na página.

O que posso fazer para resolver isso?

Foi útil?

Solução

Se precisar manipulá-lo no lado do cliente, você não poderá usar a propriedade Visible no lado do servidor.Em vez disso, defina seu estilo de exibição CSS como “nenhum”.Por exemplo:

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

Então, você poderia torná-lo visível no lado do cliente com:

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

Você poderia ocultá-lo novamente com:

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

Lembre-se de que pode haver problemas com o ClientID ser mais complexo do que "Label1" na prática.Você precisará usar o ClientID com getElementById, não o ID do lado do servidor, se eles forem diferentes.

Outras dicas

Experimente isso. 

<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>

Não use código do lado do servidor para fazer isso porque isso exigiria um postback.Em vez de usar Visibility="false", você pode simplesmente definir uma propriedade CSS que oculta o botão.Então, em javascript, troque essa propriedade sempre que quiser mostrar o botão novamente.

O ClientID é usado porque pode ser diferente do ID do servidor se o botão estiver dentro de um controle Naming Container.Estes incluem painéis de vários tipos.

Continuando com o que Dave Ward disse:

  • Você não pode definir o Visível propriedade como false porque o controle não será renderizado.
  • Você deve usar o Estilo propriedade para definir mostrar para nenhum.

Design de página/controle

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

<asp:Button runat="server" ID="Button1" />

Código por trás

Em algum lugar na seção de carga:

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

Arquivo Javascript

function ToggleVisibility(elementID)
{
    var element = document.getElementByID(elementID);

    if (element.style.display = 'none')
    {
        element.style.display = 'inherit';
    }
    else
    {
        element.style.display = 'none';
    }
}

Claro, se você não quiser alternar, mas apenas mostrar o botão/rótulo, ajuste o método javascript de acordo.

O importante aqui é que você precisa enviar as informações sobre o ClientID do controle que você deseja manipular no lado do cliente para o arquivo javascript definindo variáveis ​​globais ou através de um parâmetro de função como no meu exemplo.

Você precisa ter cuidado XSS ao fazer coisas assim:

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

As chances são de que ninguém será capaz de adulterar o ClientID de Label1 neste caso, mas apenas para garantir a segurança, você pode querer passar seu valor por meio de um dos Biblioteca AntiXss métodos:

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

Esta é a maneira mais fácil que encontrei:

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

Eu tenho o oposto no Else, então ele também consegue exibi-los.Isso pode ocorrer no carregamento da página ou em um método para atualizar os controles da página.

Se você esperar até que a página seja carregada e definir a exibição do botão como nenhuma, isso deverá funcionar.Então você pode torná-lo visível posteriormente.

Certifique-se de que a propriedade Visible esteja definida como verdadeira ou o controle não será renderizado na página.Então você pode usar o script para manipulá-lo.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top