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.