保持 AJAX Control Toolkit TabContainer 的 ActiveTabIndex

• 下载源代码 - 309 KB

引言

AJAX Control Toolkit 中的 TabContainer 控件是一种在网页上有限的空间内显示大量数据的绝佳方式。然而，它存在一个问题：当用户离开页面并返回时，它会默认回到第一个选项卡——在最好的情况下，需要额外的鼠标点击，在最坏的情况下，会使用户感到困惑或愤怒（相信我，他们确实存在）。

本文参考并实际上嵌入在另一篇文章中，该文章介绍了在页面访问之间维护控件状态。 如果您还没有阅读过，我建议您阅读一下。

使用代码

我们无法轻松维护选项卡点击状态的主要原因之一，实际上是选项卡控件的优点之一——在选项卡之间切换不会导致回发。 然而，为了维护任何类型的状态，在某个时刻，我们需要将信息传回服务器，这正是下面我方法的核心。（实际上，有没有人知道任何仅客户端的方法来维护状态？例如，在 JavaScript 中管理 cookie？）

OnActiveTabChanged() 事件

[题外话：本节涉及 JavaScript 代码，但由于我将所有内容封装在可重用的类中，下面的代码示例使用 VB.NET 将 JavaScript 渲染到页面上。 这稍微难于理解，但最终都是更大项目的一部分。]

顾名思义，TabContainer() 控件的此属性允许您指定用户在选项卡之间切换时要调用的 JavaScript 代码。

If C.GetType Is GetType(AjaxControlToolkit.TabContainer) Then
    ' If there are multiple tab containers on this page,
    ' then we need a seperate proxy function for each
    Dim JS As New StringBuilder(vbCrLf)
    JS.Append("function SaveTabState_" & C.ID & "(){")
    JS.Append(vbCrLf & "_SaveTabState('" & C.ClientID & "','" & C.UniqueID & "');")
    JS.Append(vbCrLf & "}")
    Page.ClientScript.RegisterClientScriptBlock(Me.GetType, _
         "SaveTabState_" & C.ID, JS.ToString, True)

    ' Create the attribute to call this function
    DirectCast(C, AjaxControlToolkit.TabContainer).OnClientActiveTabChanged = _
                                             "SaveTabState_" & C.ID

在该函数中，我们使用标准的 JavaScript Web 服务调用创建回调到服务器。

' Create common function. The routine before calls this
If Not HasRegisteredCommon Then
    JS = New StringBuilder(vbCrLf)
    JS.Append("function _SaveTabState(clientID, uniqueID){")
    JS.Append(vbCrLf & "var tabBehavior = $get(clientID).control;")
    JS.Append(vbCrLf & "var index = tabBehavior.get_activeTabIndex();")

    ' This web service reference must already have been
    ' setup by the developer in the script manager
    JS.Append(vbCrLf & "LookupService.SaveTabIndex('" & _
              Me.Page.Request.Path & "_' + uniqueID,index);")
    JS.Append(vbCrLf & "}")
    Page.ClientScript.RegisterClientScriptBlock(Me.GetType, _
                 "SaveTabState", JS.ToString, True)

当然，使用新的 Microsoft AJAX Extensions 框架，使用 ScriptManager() 类将所有内容组合在一起非常简单。 下面，我们使用 ScriptManagerProxy() 类连接到现有的 ScriptManager。

        ' Add the web service reference to the script manager
        Dim SMP As New ScriptManagerProxy()
        SMP.Services.Add(New ServiceReference("~/Services/LookupService.asmx"))
        Page.Controls.Add(SMP)
        HasRegisteredCommon = True
    End If
End If

查找 Web 服务

JavaScript 中调用的 Web 服务非常简单。

Public Sub SaveTabIndex(ByVal UniqueTabID As String, ByVal Index As Integer)
        ' Simply save to the session
        System.Web.HttpContext.Current.Session(UniqueTabID) = Index
End Sub

恢复状态

现在，我们将当前的选项卡索引存储在会话中，稍后可以从服务器访问——特别是，当我们重新实例化页面时。 简单吧？ 如果您对此感到满意，只需在页面的 Page.Load() 事件中设置 TabContainer.ActiveTabIndex = CInt(Session(UniqueTabID)) 即可。

但是，我们程序员喜欢整洁和懒惰，所以我找到了一种解决方案，您甚至不必这样做。 有关更多信息，请参阅我的另一篇文章 在页面重新访问时维护控件状态。