Evitando clique duplo acidental em um botão
-
09-06-2019 - |
Pergunta
Eu tenho alguns controles que herdam dos botões do ASP.NET e usam 'onserverclick'.
Se o usuário clicar duas vezes, o botão dispara dois eventos no servidor.Como posso evitar isso?
Tentei definir "this.disabled='true'" após o clique (no atributo 'onclick') via javascript, mas isso também bloqueia o primeiro postback.
Solução
Veja este exemplo para desabilitar o controle no postback.Deve ajudá-lo a fazer o que você está tentando alcançar.
http://encosia.com/2007/04/17/disable-a-button-control-during-postback/
Outras dicas
Você não deseja necessariamente mostrar o botão desativado no postback.Você quer ter certeza de que eles não enviarão acidentalmente duas vezes.Portanto, desabilitar ou ocultar o botão como resultado de um lado do servidor a ação já é tarde demais no jogo.Neste ponto, o segundo pedido já está a caminho.Você precisa fazer isso com javascript ou garantir que o código do servidor não seja executado duas vezes.
No caso de um updatepanel e um botão dentro de um FormView-Template eu uso a seguinte abordagem:
<script type="text/javascript">
// Using that prm reference, hook _initializeRequest
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequestBuchung);
// Abfangen von Mehrfachklicks auf Buttons für asynchrone Postbacks im Updatepanel
function InitializeRequestBuchung(sender, args) {
var arrButtonIds = ["ButtonInsert", "ButtonUpdate"];
// Get a reference to the PageRequestManager.
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm.get_isInAsyncPostBack() & jQuery.inArray(args.get_postBackElement().id, arrButtonIds) > -1) {
args.set_cancel(true);
}
}
</script>
Isso cancela um postback seguinte se um postback assíncrono ainda estiver ativo.Funciona perfeitamente.
Alguém disse isso em algum lugar aqui há alguns dias, e eu concordo - use javascript para simplesmente esconder o botão em vez de desativá-lo;você pode mostrar uma imagem "giratória" em seu lugar, que permite ao usuário saber o que está acontecendo.
Em vez de me esconder, o que fiz foi trocar botões usando javascript.Mostre outra imagem acinzentada ao clicar no primeiro botão.
Defina a propriedade UseSubmitBehavior do botão como false.Em seguida, crie uma função OnClientClick que desative o botão.Seria algo assim:
<script type="text/javascript">
function disableFunctn(button){
button.disabled = true;
}
</script>
<asp:Button ID="button1" UseSubmitBehavior="false" OnClientClick="disableFunctn(this);"/>
maneira mais rápida e barata:
<asp:Button ID="button1" UseSubmitBehavior="false" OnClientClick="this.disabled=true;"/>
Você também pode tentar, por exemplo, btnSave.Enable = false;quando o botão é pressionado e antes que o processamento do botão seja feito na rotina Click Event.Se você precisar redefini-lo para permitir que seja ativado, tenha um botão separado que redefine o botão para reutilização.
Outro método é configurar o botão com verificação para que o usuário seja questionado se deseja Salvar, ele deverá aparecer nas duas vezes.
Ainda outro método seria sinalizar a primeira ocorrência e definir um pop-up para a segunda para verificar um segundo uso ou uso subsequente.