Web Design that taps into the haromny and vision of your dreams.

ASP.Net Disable Buttons during AJAX Postback

Disable controls on postback

By on in Coding

396 words, estimated reading time 2 minutes.

It is an often overlooked requirement to disable controls on postback during an AJAX postback event to prevent repetitive clicking, a minor problem which can become more serious depending on the action being taken. Payment processing, for example, can result in multiple payments or orders if not handled correctly.

I'll start off with a very basic AJAX form - a single button and an UpdateProgress control and from here we'll loot at how to disable controls on postback.

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>
 
        <asp:UpdatePanel ID="updPanel1" runat="server">
            <ContentTemplate>
                <asp:Button runat="server" Text="Submit" ID="btnSubmit" OnClick="btnSubmit_Click"/>
                <asp:UpdateProgress runat="server" ID="ajaxProgress">
                <ProgressTemplate>Please wait...</ProgressTemplate>
                </asp:UpdateProgress>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</form>

I have bound the OnClick event to the btnSubmit_Click which will create a delay of 5 seconds.

protected void btnSubmit_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(5000);
}

If you create a new AJAX enabled website, copy the above code and run the site you will notice that when you click the button the progress is shown and you can click the button as many times as you want. Depending on your situation this can cause many undesirable effects such as multiple record creating, duplicate payment processing and higher server loads.

This can all be combated using the following Javascript. The only thing you need to do is change the name of the button to whatever you are calling it. You can also add in the name of any other control on the form - text boxes, drop down lists and so on. These will also be disabled while the postback is in progress. Remember to modify both the instances where btnSubmit exists otherwise you may find that your controls do not get enabled again.

<script type="text/javascript">
(function() {  
  Sys.Application.add_load(setupButtonDisablers);  
 
  function setupButtonDisablers() {  
     Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(onPageLoad);  
     Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(onSubmit);  
     Sys.Application.remove_load(setupButtonDisablers);  
  }  
 
  function onPageLoad() {  
     findAndEnable('<%= btnSubmit.ClientID %>'); // Change this
  }  
 
  function onSubmit() {  
     findAndDisable('<%= btnSubmit.ClientID %>'); // Change this
  }  
 
  function findAndDisable(id) {  
     findAndSetDisabledProperty(id, true);  
  }  
 
  function findAndEnable(id) {  
     findAndSetDisabledProperty(id, false);  
  }  
 
  function findAndSetDisabledProperty(id, value) {  
     var control = $get(id);  
     if (control) {  
         control.disabled = value;  
     }  
  }  
})();  
</script>

Last updated on: Wednesday 21st June 2017

 

Comments

Have a question or suggestion? Please leave a comment to start the discussion.

 

Leave a Reply

Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Your email address will not be published.