Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment




Latest Articles


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

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


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

Related Articles
Silverlight New features & system requirement
Easiest Way of logging in .Net
Converting Fraction into decimal
Show animation effects using ajax UpdatePanelAnimation control
Calling web service asynchronously using jquery ajax
What is Silverlight,its features and how it works
Creating your first application in JQuery
Give rounded corners to your panel using Ajax
Tips and tricks with ajax calendar extender control
Uploading multiple files with drag and drop feature

Post Comment




Software developer by profession,
Poet by hobby,
Blogger by Passion
Birth Place: Munger, Bihar
Residence: Mumbai, Maharashtra
Prof exp: 8 years

Read More about me

Read my daily what'sapp quotes
Most Viewed Articles

Latest Spiritual Videos


Latest Funny Videos

Latest News

Latest Social Post
Latest WhatsApp Quotes