Click here to Skip to main content
15,868,016 members
Articles / Web Development / ASP.NET

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

Rate me:
Please Sign up or sign in to vote.
5.00/5 (7 votes)
24 Jul 2010CPOL 32K   13   10
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:

  1. I have used PageRequestManager and attached initializeRequest handler to CancelPostbackForSubsequentSubmitClicks
  2. 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>
C#
protected void Submit_Click(object sender, EventArgs e)
{
    //A long running operation
    System.Threading.Thread.Sleep(30000);
}
This article was originally posted at http://www.atulverma.com/feeds/posts/default

License

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


Written By
Software Developer (Senior)
India India
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

Comments and Discussions

 
GeneralVery deep thoughts Pin
majiangquan27-Jul-10 20:56
majiangquan27-Jul-10 20:56 
GeneralRe: Very deep thoughts Pin
atverma27-Jul-10 22:57
atverma27-Jul-10 22:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.