Sunday, April 12, 2015

Display Progress in an ASP.NET AJAX Application

When ever we click on any button for any event, behind the scenes it may take more time than usual, that time user may get irritate that whats happening.
In order to make him/her cool, we will display progress, hence he/she will wait till that progress completes.

Very simple option to display progress during an async postback is to use the UpdateProgress control. We can use this control to display status information to the user, while the UpdatePanel updates its content. 
In the example below, we use the ".gif" to display progress while the UpdatePanel is updating its content. For understanding purposes, we have emulated a time consuming operation by setting a delay of 3 seconds by using Thread.Sleep(3000) on the button click.
 C#
    protected void btnInvoke_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        lblText.Text = "Processing completed";
    }


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UsingUpdateProgress.aspx.cs"Inherits="_Default" %>
<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdateProgress ID="updProgress"
        AssociatedUpdatePanelID="UpdatePanel1"
        runat="server">
            <ProgressTemplate>           
            <img alt="progress" src="images/progress.gif"/>
               Processing...           
            </ProgressTemplate>
        </asp:UpdateProgress>
       
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="lblText" runat="server" Text=""></asp:Label>
                <br />
                <asp:Button ID="btnInvoke" runat="server" Text="Click"
                    onclick="btnInvoke_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>        
    </div>
    </form>
</body>
</html>

Out put will look like below


Once the processing is over, we will see the message like below.

The end.

No comments:

Post a Comment