First TabPanel always displayed when navigating back to a page using ASP.NET 3.5 SP1 AJAX History feature

Posted on 2009-04-21
Last Modified: 2013-11-08
Hi, I have an ASP.NET v3.5 SP1 page that contains a TabContainer from the AJAX Control Toolkit.  I have the ScriptManager's EnableHistory attribute set to True.  In my codebehind, I handle the ActiveTabChanged event and call ScriptManager.AddHistoryPoint passing the index of the current tab.  My browser history correctly records the tabs that I visit, however there is a round-trip to the server each time I change the active tab.  One of my tabs contains an updatepanel.  If I set a trigger for this updatepanel (<asp:AsyncPostBackTrigger ControlID="SearchTabs" EventName="ActiveTabChanged" />) then the round-trip no longer occurs but this then stops the activetab from correctly changing when the ScriptManager_Navigate procedure runs.

The attached code sample demonstrates the problem.

Can anyone identify why the AsyncPostBackTrigger prevents the tab being changed?
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Search_Default"

    EnableEventValidation="false" EnableViewState="true" Title="AJAX control toolkit test" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>


<head runat="server">




    <form runat="server">

    <asp:ScriptManager ID="ScriptManager" runat="server" EnableHistory="true" EnableSecureHistoryState="false"



    <cc1:TabContainer ID="SearchTabs" runat="server" Width="100%" AutoPostBack="true"


        <cc1:TabPanel ID="Tab1" runat="server" HeaderText="FreeText">


                Tab 1





        <cc1:TabPanel ID="Tab2" runat="server" HeaderText="Database">


                Tab 2



                <asp:UpdatePanel ID="JudgmentsPanel" runat="server">


                        this is some content - in reality I have some user controls here



                        <asp:AsyncPostBackTrigger ControlID="SearchTabs" EventName="ActiveTabChanged" />





        <cc1:TabPanel ID="Tab3" runat="server" HeaderText="FreeText">


                Tab 3









Imports System.Diagnostics

Imports AjaxControlToolkit

Partial Class Search_Default

    Inherits System.Web.UI.Page

    Dim PageState As New NameValueCollection

    Protected Property ActiveTabIndex() As Integer


            If Not ViewState("ActiveTabIndex") Is Nothing Then

                Return Convert.ToInt32(ViewState("ActiveTabIndex"))


                Return 0

            End If

        End Get

        Set(ByVal value As Integer)

            ViewState("ActiveTabIndex") = value

        End Set

    End Property

    Protected Sub SearchTabs_ActiveTabChanged(ByVal sender As Object, ByVal e As System.EventArgs)

        '    ScriptManager.AddHistoryPoint(PageState, ActiveTabIndex.ToString())

        ActiveTabIndex = SearchTabs.ActiveTabIndex ' Update the ActiveTabIndex property

        If ScriptManager.IsInAsyncPostBack And Not ScriptManager.IsNavigating Then

            ScriptManager.AddHistoryPoint("Tab", ActiveTabIndex.ToString(), "Test tab " & ActiveTabIndex.ToString)

        End If

    End Sub

    'Private Sub SetupJavascript()

    '    Dim sb As StringBuilder = New StringBuilder()

    '    sb.Append("function activeTabChanged(sender, e) {")

    '    sb.Append("__doPostBack('" + SearchTabs.UniqueID + "', sender.get_activeTabIndex()); ")

    '    sb.Append("}")

    '    Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "TabChanged", sb.ToString(), True)

    'End Sub

#Region "Handle use of back button"

    Protected Sub ScriptManager_Navigate(ByVal sender As Object, ByVal e As System.Web.UI.HistoryEventArgs)

        'This runs when the user clicks the browser's back button or forward button, or when clicking on a link (for example in their favorites) 

        'which has some page state parameters that we can use to restore a previous search that they did

        Trace.Write("User pressed browser's back or forward button")

        If e.State.HasKeys Then

            If e.State.Item("Tab") IsNot Nothing Then

                If IsNumeric(e.State.Item("Tab")) Then

                    Dim TabIndex As Integer = e.State.Item("Tab")

                    If TabIndex >= 0 AndAlso TabIndex <= SearchTabs.Tabs.Count + 1 Then

                        SearchTabs.ActiveTabIndex = Convert.ToInt32(e.State("Tab"))


                        Throw New ApplicationException("Unexpected value for Tab parameter.")

                    End If


                    Throw New ApplicationException("Tab parameter must be numeric.")

                End If


                'Tab was not a parameter

            End If

        End If

    End Sub

#End Region

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

        If (Not Page.IsPostBack) Then

            ActiveTabIndex = 0

        End If

    End Sub

End Class

Open in new window

Question by:Hairbrush
    LVL 83

    Accepted Solution

    I would think the reason is that the updatepanel is only surrounding one of the tab pages so it can not manipulate the whole tabcontrol. Try placing all tabcontrol code in the updatepanel.
    LVL 12

    Author Closing Comment

    Brilliant!  You are my hero - many thanks, that works!

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    Join & Write a Comment

    Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
    I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
    It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
    Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now