Page Asynchronous and Synchronous Postback page example - ASP.NET

Asynchronous postback and synchronous postback is a process submission back to the server. Only update panels elements are sent back to the server if you use async postback(AJAX) while synchronous postback will be sent all page content to the server back.

Today I will create one example to differentiate between async postback and sync postback.

The ASPX page

Register the ajax toolkit script manager :
     

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

Update Panel Content :

 
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="Button1" runat="server" Text="Do AsyncPostback Update" OnClick="Button1_Click" />
            <asp:Button ID="Button2" runat="server" Text="Do Postback Update" OnClick="Button2_Click" />
            <br />
            <asp:Label ID="Label1" runat="server"></asp:Label>
            <br />
            <div id="pageUpdating">
            </div>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="click" />
            <asp:PostBackTrigger ControlID="Button2" />
        </Triggers>
    </asp:UpdatePanel>

Optional: If you want to show that the page progress, you can register this script on your page 


 
<script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
        function BeginRequestHandler(sender, args) {
            writePageLoading();
        }
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler)
        function endRequestHandler(sender, args) {
            RemoveLoading();
            if (args.get_error() != undefined && args.get_error().httpStatusCode == '500') {
                var errorMessage = args.get_error().message
                alert(errorMessage + " . " + errorMessageAdditional);
            }
        }
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler)
        function pageLoadingHandler(sender, args) {
            writePageUpdating();
           
        }
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler)
        function pageLoadedHandler(sender, args) {
            RemoveLoading();
        }
        function writePageLoading() {
            var divPageUpdating = document.getElementById('pageUpdating');
            divPageUpdating.innerHTML = "Please Wait While Processing Your Request...";
        }
        function RemoveLoading() {
            var divPageUpdating = document.getElementById('pageUpdating');
            divPageUpdating.innerHTML = "";
        }
        function writePageUpdating() {
            var divPageUpdating = document.getElementById('pageUpdating');
            divPageUpdating.innerHTML = "Please Wait While System Updating Your Page...";
        }
    </script>

Code Behind :

 
  protected void Button1_Click(object sender, EventArgs e)
        {
            Thread.Sleep(10000);//Just to stop the process for a while
            Label1.Text = "Async Postback Update: " + DateTime.Now.ToShortTimeString();
        }

        protected void Button2_Click(object sender, EventArgs e)
        {
  Thread.Sleep(10000);//Just to stop the process for a while
             Label1.Text = "Postback Update: " + DateTime.Now.ToShortTimeString();
        } 

The Output

Async Postback

1. The Starting page


2. After click the button 'Do Asyncpostback Update' :


3. Page finish update


Synchronous Postback

1. The Starting page

 
2. Page finish update



 Note: You can read more about different this different postback here

Reference

  1. http://msdn.microsoft.com/en-us/library/bb398976%28v=vs.100%29.aspx

Popular posts from this blog

How to create zip file to download in JSP- Servlet

How to create DataGrid or GridView in JSP - Servlet

Pinging in ASP.NET Example