ASP.NET AJAX UpdateProgress Control in VB.NET

In this article we will learn how to use UpdateProgress control in ASP.NET AJAX.
  • 5425

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.

up.gif

Figure 1

For example

Drag one ScriptManager control, one updateProgress and one button on the form. The form looks like this.

upd2.gif

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.


upd3.gif
 

Figure 3


Now click on the update button control.

 

upd4.gif
 

Figure 4

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.