65.9K
CodeProject is changing. Read more.
Home

Using UpdateProgress and Making Background Inactive

PoojaGahlaut
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.67/5 (9 votes)

Oct 9, 2013

CPOL

2 min read

viewsIcon

71675

To show 'Please wait' text to the user when a button is clicked and some code block needs to be executed. The background should be made disabled, so that user cannot click on other links/buttons before the current execution completes.

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:

  1. Add AjaxControlToolkit to your web application, and register the same in your .aspx page. 
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
  2. Add a ScriptManager on your .aspx page. 
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
  3. 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%;
}
  4. 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>
  5. 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: