UpdateProgress Control Example In Asp.Net

This example shows How To Use UpdateProgress Control In Asp.Net with ProgressTemplate.

Update Progress 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.

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.

Write this code in Click Event of Button.

protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(2000);
        GridView1.DataSource = SqlDataSource1;
        GridView1.DataBind();
    }

Build and run the application.

Tweet

If you like this post than join us or share