Page Asynchronous and Synchronous Postback page example - ASP.NET

Asynchronous postback and synchronous postback is a process submission back to server. Only update panel are sent back to server if you using async postback(AJAX) while synchronous postback will sent all page content to server back.

Today i will create one example to differentioate between async postback and sync postback.

The ASPX page

Register the ajaxtoolkit 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 pregress, 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 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

By Mohd Zulkamal
NOTE : – If You have Found this post Helpful, I will appreciate if you can Share it on Facebook, Twitter and Other Social Media Sites. Thanks =)