Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment

Locations of visitors to this page

Latest Articles

Move to top
Show animation effects using ajax UpdatePanelAnimation control
Posted By Sarin on Jul 01, 2012     RSS Feeds     Latest Hinduism news

UpdatePanelAnimation control
UpdatePanelAnimation can be considered as an extension of Update Progress control. Only difference is that it allows declarative Xaml Language to use the powerful animation framework of Ajax.
. It is used to play animations both while an UpdatePanel is updating and after it has finished updating.  
Note that the OnUpdating animation will always play even when there is only partial postback, but the OnUpdated animation will only play at the end of a partial postback if its UpdatePanel was changed. However, setting the UpdatePanel's UpdateMode="Always" will ensure that the OnUpdated animation plays only when every partial postback completes. This can help us interact with the user while there is a call back in process and we can use the existing Animation framework to provide users with good interactivity while the call back is in process and also when the call back has completed

UpdatePanelAnimation Properties

The UpdatePanel animation behavior can be applied with the following extender (the italic properties are optional, and the ellipses represent a generic animation description):  
<ajaxToolkit:UpdatePanelAnimationExtender ID="ae"
  runat="server" TargetControlID="up">
        <OnUpdating> ... </OnUpdating>
        <OnUpdated> ... </OnUpdated>

TargetControlID - ID of the UpdatePanel whose updates are used to play the animations.
OnUpdating - Generic animation played as when any UpdatePanel begins updating
OnUpdated - Generic animation played after the UpdatePanel has finished updating (but only if the UpdatePanel was changed)
Sequence- Specify the order of the events i.e. the first declared parallel events should happen before the next one.
Parallel- specifies that all the events contained within should occur simultaneously for particular duration at a certain fps rate
Condition- This tag is used to set the javascript condition for a particular animation to happen. U can also use javascript function instead of jquery methods.
- Will perform the declared operation on the target control
Detailed example with code is in the attached example

Drawbacks of UpdatePanelAnimationExtender:

When you have multiple update panels on a page and you are using an UpdatePanelAnimationExtender for one of them, the OnUpdating animation runs for every postback regardless of which mode the UpdatePanel is in (UpdateMode=Always|Conditional).

This is problematic because:
1. The OnUpdated animation only runs when the content in the update panel actually changes... so if a panel fades out OnUpdating and fades in OnUpdated, then your panel will fade out but never fade back in.
2. This behavior also destroys the intended functionality of the UpdatePanelAnimationExtender control in case of multiple panels within the same page. If OnUpdating would run only when the associated UpdatePanel actually updates, then one would really find this control useful.
In our example, Intitially, when the screen loads,  

Depending upon the options we select, we will get the related animation effects
In case if only color background is selected

In case if all the options are selected

Thus, we have seen how to use Ajax
UpdatePanel extender control on textbox controls of our aspx page.


Share this to your friends. One of your friend is waiting for your share.
Share on Google+ Share on Tumblr Print Browser Favorite
Related Articles
Converting Fraction into decimal
Give rounded corners to your panel using Ajax
Silverlight New features & system requirement
Creating your first application in JQuery
Call .net service from javascript
Uploading multiple files with drag and drop feature
Calling web service asynchronously using jquery ajax
Tips and tricks with ajax calendar extender control
Sliding Elements-Animation Effects with jQuery
What is Silverlight,its features and how it works

Post Comment