Introduction
Ajax (Asynchronous
JavaScript and XML) is a new web development technique used for interactive
websites. AJAX can help to develop web applications and retrieve small amounts of
data from a web server. AJAX is a different type of technology.
- JavaScript
- XML
- Asynchronous Call to the server
UpdatePanelAnimationExtender Control
The
UpdatePanelAnimationExtender is a simple extender that allows you to
utilize the powerful animation framework with existing pages in an easy,
declarative fashion. It is used to play animations both while an
UpdatePanel is updating and after it has
finished updating. The UpdatePanel
architecture and OnUpdating animation
will always play when any partial postback starts, but the
OnUpdated animation will only play at the end
of a partial postback if its UpdatePanel was
changed.
Step 1 : Open Visual Studio 2010.
- Go to File->New->WebSite
- Select ASP.NET Empty WebSite
![step1.gif]()
Step 2 : Go to Solution Explorer and
right-click.
- Select Add->New Item
- Select WebForm
- Default.aspx page open
![step2.gif]()
Step 3 : Go to Default.aspx page and
click on the [Design] option and drag control from Toolbox.
- Drag ScriptManager control,
UpdatePanel control, Label, Button, Checkbox
Define Trigger for UpdatePanel :
Step 4 : Go to Default.aspx [Design]
option and click on the UpdatePanel.
- Select Properties option
- Click on Trigger and define ControlIDand
Event Name
![A4.gif]()
Step 5 : Write a code for UpdatePanel
control and define AsyncPostBackTrigger.
Code :
<asp:UpdatePanel
ID="update"
runat="server">
<ContentTemplate>
<div
id="background"
style="text-align:
center; vertical-align:
middle; line-height:
44px; padding:
12px; height:
44px; color:
#FFFFFF;">
<asp:Label
ID="lblUpdate"
runat="server"
Style="padding:
5px; font-size:
14px; font-weight:
bold;">
4/28/1906 12:00:00 AM
</asp:Label>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="btnUpdate"
EventName="Click"
/>
</Triggers>
</asp:UpdatePanel>
Define
UpdatePanelAnimation Extender
Step 6 : Go to Toolbox and drag
UpdatePanelAnimation Extender Control.UpdatePanelAnimation Extender set the
target controls to the respective Labels and Buttons. We also provide the markup
page so you can reference the Target controls and properties.
![a5.gif]()
Step 7 : Go to the Default.aspx
page [Source] option and write a code for UpdatePanelAnimation Extender.
Code :
<asp:UpdatePanelAnimationExtender
ID="upae"
BehaviorID="animation"
runat="server"
TargetControlID="update">
<Animations>
<OnUpdating>
<Sequence>
<%--
Store the original height of the panel --%>
<ScriptAction
Script="var b = $find('animation');
b._originalHeight = b._element.offsetHeight;" />
<%--
Disable all the controls --%>
Enable all the controls :
Step 8 : Now we define the Enable all the controls for the parallel duration
of UpdatePanelAnimation Extender.
<%--
Enable all the controls --%>
<Parallel
duration="0">
<EnableAction
AnimationTarget="effect_fade"
Enabled="true"
/>
<EnableAction
AnimationTarget="effect_collapse"
Enabled="true"
/>
<EnableAction
AnimationTarget="effect_color"
Enabled="true"
/>
<EnableAction
AnimationTarget="btnUpdate"
Enabled="true"/>
</Parallel>
Step 9 :
Go to Default.aspx page option and write a
code.
Code :
<head
runat="server">
<title
dir="ltr"
lang="afa">MY
AJAX APPLICATION</title>
</head>
<body
style="background-color:
#E81775" alink="#ccccff"
bgcolor="#99ccff">
<form
id="form1"
runat="server"
style="background-color:
#97603E">
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<b
style="background-color:
#99FFCC"> UpdatePanelAnimation Demonstration</b><br
/><br
/>
<div
style="margin-bottom:
10px;" >
<div
style="border:
dashed 1px #222222; width:400px;">
<div
id="up_container"
style="background-color:
#40669A;">
<asp:UpdatePanel
ID="update"
runat="server">
<ContentTemplate>
<div
id="background"
style="text-align:
center; vertical-align:
middle; line-height:
44px; padding:
12px; height:
44px; color:
#FFFFFF;">
<asp:Label
ID="lblUpdate"
runat="server"
Style="padding:
5px; font-size:
14px; font-weight:
bold;">
4/28/1906 12:00:00 AM
</asp:Label>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="btnUpdate"
EventName="Click"
/>
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
Choose the effects, then press 'Update':<br
/>
<input
type="checkbox"
id="effect_fade"
checked="checked"
/><label
for="effect_fade">Fade</label><br
/>
<input
type="checkbox"
id="effect_collapse"
checked="checked"
/><label
for="effect_collapse">Collapse</label><br
/>
<input
type="checkbox"
id="effect_color"
checked="checked"
/><label
for="effect_color">Color
Background</label><br
/>
<asp:Button
ID="btnUpdate"
runat="server"
Text="Update"
OnClick="btnUpdate_Click"
/>
<asp:UpdatePanelAnimationExtender
ID="upae"
BehaviorID="animation"
runat="server"
TargetControlID="update">
<Animations>
<OnUpdating>
<Sequence>
<%--
Store the original height of the panel --%>
<ScriptAction
Script="var b = $find('animation');
b._originalHeight = b._element.offsetHeight;" />
<%--
Disable all the controls --%>
<Parallel
duration="0">
<EnableAction
AnimationTarget="btnUpdate"
Enabled="false"
/>
<EnableAction
AnimationTarget="effect_color"
Enabled="false"
/>
<EnableAction
AnimationTarget="effect_collapse"
Enabled="false"
/>
<EnableAction
AnimationTarget="effect_fade"
Enabled="false"
/>
</Parallel>
<StyleAction
Attribute="overflow"
Value="hidden"
/>
<%--
Do each of the selected effects --%>
<Parallel
duration=".25"
Fps="30">
<Condition
ConditionScript="$get('effect_fade').checked">
<FadeOut
AnimationTarget="up_container"
minimumOpacity=".2"
/>
</Condition>
<Condition
ConditionScript="$get('effect_collapse').checked">
<Resize
Height="0"
/>
</Condition>
<Condition
ConditionScript="$get('effect_color').checked">
<Color
AnimationTarget="up_container"
PropertyKey="backgroundColor"
EndValue="#FF0000"
StartValue="#40669A"
/>
</Condition>
</Parallel>
</Sequence>
</OnUpdating>
<OnUpdated>
<Sequence>
<%--
Do each of the selected effects --%>
<Parallel
duration=".25"
Fps="30">
<Condition
ConditionScript="$get('effect_fade').checked">
<FadeIn
AnimationTarget="up_container"
minimumOpacity=".2"
/>
</Condition>
<Condition
ConditionScript="$get('effect_collapse').checked">
<%--
Get the stored height --%>
<Resize
HeightScript="$find('animation')._originalHeight"
/>
</Condition>
<Condition
ConditionScript="$get('effect_color').checked">
<Color
AnimationTarget="up_container"
PropertyKey="backgroundColor"
StartValue="#FF0000"
EndValue="#40669A"
/>
</Condition>
</Parallel>
<%--
Enable all the controls --%>
<Parallel
duration="0">
<EnableAction
AnimationTarget="effect_collapse"
Enabled="true"
/>
<EnableAction
AnimationTarget="effect_color"
Enabled="true"
/>
<EnableAction
AnimationTarget="btnUpdate"
Enabled="true"
/>
</Parallel>
</Sequence>
</OnUpdated>
</Animations>
</asp:UpdatePanelAnimationExtender>
</form>
Step 10 : Go to
Default.aspx.cs page and write a code.
Code :
using System;
using
System.Collections.Generic;
using
System.Linq;
using System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
public
partial class
_Default : System.Web.UI.Page
{
protected void
Page_Load(object sender,
EventArgs e)
{
}
protected void
btnUpdate_Click(object sender,
EventArgs e)
{
System.Threading.Thread.Sleep(2000);
lblUpdate.Text = DateTime.Now.ToString();
}
}
Step 11 :
Now run the application by Pressing F5.
![a111.gif]()
Step 12 : Now select the color
Background combobox option and click on the update button.
output :
![A10.gif]()
select the fade combobox option and click on the update button.
![A9.gif]()
Select the Collapse combobox option and click on the update button.
![A11.gif]()