AJAX Update Progress (UpdateProgress) in AJAX Modal Popup (ModalPopupExtender)
Using article by Matt Berseth ModalPopup as an AJAX Progress Indicator I wanted to show an Update Progress on button click event, however, he is not using an UpdateProgres control, which wasn't good enough for me as I had to load another page when the button was clicked.
So I used slightly different approach which worked for me:
<script type="text/javascript"> // a reference to the popup behavior var _popup; function validate(){ // find the popup behavior this._popup = $find('ctl00_BaseContents_mdlPopup'); // show the popup this._popup.show(); }
</script>
<asp:UpdatePanel id="upChanges" runat="server"><contenttemplate><vs:IdentifyChangesSummary id=identifyChangesSummary1 runat=server/></contenttemplate>
</asp:UpdatePanel>
<cc1:ModalPopupExtender id="mdlPopup" runat="server" TargetControlID="UpdateProgress1" PopupControlID="UpdateProgress1" BackgroundCssClass="modalBackground" /><asp:UpdateProgress id="UpdateProgress1" runat="server" AssociatedUpdatePanelID="upChanges"> <progresstemplate> <asp:Panel id="pnlPopup" runat="server" CssClass="updateProgress"> <div class="divUpdateProgress"> <img src="../images/ajax-working.gif" alt="Please Wait" style="vertical-align: middle;" /> <span class="updateProgressMessage">Saving Data...</span> </div> </asp:Panel> </progresstemplate>
</asp:UpdateProgress>
Code behind:
if (!Page.IsPostBack)
{ btnSaveSelectedChanges.Attributes.Add("OnClick", "validate()");
}
And stylesheet:
/*** modal update progress ***/.modalBackground { background-color:Gray; filter:alpha(opacity=80); opacity:0.80; }.updateProgress{ border-width:1px; border-style:solid; background-color:#FFFFFF; position:absolute; width:150px; height:40px; vertical-align: middle; }.updateProgressMessage{ margin:auto; font-family:Trebuchet MS; font-size:small; vertical-align: middle;} .divUpdateProgress{ text-align:center; margin:4px; vertical-align: middle;
}