'System.Web.UI.UpdatePanel' does not have a public property named 'UpdatePanelAnimationExtender'.
I have nothing but problems with ASP.Net AJAX. Could somebody tell me what is going on?
Newbie
The updatepanel doesn't have a public property named that - you have to use the AjaxToolkit to get that animation feature...
http://www.codeplex.com/AtlasControlToolkit
and from the sample website this is the code:
<%@.Page
Language="C#"
MasterPageFile="~/DefaultMaster.master"
AutoEventWireup="true"
CodeFile="UpdatePanelAnimation.aspx.cs"
Inherits="UpdatePanelAnimation_UpdatePanelAnimation"
Title="UpdatePanelAnimation Sample" %>
<%@.Register
Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="ajaxToolkit" %>
<asp:ContentContentPlaceHolderID="SampleContent"Runat="Server">
<asp:ScriptManagerrunat="server"EnablePartialRendering="true"/>
<divclass="demoarea">
<divclass="demoheading">UpdatePanelAnimation Demonstration</div>
<divstyle="margin-bottom: 10px;">
<divstyle="border: dashed 1px #222222;">
<divid="up_container"style="background-color: #40669A;">
<asp:UpdatePanelID="update"runat="server">
<ContentTemplate>
<divid="background"style="text-align: center; vertical-align: middle; line-height: 44px; padding: 12px; height: 44px; color: #FFFFFF;">
<asp:LabelID="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:AsyncPostBackTriggerControlID="btnUpdate"EventName="Click"/>
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
Choose the effects, then press 'Update':<br/>
<inputtype="checkbox"id="effect_fade"checked="checked"/><labelfor="effect_fade">Fade</label><br/>
<inputtype="checkbox"id="effect_collapse"checked="checked"/><labelfor="effect_collapse">Collapse</label><br/>
<inputtype="checkbox"id="effect_color"checked="checked"/><labelfor="effect_color">Color Background</label><br/>
<asp:ButtonID="btnUpdate"runat="server"Text="Update"OnClick="btnUpdate_Click"/>
<ajaxToolkit:UpdatePanelAnimationExtenderID="upae"BehaviorID="animation"runat="server"TargetControlID="update">
<Animations>
<OnUpdating>
<Sequence>
<%-- Store the original height of the panel --%>
<ScriptActionScript="var b = $find('animation'); b._originalHeight = b._element.offsetHeight;"/>
<%-- Disable all the controls --%>
<Parallelduration="0">
<EnableActionAnimationTarget="ctl00_SampleContent_btnUpdate"Enabled="false"/>
<EnableActionAnimationTarget="effect_color"Enabled="false"/>
<EnableActionAnimationTarget="effect_collapse"Enabled="false"/>
<EnableActionAnimationTarget="effect_fade"Enabled="false"/>
</Parallel>
<StyleActionAttribute="overflow"Value="hidden"/>
<%-- Do each of the selected effects --%>
<Parallelduration=".25"Fps="30">
<ConditionConditionScript="$get('effect_fade').checked">
<FadeOutAnimationTarget="up_container"minimumOpacity=".2"/>
</Condition>
<ConditionConditionScript="$get('effect_collapse').checked">
<ResizeHeight="0"/>
</Condition>
<ConditionConditionScript="$get('effect_color').checked">
<ColorAnimationTarget="up_container"PropertyKey="backgroundColor"
EndValue="#FF0000"StartValue="#40669A"/>
</Condition>
</Parallel>
</Sequence>
</OnUpdating>
<OnUpdated>
<Sequence>
<%-- Do each of the selected effects --%>
<Parallelduration=".25"Fps="30">
<ConditionConditionScript="$get('effect_fade').checked">
<FadeInAnimationTarget="up_container"minimumOpacity=".2"/>
</Condition>
<ConditionConditionScript="$get('effect_collapse').checked">
<%-- Get the stored height --%>
<ResizeHeightScript="$find('animation')._originalHeight"/>
</Condition>
<ConditionConditionScript="$get('effect_color').checked">
<ColorAnimationTarget="up_container"PropertyKey="backgroundColor"
StartValue="#FF0000"EndValue="#40669A"/>
</Condition>
</Parallel>
<%-- Enable all the controls --%>
<Parallelduration="0">
<EnableActionAnimationTarget="effect_fade"Enabled="true"/>
<EnableActionAnimationTarget="effect_collapse"Enabled="true"/>
<EnableActionAnimationTarget="effect_color"Enabled="true"/>
<EnableActionAnimationTarget="ctl00_SampleContent_btnUpdate"Enabled="true"/>
</Parallel>
</Sequence>
</OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
</div>
<divclass="demobottom"></div>