web-dev-qa-db-fra.com

Empêcher le double clic sur le bouton asp.net

Je réalise que cette question a été posée mais aucune des réponses n’a fonctionné pour mon projet.

J'ai un bouton qui, lorsqu'il est cliqué, appelle une API, il y a donc un délai d'une seconde.

J'ai essayé plusieurs choses que rien ne fonctionne.

btnSave.Attributes.Add("onclick", " this.disabled = true; " + ClientScript.GetPostBackEventReference(btnSave, null) + ";");

Même cela ne fait rien.

asp.netbutton
18
WhiteSpider

Empêcher le double-clic .Veuillez ajouter le code ci-dessous dans votre page ASPX.

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

   Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
   function BeginRequestHandler(sender, args) { var oControl = args.get_postBackElement(); oControl.disabled = true; }

</script>
24
Deepak Joshi

Cette solution est simple et efficace. Sur votre bouton, incluez ce code: 

OnClientClick="return CheckDouble();"

Et partout où vous voulez que votre JavaScript - par exemple. Au bas de votre page:

<script type="text/javascript">
   var submit = 0;
   function CheckDouble() {
     if (++submit > 1) {
     alert('This sometimes takes a few seconds - please be patient.');
     return false;
   }
 }
 </script>
16
Anthony Denahy

Vous pouvez empêcher le double-clic en utilisant ce code:

Me.btnSave.Attributes.Add("onclick", "this.disabled=true;")
Me.btnSave.UseSubmitBehavior = False

Vous pouvez donc utiliser btnSave_Click pour appeler votre API.

J'ai généralement beaucoup de Validators dans ma Page: paramètre Validator.SetFocusOnError = True je peux exécuter ce code pour réactiver le bouton d'enregistrement si la validation échoue.

Me.YourControl.Attributes.Add("onfocus", Me.btnSave.ClientID & ".removeAttribute('disabled');")
2
tezzo

La plupart des suggestions ci-dessus n'ont pas fonctionné pour moi. Celui qui a fonctionné a été le suivant par tezzo:

Me.btnSave.Attributes.Add("onclick", "this.disabled=true;")
Me.btnSave.UseSubmitBehavior = False

Plus simple encore, plutôt que d'utiliser ce qui précède dans le code-behind, utilisez simplement ce qui suit:

   <asp:Button ID="btnSave" runat="server" Text="Save" 
      UseSubmitBehavior="false"
      OnClientClick="this.disabled='true';" 
   </asp:button>

UseSubmitBehavior = "false" est la clé.

1
Dan H.

Empêcher le double clic. S'il vous plaît ajouter le code ci-dessous dans votre page aspx

<script type = "text/javascript">
function DisableButton() {
document.getElementById("<%=Button1.ClientID %>").disabled = true;
}
window.onbeforeunload = DisableButton;
</script>
0
sheshadri

Au début, ma solution est la suivante:

<script>
function disableButton(btn) {
    setTimeout(function () { btn.disabled = true; }, 20);
    return true;
}
</script>
<asp:Button runat="server" ID="btnSave" Text="Save" OnClick="btnSave_Click" OnClientClick="return disableButton(this);" />

Sans setTimeout, le bouton sera immédiatement désactivé et l'événement OnClick ne sera pas déclenché. L'inconvénient de cette approche est que le bouton Enregistrer ne sera plus accessible si une validation échoue ou si une erreur survient. 

Donc, je ne pense pas que désactiver le bouton soit une bonne solution et proposer une autre solution:

     function disableButton(btn) {
        if (btn.hasclicked) return false;
        btn.hasclicked = 1;
        btn.onmouseenter = function () { this.hasclicked = 0; };
        return true;
    }

Mais mon collègue fait remarquer que si le post-traitement est très lent, l'utilisateur est toujours en mesure d'effectuer la double publication en laissant-entrer-cliquer dessus. J'ai donc trouvé deux autres solutions:

  1. Exécutez la validation du client avant de soumettre le formulaire. Toutefois, si votre page contient plusieurs groupes de validation, il est indiqué que le Page_ClientValidate () suivant doit être appelé plusieurs fois avec un paramètre ValidationGroup transmis: par ex. Page_ClientValidate ("groupe1"):

function disableButton(btn) {
  if (Page_ClientValidate) {
    Page_ClientValidate();
    if (!Page_IsValid) {
      btn.setAttribute("btnClicked", "n");
      return true;
    }
  }
  if (btn.getAttribute("btnClicked") == "y") {
    return false;
  } else {
    btn.setAttribute("btnClicked", "y");
    return true;
  }
}

  1. Comme ASP.NET n'a qu'un seul formulaire dans une page (pas ASP.NET MVC), nous pouvons également laisser l'événement client onsubmit du formulaire pour intercepter le double-clic:

    function disableButton(btn) {
$("form").submit(function () {
    if (btn.getAttribute("btnClicked") == "y") 
        return false;
    else 
        btn.setAttribute("btnClicked", "y");
        return true;
});}

    Je vais demander à QA de tester ces deux approches (Post edit: QA a prouvé qu'il était très dangereux d'utiliser cette approche. Veuillez vous reporter à mes commentaires suivants pour plus de détails ).

0
wcb1