ASP.NETでボタンをクリックした後にそのボタンを使用不可にした場合

13358 ワード

原文:劉武|ASP.NETでボタンをクリックした後にそのボタンを使用不可にした場合
プロジェクトではユーザが重複して提出することがしばしば発生するが,これを防止するためには,ユーザがボタンをクリックした後にこのボタンを使用できないようにすることが最も一般的であり,筆者は実際の開発で様々な状況に遭遇したが,ここでは参考にするためにまとめた.
1つ目はsubmitタイプ以外のボタンです
この場合、クライアントにイベントを追加し、ボタンを使用不可にすれば簡単です.次のコードを見てください.
ASP.NET-Code:
<form id="form1" runat="server">
        <asp:Label ID="lbl" runat="server"></asp:Label>
        <asp:Button ID="btn" runat="server" Text="Test"
            OnClick="btn_Click" OnClientClick="this.disabled=true"
            UseSubmitBehavior="false" />
</form>



protected void btn_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(1000);
    lbl.Text = DateTime.Now.ToString();
}



2番目のケースはsubmitタイプのボタン


このとき第1の方法はだめで、ボタンがDISABLEDに設定された後にコミットを完了することができなくて、私達は適切にコードを修正することができます:



<form id="form1" runat="server">
    <asp:Label ID="lbl" runat="server"></asp:Label>
    <asp:Button ID="btn" runat="server" Text="Test"
        OnClick="btn_Click"/>
</form>




protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        btn.OnClientClick = "this.disabled=true;" +
            GetPostBackEventReference(btn);
    }
}


最初の方法とは違ってPage_Loadではボタンにクライアントイベントを追加し、GetPostBackEventReferenceを追加します.しかし、このようにするにはまだ欠陥があり、最初の再送が完了した後、ボタンをクリックすると失敗するため、if(!Page.IsPostBack)という文を削除する必要があります.つまり、再送のたびにクライアントイベントを繰り返しバインドする必要があります.


第3のケースは第1のケースと似ていますが、UpdatePanel

が複数あるだけです.

<asp:UpdatePanel ID="up1" runat="server" >
    <ContentTemplate>
        <asp:Label ID="lbl" runat="server"></asp:Label>
        <asp:Button ID="btn" runat="server" Text="Test"
            OnClick="btn_Click"
            OnClientClick="this.disabled=true;"
            UseSubmitBehavior="false" />
    </ContentTemplate>
</asp:UpdatePanel>



4番目のケースもUpdatePanelの中にありますが、2番目のケースと同様にSubmitタイプのボタン


と第2のケースは異なり、if(!Page.IsPostBack){}でイベントをバインドするだけで、クライアントイベントを最初のロード時にバインドできます.


5番目と4番目の違いは、ボタンがUpdatePanelの外にあり、指定したUpdatePanel

をフリップフロップでリフレッシュすることです

4つ目の方法を押すと、ボタンをクリックした後に使用不可にすることができますが、再送が完了した後、このボタンは使用可能な状態に戻りません:



<asp:UpdatePanel ID="up1" runat="server">
    <ContentTemplate>
        <asp:Label ID="lbl" runat="server"></asp:Label>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btn"
            EventName="Click" />
    </Triggers>
</asp:UpdatePanel>
<asp:Button ID="btn" runat="server" Text="Test"
    OnClick="btn_Click" />




protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        btn.OnClientClick = "this.disabled=true;" +
            GetPostBackEventReference(btn);
    }
}
protected void btn_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(1000);
    lbl.Text = DateTime.Now.ToString();
}


この問題を解決するために、最も簡単な方法は、このボタンを別のUpdatePanelに入れることで、毎回元の状態に戻すことができます.また、Atlasのページサイクルに応じて、コミットが完了した後に明示的にこのボタンを使用可能にすることもできます.