Wednesday, March 28, 2012

System.Web.UI.UpdatePanel does not have a public property named UpdatePanelAnimationExtend

'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>

No comments:

Post a Comment