(untagged)

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

atverma

0.00/5 (No votes)

24 Jul 2010

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

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

ASP.NET

<%@ 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 has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here