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
When you click the click here button then OnUpdating property change color of
click her button.
And after information is updated then updated property will work which has been
specified
<FadeIn AnimationTarget="Button1" />
|