Best Download Feedback for ASP.Net?

Question

So, we have an ASP.Net application - pretty standard - and it has a lot of updates and postbacks.

On some pages

<ajax:UpdatePanelAnimationExtender ID="ae" runat="server" TargetControlID="updatePanel" BehaviorID="UpdateAnimation"> <Animations> <OnUpdating> <FadeOut Duration="0.1" minimumOpacity=".3" /> </OnUpdating> <OnUpdated> <FadeIn minimumOpacity=".5" Duration="0" /> </OnUpdated> </Animations> </ajax:UpdatePanelAnimationExtender> 

Which basically highlights the page when postback occurs (but this contradicts the modal dialog gray background). In some cases, we have a progressupdate control that only has a spinning icon in the middle of the page.

But not one of them seems particularly pleasant and a little awkward. They also require a lot of code in different places around the application.

What methods do other people use and use?

Answer 1

Like others, I suggest using UpdateProgress in a modal popup.

I will add this rotation, put the popup, UpdateProgress and this code on the main page, so when you need it, just connect the main page to the content page.

  <script type="text/javascript"> var ModalProgress ='<%= ModalProgress.ClientID %>'; Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq); function beginReq(sender, args){ // shows the Popup $find(ModalProgress).show(); } function endReq(sender, args) { // hide the Popup $find(ModalProgress).hide(); } </script> 

here are some links:

http://mattberseth.com/blog/2007/07/modalpopup_as_an_ajax_progress.html

http://vincexu.blogspot.com/2008/10/how-to-make-modalupdate-progress-bar-on.html

Answer 2

i havent used UpdatePanelAnimationExtender, but UpdateProgress-Control combined with animated gif (Bermos Link):

 <asp:UpdateProgress ID="UpdateProgress1" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="UdpImeiLookup" DisplayAfter="500" > <ProgressTemplate> <div class="progress"> <img src="images/ajax-loader-arrows.gif" />&nbsp;please wait... </div> </ProgressTemplate> </asp:UpdateProgress> 

A ProgressTemplate will be displayed each time the associated update panel is called (after 500 ms in this example).

EDIT: where the progress class can be fe this:

 .progress { text-align:center; vertical-align:middle; position: absolute; left: 44%; top: 35%; border-style:outset; border-color:silver; background-color:Silver; white-space:nowrap; padding:5px; } 

Regards, Tim

Answer 3

Animated gifs require the least amount of code, and you can choose your favorite with any colors you like from the following site - Ajaxload - Ajax loading gif generator .

Answer 4

This is what I use, it has a popup modal background and gif

  <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0"> <ProgressTemplate> <div style="position: absolute; width: 100%; height: 100%; z-index: 100; background-color: Gray; filter: alpha(opacity=70); opacity: 0.7;"> &nbsp; </div> <table style="position: absolute; width: 100%; height: 100%; z-index: 101;"> <tr> <td align="center" valign="middle"> <div style="color: Black; font-weight: bolder; background-color: White; padding: 15px; width: 200px;"> <asp:Image ID="Image3" runat="server" ImageUrl="~/Images/progress.gif" /> Please wait.... </div> </td> </tr> </table> </ProgressTemplate>