In this article we will learn how to use UpdateProgress control in ASP.NET AJAX.
UpdateProgress control
The UpdateProgress control is very important control. The UpdateProgress control provides status information about partial-page updates in UpdatePanel controls. You can customize the default content and the layout of the UpdateProgress control. To prevent flashing when a partial-page update is very fast, you can specify a delay before the UpdateProgress control is displayed.
Properties
These are the following properties of the timer control.
Figure 1
For example
Drag one ScriptManager control, one updateProgress and one button on the form. The form looks like this.
Figure 2
Now, when we click the button the script sleeps for 5 seconds and the "Loading..." text is displayed on your page.
Now click on the source button of the design form and add the following code.
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication30.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>How to Use UpdateProgress control</title>
<style type="text/css">
.PleaseWait
{
height : 13px;
width: 150;
background-image: url(images/PleaseWait.gif);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdateProgress runat="server" id="PageUpdateProgress">
<ProgressTemplate>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 3</title>
<p>
<img border="0" src="file:///C:/Users/Rohatash/Downloads/ajax-loader(2).gif" width="32" height="32"></p>
<div class= "PleaseWait" align="left">
Loading...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" id="Panel">
<ContentTemplate>
<br />
<asp:Button runat="server" id="UpdateButton" onclick="UpdateButton_Click" text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Now move to the design window and double click on the update button and add the following code.
Protected Sub UpdateButton_Click(ByVal sender As Object, ByVal e As EventArgs) Handles UpdateButton.Click
System.Threading.Thread.Sleep(5000)
End Sub
Now save and run the application.
Figure 3
Now click on the update button control.
Figure 4