using update panel do sync job , update UI control async

Scenario :


1.click submit disable button ,start job 
2.once job done , enable submit button




Here is the implementation :


Aspx page Code :




Step 1: add update panel and script manager

  <form id="form1" runat="server">


     <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" />
                
            </ContentTemplate>
        </asp:UpdatePanel>


    </form>

Step 2: add javascript 

 <script type="text/javascript">
        
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(startRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
 
function startRequest(sender, e) {
document.getElementById("<%=Submit.ClientID%>").disabled = true;
       	 }


function endRequest(sender, e) {
            document.getElementById("<%=Submit.ClientID%>").disabled = false;
        }


    </script>

Step 3:


Code behind :

//Simulate a long time task


 protected void Submit_Click(object sender, EventArgs e)
        {
            Thread.Sleep(2000);
        }