I am working on a simple web application that aggregates RSS from different Online Deal Site in to one place. One of the things I wanted to do was to have one page and load the RSS details in to an Update Panel. I know Update Panel is not the best when it comes to performance but it does its job and with proper caching on the server side, it is very good for my purpose. And more over this blog is not about the merits and/or de-merits of UpdatePanel but on Usability from an end user perspective.

I was using “UpdateProgress” from AJAX control tool kit and it is working very well with simple “update message” while the update panel is being processed. But, there are times when there is not any delay and the “Progress Bar” is not coming up. This may not be the desirable condition as user might not recognize that the screen has new information.

So, I needed some thing more to say that the screen has been updated. I looked in to “UpdatePanelAnimationExtender” to work with the condition. This Extender supports Animations while the screen is being updated and after the update.

 

<cc1:UpdatePanelAnimationExtender ID=”UpdatePanelAnimationExtender1″ runat=”server” EnableViewState=”false” TargetControlID=”UpdatePanel1″>
<Animations>
<OnUpdated>
<Sequence>
<EnableAction Enabled=”true” />
<Color AnimationTarget=”UpdatePanel1″
Duration=”.5″
z-index=”5″
StartValue=”#FFCC99″
EndValue=”#FFFFFF”
Property=”style”
PropertyKey=”backgroundColor” />
</Sequence>
</OnUpdated>
</Animations>
</cc1:UpdatePanelAnimationExtender>

In addition to this I could have another animation to show while the target update panel is being updated with entry like

<OnUpdating>

</OnUpdating>

But I am not sure if this would inform the intended message to the end user! So I have decided to go in-between route. Show the “Progress Bar” while the update panel is being updated and show a simple color transition when the panel is being updated.

To outline the code is looks something like this

<asp:UpdatePanel id=”UpdatePanel1″>

<ContentTemplate>

<asp:UpdateProgress ID=”UpdateProgress1″ runat=”server”>
<ProgressTemplate>
<div class=”ProgressClass”>
Please Wait While the Page is Loading…
</div>
</ProgressTemplate>
</asp:UpdateProgress>

<asp:GridView>

</asp:GridView>

</ContentTemplate>

</asp:UpdatePanel>

<cc1:UpdatePanelAnimationExtender TargetControlID=”UpdatePanel1″>

</cc1:UpdatePanelAnimationExtender>

You could find more about these controls here

-Thanks,