Progress indicator is something which will give some indication to the user about some Progress.

Suppose a Program is fetching some data from DB, then in that case it would be better if we can provide some Visual indications or any custom message to the End-user while fetching data from DB .

E.g: Fetching Data…. or Loading….. or .gif Loading Image

Apart from indication we can restrict the user to interact with the Page while Processing is going on.

 For this two things (1. Progress indicator & 2. Modal behavior) we require –

1. Progress indicator (For giving Custom message to the User).
2. Modal pop-up Extender (For restricting the user to interact while Processing).

Code for creating Modal Progress indicator :

<asp:UpdatePanel ID=”upPnl” runat=”server”>

<ContentTemplate>

// Control to show DB Record.

</ContentTemplate>

</asp:UpdatePanel>

<%– PROGESSS INDICATOR –%>

<asp:UpdateProgress ID=”upProIndicator” runat=”server”

DynamicLayout=”false” DisplayAfter=”0″ AssociatedUpdatePanelID=”upPnl”>

<ProgressTemplate>

<asp:Panel ID=”pnlUpdateProgress” runat=”server”

Processing…

</asp:Panel>

</ProgressTemplate>

</asp:UpdateProgress>

<%– MODAL POPUP FOR PROGRESS INDICATOR –%>

<cc1:ModalPopupExtender ID=”MPE_pnlUpdateProgress” runat=”server”

TargetControlID=”pnlUpdateProgress”

PopupControlID=”pnlUpdateProgress”>

</cc1:ModalPopupExtender>

JavaScript for Hiding & Showing the Modal popup.

 var ModalProgress = ‘<%= pnlUpdateProgress_ModalPopupExtender.ClientID %>’;

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);

// Function is called when the Asynchronous postback starts, used to SHOW the Modal Popup.

function beginReq(sender, args)

{

     $find(ModalProgress).show(); // shows the Popup.

}

// Function is called when the Asynchronous postback ends, used to HIDE the Modal Popup.

function endReq(sender, args)

{

     $find(ModalProgress).hide(); // shows the Popup.

}