How to disable subsequent submit button clicks when a request is being processed in ASP.NET AJAX client side script code

By atverma, 24 Jul 2010

During asynchronous postback, e.g., a click of a button, one may decide that until the current request completes, the user shall not be able to click the button.

In the code snippet below, I have displayed how we can achieve this. We have a Form on which we have Script Manager which contains the Update Panel. This Update Panel contains a Button and a UpdateProgress control. We need to disable the subsequent clicks of this Button when a request is being processed in ASP.NET AJAX client script code.

In order to achieve the same:

I have used PageRequestManager and attached initializeRequest handler to CancelPostbackForSubsequentSubmitClicks
In CancelPostbackForSubsequentSubmitClicks, check if async postback is in progress using isInAsyncPostBack property of PageRequestManager and postback is generated by this Button, then cancel this request

<%@ Page Title="Test Disable Subsequent Submit Clicks Page" 
	Language="C#" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="_Default" %>
<body>
    <form id="Form1" runat="server" action="Default.aspx">
    <div>
        <asp:ScriptManager ID="ScriptManager" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="AsynUpdatePanel" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
            <!-- Here on click is a long running operation e.g. 30 secs -->
                <asp:Button ID="Submit" runat="server" 
			OnClick="Submit_Click" Text="Submit" />
                <asp:UpdateProgress ID="UpdateProgress" 
			runat="server" AssociatedUpdatePanelID="AsynUpdatePanel"
                    DynamicLayout="False">
                    <ProgressTemplate>
                        Update in Progress...</ProgressTemplate>
                </asp:UpdateProgress>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

    <!-- Here we are blocking the subsequent requests using client side scripting -->
    <!-- Also instead of alert one can customize the way he wants to handle -->
    <script type="text/javascript" language="javascript">
        var requestManager = Sys.WebForms.PageRequestManager.getInstance();
        requestManager.add_initializeRequest(CancelPostbackForSubsequentSubmitClicks);

        function CancelPostbackForSubsequentSubmitClicks(sender, args) {
            if (requestManager.get_isInAsyncPostBack() & 
		args.get_postBackElement().id == 'Submit')
            {
                args.set_cancel(true);                
                alert('A previous request is still in progress 
		that was issued on clicking ' + args.get_postBackElement().id);
            }
        }
    </script>
    </form>
</body>

protected void Submit_Click(object sender, EventArgs e)
{
    //A long running operation
    System.Threading.Thread.Sleep(30000);
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

atverma

Software Developer (Senior)

India

Member

Follow on Twitter

Atul works at Microsoft as a .NET consultant. As a consultant his job is to design, develop and deploy enterprise level secure and scalable solutions using Microsoft Technologies.

His technical expertise include .NET Framework(4.0, 3.5, 3.0), WPF, WCF, SharePoint 2010, ASP.net, AJAX, Web Services, Enterprise Applications, SQL Server 2008, Open Xml, MS Word Automation.

Follow him on twitter @verma_atul

He blogs at
http://www.atulverma.com
http://blogs.msdn.com/b/atverma

Article Top