nickhowell.co.uk

Page Refresh Animations

This refers to the way in which we can display some form of feedback to the user that the page is being updated, without the need for an ugly page flash or the page seemingly doing nothing.

 As always there are several ways to achieve this – a quick google will probably reveal several. Below is probably the most reliable method for our usages.

 The JS Method:
 

Using Javascript to register a callback function on Initialize and End Request events. This method ties in a very low level, which has it’s pros and cons.

Code:

JS

var
prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_initializeRequest(showModalPopup);

prm.add_endRequest(hideModalPopup);

function
showModalPopup(sender, args) {

var
popup;

popup = $find(‘<%= this.pnlModalPopup.ClientID %>’);

popup.show();

}

function
hideModalPopup(sender, args) {

var
popup;

popup = $find(‘<%= this.pnlModalPopup.ClientID %>’);

popup.hide();

}

  

This JavaScript must be added between two <script> tags at the top of the page. Lines 1-3 register the functions to the relevant events when the page it loaded.

 Following this, you’ll need the following code in the ASPX page somewhere. It doesn’t really matter where.  

ASPX

<ajaxToolkit:ModalPopupExtender ID=“pnlModalPopup” runat=“server” TargetControlID=“pnlPopup” PopupControlID=“pnlPopup” BackgroundCssClass=“modalBackground” />

<asp:Panel ID=“pnlPopup” runat=“server” Width=“300px” BackColor=“Gainsboro” BorderStyle=“Solid”  Style=“display: none;” BorderWidth=“1px” HorizontalAlign=“Center” Height=“55px”>

<table style=“height: 50px”>

<tr>

<td valign=“middle” align=“center”>

<br/>

<img src=“rotating_arrow.gif” alt=“Refresh progress” />

<asp:Label ID=“lblRefreshingPage1″ runat=“server” CssClass=“sectionHeader”  Height=“24px” Text=“Refreshing Page…” Width=“178px” />

</td>

</tr>

</table>

</asp:Panel>

 And that’s it. Load up your page, trigger a partial postback and you should see the magic in action.

This method is probably the most reliable for use on pages with GridViews or similarly large panels that update. Problems can occur on pages where a link triggers the download of another document (like an Excel file). In these instances, the animation never goes away!

One point worth mentioning, is that this method will show the animation when *any* partial postback occurs. This might be what you want – just be aware of it.

One possible work around to this, would be to not register the showModalPopup method to the InitializeRequest, but instead call it manually when you want it (say, when you press an ‘update’ button). That way you can be sure it only appears when you really need it to…

Tags: ASP.NET, Javascript