Click here to Skip to main content
Click here to Skip to main content
Technical Blog

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

, 24 Jul 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
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
<%@ 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>
            <!--<span class="code-comment"> Here on click is a long running operation e.g. 30 secs --></span>
                <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>

    <!--<span class="code-comment"> Here we are blocking the subsequent requests using client side scripting --></span>
    <!--<span class="code-comment"> Also instead of alert one can customize the way he wants to handle --></span>
    <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)

Share

About the Author

atverma
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
Follow on   Twitter

Comments and Discussions

 
GeneralQuestion PinmemberSomeGuyThatIsMe25-Oct-10 3:28 
GeneralHide Submit [modified] PinmemberAn3skmbi10-Aug-10 23:03 
GeneralMy vote 5 PinmemberYahya Mohammed Ammouri1-Aug-10 5:16 
GeneralRe: My vote 5 Pinmemberatverma1-Aug-10 9:20 
GeneralMy vote of 5 Pinmemberthatraja31-Jul-10 5:11 
GeneralRe: My vote of 5 Pinmemberatverma31-Jul-10 6:56 
GeneralVery deep thoughts Pinmembermajiangquan27-Jul-10 20:56 
GeneralRe: Very deep thoughts Pinmemberatverma27-Jul-10 22:57 
GeneralMy vote of 5 PinmemberMico_Perez_II26-Jul-10 2:20 
GeneralRe: My vote of 5 Pinmemberatverma27-Jul-10 2:36 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.141015.1 | Last Updated 24 Jul 2010
Article Copyright 2010 by atverma
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid