Home→Blogs→

Display any content here, from text, images, to rich HTML. Use the close link to dismiss the box. Click the close box to dismiss it.

Hide Box

Show animation effects using ajax UpdatePanelAnimation control

Posted By admin on Jul 01, 2012 185 Views

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">
     <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

PDF files are not generated for latest articles.

Tags: Update,Panel,ajax,Framework,Animation,Extender

Share this to your friends. One of your friend is waiting for your share.

All content of this website(Except Blogs) is handled by an automated process and is subjected to errors.