In this article I will explain with an example, how to use AJAX UpdatePanel in ASP.Net.
 
 
 

HTML Markup

The following HTML Markup consists of:
ScriptManager – For enabling AJAX functions.
UpdatePanel – For refreshing control.
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
        <div class="modal">
            <div class="center">
                <img alt="" src="loader.gif" />
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div align="center">
            <h1>Click the button to see the UpdateProgress!</h1>
            <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
 
 

Event handler for Button

C#
Inside the Button click event handler, I have added delay of 5 seconds so that we can view the ASP.Net AJAX UpdateProgress in action.
protected void Button1_Click(object  sender,EventArgs e)
{
    System.Threading.Thread.Sleep(5000);
}
 
 

CSS styles in order to display UpdatePanel in center of page with background covering whole screen

The following CSS has to be placed on your page which gives AJAX UpdateProgress the look and feel and alignment we need.
<style type="text/css">
    body  {marg in:0; padding:0; font-family:Arial; }
    .modal  {position:fixed; z-index:999; height:100%; width:100%; top:0; background-color:Black; filter:alpha(opacity=60); opacity:0.6; -moz-opacity:0.8; }
    .center  {z-index:1000; margin:300px auto; padding:10px; width:130px; background-color:White; border-radius:10px; filter:alpha(opacity=100); opacity:1;-moz-opacity:1; }
    .center img  {height:128px; width:128px; }
</style>
 
 

Screenshot

Using AJAX UpdatePanel in ASP.Net
 
 

Demo

View Demo
 
 

Downloads

Download Code