Monday, January 5, 2009

How to make a Gmail-like loading indicator with ASP.NET Ajax

The application uses a few ASP.NET Ajax controls so I was pretty surprised when the customer sent me an email saying that he liked all the dynamic loading and the fact that he could reorder "things" using drag&drop and saving them without waiting the page to reload, but it took him a while to understand was going on. The first time he clicked the button, and since nothing happened, he thought that something was going wrong, so he kept clicking on the button, an yet nothing happening.

The problem was that since all the Ajax interactions happen behind the scenes asynchronously, the user doesn't understand what's going on: sometimes the user doesn't need to know what's going on (like when you are just reloading some data), but when he presses a button he needs to know that he did the right thing and that something is happening. With the "old style" ASP.NET a postback would have been initiated, so it was obvious that something was happening, but how to do it using Ajax?

That is pretty easy to accomplish with ASP.NET: just drop in an UpdateProgress control and it will be displayed when an Ajax postback happens.

But, as default behavior, the UpdateProgress is displayed in the position where it is added to the page, so, if your page is longer than a scroll page, the indicator could not be visible: it has to be positioned relative to the browser window and not relative the html document.


No comments: