Implementing Ajax : With UpdateProgress

This is simple method to apply Ajax to contents of webpage, It may be some control or maybe some DataGrid or whole page, With Update Panel, you just need to drag and drop UpdateProgress Control which generally comes with ASP.NET AJAX Toolkit.

 

You can add any image to UpdateProgress in its <processtemplate>, Generally we see such "Loading.." image on many sites, Below code will help you to archive this.

 

Well you still need to do some trail to exactly position that Image on the location where you want. This can be done by setting Absolute Position of Image.

<asp:ScriptManager id="ScriptManager1" runat="server" EnablePartialRendering="true" >

</asp:ScriptManager>

<asp:UpdatePanel id="UpdatePanel1" runat="server" >

<contenttemplate>

</contenttemplate>

</asp:UpdatePanel>

<br />

 

<asp:UpdateProgress EnableViewState="true" ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server" DisplayAfter="1">

<ProgressTemplate >

<DIV id="progress">

<IMG style="LEFT: 540px; POSITION: absolute; TOP: 180px" alt="" src="Imgages/ajax-loader.gif" />

</DIV>

</ProgressTemplate>

</asp:UpdateProgress>

 

 

You can download more AJAX images at http://www.ajaxload.info/

 

Vikram.