Skip Navigation Links
Novas Tecnologias
Ferramentas Adicionais
Ferramentas Adicionais


Dica No :
1048
Assunto : ASP.NET
Titulo: Desabilitar botão após o click em execução Ajax

Gostou do texto ? Vote e dê sua opinião! Pontuação atual :

Translate this page now :






Adicione aos Favoritos!
BlogBlogs Rec6 Linkk Ueba Technorati Delicious DiggIt! StumbleUpon



Um problema comum na web é o usuário clicar mais de uma vez no botão para realizar o processamento que deseja.

A solução tipicamente é simples : Desabilite o botão via javascript quando ele for clicado. Publicamos uma solução para isso em http://www.bufaloinfo.com.br/dicas.aspx?cod=894.

Porém este método funciona apenas nesta condição específica : um botão com "useSubmitBehavior" como false. Então vamos ver como fariamos uma solução mais genérica em especial com uso de ajax e updatePanel.

Temos o seguinte HTML :

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<p>
&nbsp;</p>
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
Aguarde
</ProgressTemplate>
</asp:UpdateProgress>

O seguinte código para o botão Button1 :

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

Threading.Thread.Sleep(5000)
Label1.Text = "testando"

End Sub

Em C# :


public void Button1_Click(object sender, System.EventArgs e)
{
Threading.Thread.Sleep(5000);
Label1.Text= "testando";
}


O Sleep irá garantir uma certa demora para podermos ver claramente o efeito de nosso código. Testando a aplicação apenas desta forma, veremos a mensagem de "Aguarde" (exibida pelo updateProgress) porém o botão continuará ativo, permitindo que o usuário clique multiplas vezes.

O segredo para resolvermos isso é interceptarmos eventos do objeto PageRequestManager do Ajax. Este objeto possui eventos OnBeginRequest (quando uma requisição ao servidor se inicia) e OnEndRequest (quando uma requisição ao servidor se encerra). Tudo isso precisará ser feito via javascript.

Veja como fica o código :

<script language="javascript" type="text/javascript">

//Acessa o objeto PageRequestManager
var manager = Sys.WebForms.PageRequestManager.getInstance();

//Adiciona os handlers para os eventos desejados, cada um é uma função
manager.add_beginRequest(OnBeginRequest);
manager.add_endRequest(OnEndRequest);



function OnBeginRequest(sender, args) {
$get("Button1").disabled = true;
}

function OnEndRequest(sender, args) {
$get("Button1").disabled = false;
}
</script>

Com este padrão de código podemos não apenas ativar/desativar um botão, como realizar qualquer tarefa no inicio e término de uma requisição Ajax.


Nome :
E-mail:
Comentarios :
 
 
Os Últimos Comentários
data: 2/1/2017 3:06:00 AM
nome: NCKsYWDoXnlUe
email: derby451@hotmail.com
comentário:
7yjnlp http://www.y7YwKx7Pm6OnyJvolbcwrWdoEnRF29pb.com

data: 1/31/2017 10:35:00 AM
nome: qDPOIuETRjDM
email: derby451@hotmail.com
comentário:
d0TNC7 http://www.y7YwKx7Pm6OnyJvolbcwrWdoEnRF29pb.com

data: 1/30/2017 2:15:00 AM
nome: irEnMqUkCyLTuTT
email: derby451@hotmail.com
comentário:
qynAwn http://www.y7YwKx7Pm6OnyJvolbcwrWdoEnRF29pb.com

data: 1/30/2017 12:58:00 AM
nome: SrIPzFLWbv
email: jogcbfn@hotmail.com
comentário:
Wqw2si http://www.y7YwKx7Pm6OnyJvolbcwrWdoEnRF29pb.com

data: 1/29/2017 7:52:00 AM
nome: MfyeqFYzLkWiPDdb
email: jogcbfn@hotmail.com
comentário:
nzKJn0 http://www.y7YwKx7Pm6OnyJvolbcwrWdoEnRF29pb.com

 1  
Dicas
Dica do Dia
Receba Dicas Por Email
E-mail :  
 


 (help)
Aceito receber informativos do devASPNet, informações de eventos e treinamentos

Veja Quais Informativos Você Receberá

Pesquisar Dicas
Pesquisar Artigos, Dicas e Noticias

Banco de Dados
Algumas Entrevistas
Links Importantes

Búfalo Informática, Treinamento e Consultoria
R. Alvaro Alvim, 37/920 Centro - Cinelândia - Rio de Janeiro Cep: 20031-010
Tel : (21) 2262-1368 (21) 9240-5134 E-mail : Contato@bufaloinfo.com.br