Asp.net Ajax Single UpdatePanel + AnimationExtender + HIstory = No OnUpdated Animation

Question

I have a page that takes a while to load between partial post backs and have placed a UpdatePanelAnimationExtender to fade the updatepanel in and out. Sample:

Aspx

       <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always"  >
        <ContentTemplate>
            <asp:Button ID="testbtn" runat="server" Text="test" />
        </ContentTemplate>
     </asp:UpdatePanel>

    <ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimations" runat="server" TargetControlID="UpdatePanel1">
      <Animations>
        <OnUpdating> 
            <FadeOut Duration="0.2" Fps="20" minimumOpacity=".3" />
         </OnUpdating>
        <OnUpdated>
            <FadeIn Duration="0.2" Fps="20" minimumOpacity=".3"/>
        </OnUpdated>
    </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>

Code Behind

Private Sub testpage_Init(sender As Object, e As System.EventArgs) Handles Me.Init
    UpdatePanel1.ContentTemplateContainer.Controls.Add(New LiteralControl("1")) 'Show the init ran
End Sub

Private Sub btn_Click(sender As Object, e As System.EventArgs) Handles testbtn.Click
    ScriptManager.GetCurrent(Me.Page).AddHistoryPoint("2", "2", "2") 'Save Event
    UpdatePanel1.ContentTemplateContainer.Controls.Add(New LiteralControl("2")) 'Display event
End Sub

Private Sub sm1_Navigate(sender As Object, e As System.Web.UI.HistoryEventArgs) Handles sm1.Navigate
    Dim State As String = ""
    If e.State.HasKeys Then
        State = e.State.Item(0)
    End If
    UpdatePanel1.ContentTemplateContainer.Controls.Add(New LiteralControl(State)) '"Reload" event
End Sub

When the page first loads you get Button 1

When you click the button it saves the state and displays Button 12

And it does the fade in and out correctly. If you take the URL with history information and try to load it in a new tab the Button 12 displays correctly but it remains faded out. I had heard people say the OnUpdated will only run if a partialpostback has occured in reference to the page loading the first time. I am guessing it is not faking partialpostback when loading by history so it never gets faded in.

My question is there a clean way to fix this that I have just been able to find or am I stuck with injecting some javascript to call thr fade in manually? For as simple as this problem seems to be I can find little to no help out there.

Thanks

Answer 1

I finally figured it out. I added a condition to the OnUpdating side to check to see if the control that initialized the partial post back was the script manager. If so, do not fade out.

 <ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimations" BehaviorID="animationpanel" runat="server" TargetControlID="UpdatePanel1">
    <Animations>
        <OnUpdating> 
            <Condition ConditionScript="(theForm.__EVENTTARGET.value != 'ctl00$sm1');">
                <FadeOut Duration="0.15" Fps="20" minimumOpacity=".3" />
            </Condition>
         </OnUpdating>
        <OnUpdated>
            <FadeIn Duration="0.15" Fps="20" minimumOpacity=".3" />
        </OnUpdated>
    </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>