Asp.Net UpdateProgress Control

Asp.Net CS By Example 29 December 2019

UpdateProgress Control:

This control help we to display a progress indicator while an UpdatePanel is updating its content.

During a normal postback, the browser displays its progress in downloading new content by spinning an icon or displaying a progress bar. During an asynchronous postback, on the other hand, there is no visual indication of progress. We can use the UpdateProgress control to give the users some sense that something is happening during an asynchronous postback.

The UpdateProgress control supports the following 3 properties:

S.N.	Properties	Description
1)	AssociatedUpdatePanelID	The UpdateProgress control displays progress for this UpdatePanel control.
2)	DisplayAfter	The amount of time, in milliseconds, before the UpdateProgress control displays content. The default is 500 milliseconds (half a second).
3)	DynamicLayout	When this property is set to true (the default), the UpdateProgress control is initially hidden with the Cascading Style Sheet (CSS) attribute display:none. When this property is set to false, the UpdateProgress control is hidden with the CSS attribute visibility:hidden.

Code: ShowUpdateProgress.aspx

<%@ Page Language="C#" AutoEventWireup="true" 
CodeBehind="ShowUpdateProgress.aspx.cs"
Inherits="LearnAsp.Net.ControlDemo.UpdateProgress.ShowUpdateProgress" %>

<!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>
    <title>Show UpdateProgress</title>
    <style type="text/css">
        .progress
        {
            font-family: Arial;
            position: absolute;
            background-color: lightyellow;
            border: solid 2px red;
            padding: 5px;
        }
    </style>
</head>
<body style="font-size: larger;background-color:#00f8ff21;">
    <form id="form1" runat="server">
    <div>
    <marquee> <h3>Retrieving content...</h3></marquee>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="up1" runat="server">
            <ContentTemplate>
                <%= DateTime.Now.ToString("T") %>
                <asp:Button ID="btnSubmit" style="font-size: larger;" Text="Submit" 
                runat="server" OnClick="btnSubmit_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="progress1" AssociatedUpdatePanelID="up1" runat="server">
            <ProgressTemplate>
                <div class="progress">
                    <asp:Image ID="imgProgress" ImageUrl="Loading.gif" runat="server" />
                    <B> Retrieving content...</B>
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
    </div>
    </form>
</body>
</html>

Code: ShowUpdateProgress.aspx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace LearnAsp.Net.ControlDemo.UpdateProgress
{
    public partial class ShowUpdateProgress : System.Web.UI.Page
    {
        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(5000);
        }
    }
}

Output:

Thanks for reading Asp.Net UpdateProgress Control

29 December 2019

Asp.Net UpdateProgress Control

No comments:

Post a Comment