Home > DeveloperSection > Articles > Ajax Toolkit UpdatePanelAnimationExtender Control in ASP.Net

Ajax Toolkit UpdatePanelAnimationExtender Control in ASP.Net


AJAX AJAX 
Ratings:
0 Comment(s)
 17849  View(s)
Rate this:

Ajax Toolkit UpdatePanelAnimationExtender Control in ASP.Net

The UpdatePanelAnimationExtender is used to play animations while an UpdatePanel is updating and after it has finished updating.

UpdatePanelAnimation Properties:

TargetControlID - ID of the UpdatePanel whose updates are used to play the animations (this is also the default target of the animations)

OnUpdating - Generic animation played as when any UpdatePanel begins updating

OnUpdated - Generic animation played after the UpdatePanel has finished updating

Code:

Add these control on aspx page

<%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages.This enables partial-page rendering and Web-service calls.You have to used this if you want to use ajax control--%>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

 

<cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server"  TargetControlID="UpdatePanel1">

<Animations>                 

      <OnUpdating>                       

            <Sequence>

<Color AnimationTarget="Button1" Duration="50" StartValue="#FF0000" EndValue="#666666" PropertyKey="backgroundColor" />

                  <EnableAction Enabled="true" />

</Sequence>            

      </OnUpdating>  

<%--OnUpdating animation will always play when any partial postback starts--%>        

       <OnUpdated> 

            <Sequence> 

                  <Parallel duration="2" Fps="30"> 

                        <FadeIn AnimationTarget="Button1" />                             

                   </Parallel>                                  

            </Sequence>            

      </OnUpdated> 

<%--OnUpdated animation will only play at the end of a partial postback if its UpdatePanel. --%>      

</Animations>

</cc1:UpdatePanelAnimationExtender>

 

 

 

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Width="80px" Height="60px" Text="Click Here" />

<asp:Label ID="Label1" runat="server"></asp:Label>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />

</Triggers>

</asp:UpdatePanel>

 

Write these code on Button1 click

protected void Button1_Click(object sender, EventArgs e)

    {

        Label1.Text = DateTime.Now.ToString();

    }

 

 

Run The Project

 

AjaxControl Toolkit UpdatePanelAnimationExtender Control in ASP.Net

When you click the click here button then OnUpdating property change color of click her button.

 

AjaxControl Toolkit UpdatePanelAnimationExtender Control in ASP.Net

And after information is updated then updated property will work which has been specified  

<FadeIn AnimationTarget="Button1" />                              

 

AjaxControl Toolkit UpdatePanelAnimationExtender Control in ASP.Net

AjaxControl Toolkit UpdatePanelAnimationExtender Control in ASP.Net

 


Don't want to miss updates? Please click the below button!

Follow MindStick