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
Step 2 : Go to Solution Explorer and
right-click.
- Select Add->New Item
- Select WebForm
- Default.aspx page open
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
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.
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.
Step 12 : Now select the color
Background combobox option and click on the update button.
output :
select the fade combobox option and click on the update button.
Select the Collapse combobox option and click on the update button.
