Tags: , , , | Categories: ASP.NET, JavaScript Posted by Rafael on 14/10/2010 08:32 | Comentários (4)

Meses atrás eu me deparei com um pequeno problema. Eu precisava fazer com que um botão de uma página ASP.NET fosse desabilitado no clique, e o evento Click do mesmo fosse disparado.

Existem diversas maneiras de implementar essa solução, inclusive com padrões de projeto e melhores práticas. Porém, todo padrão deve ser utilizado com bom senso (falarei mais sobre isso em posts futuros), ou então, poderemos criar uma bazuca para matarmos uma mosca. Não faz o menor sentido.

Sou um grande adepto da utilização de padrões de projeto, porém, busco sempre um meio termo, um "ponto ótimo" ou "ponto de equilíbrio".

Assim sendo, nas circunstâncias que eu me encontrava, implementei da maneira mais rápida e prática possível, resolvendo muito bem o problema, e no tempo que eu precisava.

Até a chamada do evento Click ao clicar, nada demais. Com as facilidades do Microsoft Visual Studio, bastam dois cliques no botão, que o método Click é criado e associado ao botão, juntamente com o evento. Tudo muito rápido e fácil.

Aqui está o código gerado na página ASP.NET, seguido do código gerado no CodeBehind da mesma:

<asp:Button ID="botao" runat="server" Text="Clique" onclick="botao_Click"/>



protected void botao_Click(object sender, EventArgs e)

{

            

}

 

Legal, o evento clique já foi associado a um método pelo atributo onclick.

Existe um atributo chamado OnClientClick que é utilizado para invocar scripts no lado do cliente (client side), ou seja, é utilizado para invocar scripts da própria página. Assim que o evento Click é disparado, o script contido ou referenciado no atributo OnClientClick é invocado, e, se o retorno do script for true, o método associado ao atributo onclick é invocado.

O script em JavaScript e o código do botão da página ASP.NET ficaram assim:

<script type="text/javascript">

    function desabilitarBotao() {

        document.getElementById("botao").disabled = true;

    }

<script>



<asp:Button ID="botao" runat="server" Text="Clique" onclick="botao_Click" 

          OnClientClick="javascript:return desabilitarBotao();"/>

 

Tudo parece estar correto. Porém, quando executamos a página, o botão é desabilitado como desejado, porém, o método botao_Click não é invocado.

Isso ocorre porque o IE desabilita toda e qualquer ação do botão quando o mesmo é desabilitado, o que faz sentido. Se estamos desabilitando um objeto, não queremos que alguma ação relacionada a ele seja disparada.

Agora é que entra a função setTimeout do JavaScript. Vejamos os parâmetros dessa função: setTimeout(code, delay), onde code é o código que queremos adiar sua execução, e delay é o tempo que queremos adiar o código, expresso em milisegundos.

Vamos modificar o script, adicionando a função setTimeout:

<script type="text/javascript">

    function desabilitarBotao() {

        window.setTimeout('document.getElementById("botao").disabled = true;', 50);

        return true;

    }

<script>

 

Definimos um delay de 50 milisegundos.

Para testarmos se o botão é desabilitado e o método do CodeBehind realmente é chamado, inseri um breakpoint dentro do método, e executei a aplicação ASP.NET:

Botão da página desabilitado:

É isso. Espero ter ajudado de alguma forma.

Até a próxima!

Comentários

Gustavo Brazil on 14/03/2012 04:05 Ola, Eu Sou Um Porgramador iniciante do php e Gostaria de perguntar se a linguagem ASP Junto com o VBcraspt Pode Subistituir o PHP e JavaScript na Criação de WEB Paginas, PQ estou com muita dificuldade no Javascript, pq não consigo achar um padrão Definido, É uma Linguagem Sem Leis, Uma Variavel você pode SImplismente Criar Usando

<script>

nome = 'oi'

</script>



Sem A Utilização de $ nem de ; no final definindo que a Variavel Acabou Ali.. E tb as Funções, Vamos Colocando Palavras Sobre () ..

Me Confundi Muito.. Diferente do PHP...



Pode me Dar uma Opnião?
Rafael S. Fernandes Brazil on 18/03/2012 21:09 Olá Gustavo!



Parece que você está um pouco confuso. Creio que seja melhor conversarmos por e-mail, para que eu possa entender qual sua real necessidade.



Nos falamos em breve.



Grande abraço!

Rafael
Marco Filgueiras Brazil on 20/07/2012 03:20 Grande Rafael ! É isso aí ! Solução prática, engenhosa e sem exibicionismo técnico. Tem gente que adora falar em teoria e boas práticas mesmo quando elas são como "matar mosca com bazuca", como você falou. A regra básica no dia-a-dia ainda é o "make it simple" ! Gostei e já vou ficar esperto caso pegue um problema desses pela frente no futuro.
Rafael S. Fernandes Brazil on 23/07/2012 04:22 Grande Filgueiras!

Fico feliz em ter ajudado. Realmente é uma solução simples que pode nos ajudar no dia-dia.

Grande abraço!

Rafael
Os comentários estão fechados