Multiple Concurrent Postbacks when using UpdatePanels

Question

Here's an example app that I built to demonstrate my problem. A single aspx page with the following on it:

<form id="form1" runat="server">
    <asp:ScriptManager runat="server" />
    <asp:Button runat="server" ID="btnGo" Text="Go" OnClick="btnGo_Click" />
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <asp:TextBox runat="server" ID="txtVal1" />
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

Then, in code behind, we have the following:

protected void btnGo_Click(object sender, EventArgs e)
{
    Thread.Sleep(5000);

    Debug.WriteLine(string.Format("{0}: {1}", DateTime.Now.ToString("HH:MM:ss.fffffff"), txtVal1.Text));

    txtVal1.Text = "";
}

If you run this and click on the "Go" button multiple times you will see multiple debug statements on the "Output" window showing that multiple requests have been processed. This appears to contradict the documented behaviour of update panels (i.e. If you make a request while one is processing, the first requests gets terminated and the current one is processed).

Anyway, the point is I want to fix it. The obvious option would be to use Javascript to disable the button after the first press, but that strikes me as hard to maintain, we potentially have the same issue on a lot of screens it could be easily broken if someone renames a button.

Do you have any suggestions? Perhaps there is something I could do in BeginRequest in Global.asax to detect a duplicate request? Is there some setting or feature on the UpdatePanel to stop it doing this, or maybe something in the AjaxControlToolkit that will prevent it?

Answer 1

Make a custom control which inherits up from the asp Button and has script to disable and enable itself. The bellow isn't tested buts a starting point.

public class SafeButton : System.Web.UI.WebControls.Button{
public SafeButton()
{
 OnClientClick = "javascript to disable this button goes here";
 ScriptManager.RegisterStartupScript(this, this.GetType(), "keyforthis", "javascript to enable this button goes here", true);
}