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.
Update Panel Content :
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
