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

ASP.Net Disable Buttons during AJAX Postback

Disable controls on postback

Written By on in C#

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

There are no comments for this post. Be the first!

 

Leave a Reply

Your email address will not be published.





If you find something abusive or that does not comply with our terms or guidelines please flag it as inappropriate.

Copyright © 2001-2018 Tim Trott, all rights reserved. Web Design by Azulia Designs

This web page is licensed for your personal, private, non-commercial use only.

Disclaimer, Privacy & LegalSitemapContact Me