Introduction
This tip will show how to display a user friendly "Please wait" message on the web-page, when a button on a web page is clicked by the user to initiate a long process like insertion of data to database, fetching a big result set, uploading/downloading files, etc., and to prevent the user from clicking here and there on the page until the current execution completes.
Background
The UpdateProgress control supports in designing a more spontaneous interface when a Web page contains UpdatePanel controls for partial or full page postback. If a partial-page update is wary, you can use the UpdateProgress control to arrange for graphic response about the position of the update. You can put multiple UpdateProgress controls on a page, each associated with a different UpdatePanel control. Alternatively, you can use one UpdateProgress control and associate it with all UpdatePanel controls on the page.
The Ajax UpdateProgress control renders a <div> element which is shown or hidden based on whether an associated UpdatePanel control has caused an asynchronous postback. For initial page load, the UpdateProgress control is not displayed.
Using the Code
Here in the demonstration program, I am using Ajax UpdateProgress control to show Progress Image/Progress bar and display a user message. The background will be made inactive by using CSS.
Follow the below steps:
- Add
AjaxControlToolkit to your web application, and register the same in your .aspx page.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
- Add a
ScriptManager on your .aspx page.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
- Add the below CSS in
<Head></Head> tag in .aspx page or in external CSS file (if any).
.divWaiting{
position: absolute;
background-color: #FAFAFA;
z-index: 2147483647 !important;
opacity: 0.8;
overflow: hidden;
text-align: center; top: 0; left: 0;
height: 100%;
width: 100%;
padding-top:20%;
}
- Add
UpdateProgress on your page. Provide an Image and a text message in <ProgressTemplate>.
With DisplayAfter property, you can modify the time after which the message should start displaying. The value should be given in microseconds.
AssociatedUpdatePanelId is the Id of the update panel which contains the controls causing long running code.
<asp:UpdateProgress ID="UpdateProgress1" DisplayAfter="10"
runat="server" AssociatedUpdatePanelID="upTest">
<ProgressTemplate>
<div class="divWaiting">
<asp:Label ID="lblWait" runat="server"
Text=" Please wait... " />
<asp:Image ID="imgWait" runat="server"
ImageAlign="Middle" ImageUrl="~/Images/10.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
- Provide the controls in
UpdatePanel which is associated with UpdateProgress. Whenever any event generated from a control inside associated UpdatePanel, the progress image and message will be shown in the center of screen.
<asp:UpdatePanel ID="upTest" runat="server">
<ContentTemplate>
<asp:Button ID="btnSubmit" OnClick="btnSubmit_Click" Text="Submit" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
If you want to test the above functionality, then use the below code in btnSubmit_Click event handler.
protected void btnSubmit_Click(object sender, EventArgs e)
{
Thread.Sleep(2000);
}
Points of Interest
UpdateProgress control can be put inside or outside UpdatePanel controls. UpdateProgress control will be displayed whenever the associated UpdatePanel control is updated as a result of an asynchronous postback. This works even if the UpdateProgress control is inside another UpdatePanel control.
To know more about UpdateProgress, please visit:
