UpdateProgress Control Example In Asp.Net

1:35:00 am 1 Comments

In this example i'm explaining how to use UpdateProgress Control In Asp.Net with ProgressTemplate.

This can be used to display a animated GIF image or wait message using CSS while page is fetching or loading data.

I am displaying records in gridview in click event of button and processing message is displayed while data is retrieved.

Place ScriptManager on page and put Button,GridView,SqlDataSource and UpdateProgress controls inside ContentTemplate of UpdatePanel.

UpdateProgress Control Asp.Net


HTML SOURCE
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
 
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
            Text="Show Records" />
           
<asp:GridView ID="GridView1" runat="server" 
              onpageindexchanging="GridView1_PageIndexChanging">
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
SelectCommand="SELECT [CustomerID], [ContactName], [City], 
               [Country] FROM [Customers]">
</asp:SqlDataSource>
           
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div id="Background"></div>
<div id="Progress">
<img src="loading.gif" style="vertical-align:middle"/>
Fetching Records Please Wait...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>

Add these CSS styles in head section of page.
01<style type="text/css">
02#Background
03{
04    position:fixed;
05    top:0px;
06    bottom:0px;
07    left:0px;
08    right:0px;
09    background-color:Gray;
10    filter:alpha(opacity=40);
11    opacity:0.4;
12}
13 
14#Progress
15{
16    position:fixed;
17    top:10%;
18    left:10px;
19    width:300px;
20    height:50px;
21    text-align:center;
22    background-color:White;
23    border:solid 3px black;
24        }
25    </style>

Write this code in Click Event of Button.
1protected void Button1_Click(object sender, EventArgs e)
2    {
3        System.Threading.Thread.Sleep(2000);
4        GridView1.DataSource = SqlDataSource1;
5        GridView1.DataBind();
6    }

Build and run the application.

Unknown

1 comment:

Subscribe to: Post Comments (Atom)