Using UpdateProgress Control in AJAX

Design: 

 

Place ScriptManager control (from 'Ajax Extensions' tab) on the form

Place one UpdatePanel control

In this UpdatePanel control, place one Login control and one label

Place one UpdateProgress control

In this UpdateProgress control, place one Image control and one label

Right click on application in solution explorer-> Add Existing Item-> select a progress bar gif image.

Set 'ImageUrl' property of Image control to locate progress bar gif image

 

Set 'AssociateUpdatePanelId' property of UpdateProgress1 control as 'UpdatePanel1'

Code:

using System;

using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        LabelMsg.Text = "";

    }

    protected void Login1_Authenticate(object sender, AuthenticateEventArgs e)

    {

        System.Threading.Thread.Sleep(3000);

        LabelMsg.Text = "valid user";

    }

}

Output: