web-dev-qa-db-ja.com

asp.netボタンのダブルクリックを防止

私はこの質問が尋ねられたことに気づきましたが、答えはどれも私のプロジェクトではうまくいきませんでした。

クリックするとAPIを呼び出すボタンがあるため、1秒の遅延があります。

何も機能しないことをいくつか試しました。

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

それでも何もしません。

asp.netbutton
20
WhiteSpider

ダブルクリックを防ぎます。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>
27
Deepak Joshi

このソリューションはシンプルで効果的です。ボタンに次のコードを含めます。

OnClientClick="return CheckDouble();"

JavaScriptが必要な場所-たとえばページの下部：

<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>
20
Anthony Denahy

このコードを使用してダブルクリックを防ぐことができます：

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

したがって、btnSave_Click AP​​Iを呼び出します。

通常、ValidatorsにはPageがたくさんあります：Validator.SetFocusOnError = True検証が失敗した場合、このコードを実行して保存ボタンを再度有効にすることができます。

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

上記の提案のほとんどは、私にとってはうまくいきませんでした。動作したのはtezzoによる次のとおりです。

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

コードビハインドで上記を使用するのではなく、さらに単純に、次を使用します。

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

seSubmitBehavior = "false"がキーです。

1
Dan H.

ダブルクリックを防ぎます。aspxページに以下のコードを追加してください

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

最初に私の解決策はこのようなものです：

<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);" />

SetTimeoutがなければ、ボタンはすぐに無効になり、OnClickイベントは発生しません。このアプローチの欠点は、検証に失敗した場合やエラーが発生した場合に[保存]ボタンにアクセスできなくなることです。

したがって、ボタンを無効にすることは良い解決策ではないと思い、別の解決策を考え出します。

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

しかし、私の同僚は、ポスト処理が非常に遅い場合、終了する前に、ユーザーがボタンを離してEnterキーを押しながらクリックすることでダブルポストバックを実行できることを指摘しています。だから私は別の2つの解決策を見つけました：

  1. フォームを送信する前に、クライアントから検証を実行します。しかし、ページに複数のValidationGroupが含まれる場合、渡されたValidationGroupパラメーターを使用して、次のPage_ClientValidate（）を複数回呼び出す必要があると言われています。 Page_ClientValidate（ "group1"）：
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. ASP.NETにはページ内にフォームが1つしかないため（ASP.NET MVCではない）、フォームのonsubmitクライアントイベントにダブルクリックをインターセプトさせることもできます。

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

    QAにこれらの2つのアプローチをテストするように依頼します（編集後：QAは、このアプローチを使用することは非常に危険であると証明しました。詳細については、以下のコメントを参照してください）。

0
wcb1

この方法を試してください、それは実用的なソリューションです：

Opera jsをサポートしないモバイルブラウザーを含むすべてのブラウザーの場合、フォームがそのタイプのブラウザーでブロックされないことを意味します。

これをPage_load（）メソッドに追加します。

BtnID.Attributes.Add("onclick", "if(typeof (Page_ClientValidate) === 'function' && !Page_ClientValidate()){return false;} this.disabled = true;this.value = 'Working...';" + ClientScript.GetPostBackEventReference(BtnID, null) + ";");
0
X-Coder