You have content that will be uploaded synchronously in your page and content that will be uploaded asynchronously in UpdatePanel. However, the upload process of UpdatePanel content may take more time… If I give more concrete example, the upload process of normal content may take 2 seconds and the upload process of asynchronous content may take 7-8 seconds. If we wait for the whole page uploaded under normal circumstances and then send to the client, we will keep the client waiting at least 7-8 seconds. Well, what if we send the synchronous content to the browser of the client during the first upload of the page while the UpdatePanel continues to upload its own content? I guess you are curious about how to do such a process. In this post, we will search for how to delay loading process in ASP.NET AJAX applications.
First, the needed ingredients; 1 ScriptManager, 1 Label (for synchronous content), 1 UpdatePanel, 1 Button inside the panel and 1 more Label for asynchronous content (if we want our page more attractive, 1 UpdateProgress). The first label will hide the normal content, in other words this control will go to the client after the first upload. The other label is for asynchronously updated content, in other words the upload process in here will be performed just after the page reached to the client. The HTML codes and the code snippet that we will use to update the UpdatePanel asynchronously are given below.
Default.aspx
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Label ID="lblStatik" runat="server"></asp:Label>
<br /><br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:LinkButton ID="lbGuncelle" runat="server" Text="Güncelle" onclick="lbGuncelle_Click"></asp:LinkButton><br />
<asp:Label ID="lblAsenkronIcerik" runat="server"></asp:Label><br />
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Loading. Please wait...
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
Default.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
lblStatik.Text = "Static content will be here";
}
protected void lbGuncelle_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000); //For delaying
lblAsenkronIcerik.Text = DateTime.Now.ToString();
}
As can be seen the LinkButton control named lbGuncelle updates UpdatePanel content. The page as it is will not create any output in UpdatePanel after the first upload process. But, if we make the LinkButton automatically postbacks when the page is uploaded at the first time, at the same time UpdatePanel content will reach to the client. If we can perform postback process at the same time with the upload of the page at the client side, the upload process will be delayed. There are two questions to be answered in here; first, "how can I catch the exact moment of upload of the page in the client side?", second, "how can I trigger the partial postback process without clicking LinkButton?" Because both of these processes eventuate at the client side, JavaScript must be used. At the moment that the page is loading, the pageLoad function of JavaScript is stepped in. On the other hand, one of the other functions of JavaScript named __doPostBack is used for to apply postback process to a control programmatically. The JavaScript pageLoad function given below will provide the delay in loading the UpdatePanel content during the loading of the page at the first time.
Default.aspx
<script language="javascript" type="text/javascript">
var firstLoad = true;
function pageLoad()
{
if(firstLoad)
{
__doPostBack('lbGuncelle', ''); //Programatically postback for LinkButton control
firstLoad = false;
}
}
</script>
pageLoad function executes while the page is loading to the client. Because the firstLoad variable is true at this moment, LinkButton control makes the postback process and UpdatePanel content is started to be updated. Because we delay loading with Sleep method of Thread class, we can see the delay in updating UpdatePanel content clearly when the page is uploaded to the client.