Show animation effects using ajax UpdatePanelAnimation control
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">
<Animations>
<OnUpdating> ... </OnUpdating>
<OnUpdated> ... </OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
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.
EnableAction- 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.
Demo:
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.
here
Note: Images used on this website
are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon
Foundation or were found in google search under "Free to use and share". If any
of the images presented here violates copyright issues or infringes anyone copyright
or are not under "Fair use", then please bring it to our notice. Read
Disclaimer for more.
Share this to your friends. One of your friend is
waiting for your share.
Related Articles
Creating your first application in JQuery
Converting Fraction into decimal
Uploading multiple files with drag and drop feature
What is Silverlight,its features and how it works
Silverlight New features & system requirement
Call .net service from javascript
Give rounded corners to your panel using Ajax
Sliding Elements-Animation Effects with jQuery
Calling web service asynchronously using jquery ajax
Tips and tricks with ajax calendar extender control
Post Comment