Alterar a visibilidade do rótulo ASP.NET com JavaScript
-
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?
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.