Create a Loading Indicator for AJAX Partial-Page Updates in ASP.NET

by Marvin 28. February 2009 04:02

I think one of the coolest things about ASP.NET v3.5 is that they've made it really easy to add AJAX functionality to your web pages.  I mean, hey, if I can pick it up and do it, it can't be too complex, right?  Sometimes, though, your partial-page updates take awhile because of network latency or a lot of processing on the server.  You need a way to let the user know to just be patient and wait a minute before getting overly-excited and clicking that "Submit" button again, and again, and again.  Here's how I do it. 

It's a combination of AJAX, CSS, and an animated .gif file.  Let's say you have an AJAX UpdatePanel and inside it, you've got your data bound web control that's going to display the large data set.  Maybe it's a GridView.  That would look something like this:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  
<ContentTemplate
>
     
<asp:GridView runat="server"></asp:GridView
>
  
</ContentTemplate
>
</asp:UpdatePanel>

To make a nice little update indicator, I add an UpdateProgress control just before the UpdatePanel in my code.  The UpdateProgress control code looks something like this:

<asp:UpdateProgress ID="UpdateProgress1" runat="server"
  
AssociatedUpdatePanelID="UpdatePanel1"
>
  
<ProgressTemplate
>
     
<img src="../images/indicator.gif" alt="Page is updating..." /> &nbsp;Updating...
   </ProgressTemplate
>
</asp:UpdateProgress>

BTW, Here's an example of an indicator image that I use a lot. indicator animated gif image  You can find all kinds of these online by doing a Google Image search for "loading".

Ok, now I style the UpdateProgress control with a little CSS like this:

#UpdateProgress1
{position: absolute; top: 50%; left: 50%; margin-left: -40px; text-align: center; font-weight: bolder; border: dashed 1px #003b75; background: #f2b210 url('NavBack.jpg') repeat-y top center; padding: 25px; opacity:0.7; filter:alpha(opacity=70);}

NavBack.jpg is just a gradient image that I created using to make it a little prettier, but you can just use a flat background color.  Visual Studio will complain about the opacity and filter properties not being CSS 2.1 compliant, but I haven't had any problem with them rendering correctly in Firefox, IE or Safari. 

That's it.  Pretty easy stuff, right? 

You can learn more about the UpdateProgress control in this video:
http://www.asp.net/learn/ajax-videos/video-123.aspx

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , ,

Web Development

Comments

Add comment


(Will show your Gravatar icon)  

  Country flag

biuquote
  • Comment
  • Preview
Loading



About the author

I am a junior-level C# .NET developer living in Nashville, TN.  I'm currently working in biomedical informatics, developing a web service, a MySql database, and a web application.  Every week or so, I spend hours trying to figure out how to do something, and after I find the solution, I really want to make sure I don't go through that exercise again.  I love to write.  It helps me to remember things.  So, I use this blog as a way to document those painful lessons as I learn them.  It has already helped me to be able to refer back to them.  I hope some of these will save someone else some time as well.