自定义Panel控件-实现滚动条位置自动保存

在 ASP.NET 中，Page 对象有一个 MaintainScrollPositionOnPostBack 属性，当设置为 True 时，页面在 PostBack 时会自动保存并恢复滚动条的位置。在之前的文章中，我们讨论了如何使用 HiddenField 来保存 Panel 的滚动条位置。本文将进一步介绍如何通过扩展 Panel 控件，使其具备自动保存和恢复滚动条位置的功能。

我们将创建一个新的控件 TBPanel，该控件继承自 Panel，并添加了一个 MaintainScrollPositionOnPostBack 属性。当这个属性被设置为 True 时，TBPanel 将自动处理滚动条位置的保存和恢复。

以下是 TBPanel 控件的完整代码：

```vb
Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Text
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls

")>
Public Class TBPanel
Inherits System.Web.UI.WebControls.Panel
Private FMaintainScrollPositionOnPostBack As Boolean = False

'''

''' 在 PostBack 时自动维护滚动条位置。
'''

Public Property MaintainScrollPositionOnPostBack() As Boolean
Get
Return FMaintainScrollPositionOnPostBack
End Get
Set(ByVal value As Boolean)
FMaintainScrollPositiOnOnPostBack= value
End Set
End Property

'''

''' 维护滚动条位置。
'''

Private Sub DoMaintainScrollPosition()
Dim oScript As StringBuilder
Dim sScript As String
Dim oScrollPosX As HiddenField ' 记录水平滚动条位置
Dim oScrollPosY As HiddenField ' 记录垂直滚动条位置

oScript = New StringBuilder()
oScript.Append("function Panel_SaveScrollPosition(PanelID){")
oScript.Append("document.getElementById(PanelID+'_ScrollPosX').value = document.getElementById(PanelID).scrollLeft;")
oScript.Append("document.getElementById(PanelID+'_ScrollPosY').value = document.getElementById(PanelID).scrollTop;}")
oScript.AppendLine()

oScript.Append("function Panel_RestoreScrollPosition(PanelID){")
oScript.Append("document.getElementById(PanelID).scrollLeft = document.getElementById(PanelID+'_ScrollPosX').value;")
oScript.Append("document.getElementById(PanelID).scrollTop = document.getElementById(PanelID+'_ScrollPosY').value;}")
oScript.AppendLine()

Me.Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "PanelScrollFunction", oScript.ToString(), True)

oScrollPosX = New HiddenField()
oScrollPosX.ID = Me.ClientID & "_ScrollPosX"
Me.Controls.Add(oScrollPosX)

oScrollPosY = New HiddenField
oScrollPosY.ID = Me.ClientID & "_ScrollPosY"
Me.Controls.Add(oScrollPosY)

' 页面 Submit 时，记录 Panel 的水平及垂直滚动条位置
sScript = "Panel_SaveScrollPosition('" & Me.ClientID & "');"
Me.Page.ClientScript.RegisterOnSubmitStatement(Me.GetType(), Me.ID & "_SavePanelScroll", sScript)

If Me.Page.IsPostBack Then
' 当 PostBack 时，利用 HiddenField 记录的值来恢复 Panel 滚动条位置
oScrollPosX.Value = Me.Page.Request.Form(oScrollPosX.ClientID)
oScrollPosY.Value = Me.Page.Request.Form(oScrollPosY.ClientID)
sScript = "Panel_RestoreScrollPosition('" & Me.ClientID & "');"
Me.Page.ClientScript.RegisterStartupScript(Me.GetType(), Me.ID & "_SetPanelScroll", sScript, True)
End If
End Sub

Protected Overrides Sub OnLoad(ByVal e As System.EventArgs)
MyBase.OnLoad(e)
If Me.Visible AndAlso (Not Me.DesignMode) Then
If Me.MaintainScrollPositionOnPostBack Then
DoMaintainScrollPosition() ' 维护滚动条位置
End If
End If
End Sub
End Class
```

在上述代码中，`DoMaintainScrollPosition` 方法用于维护滚动条的位置。该方法通过两个 HiddenField 控件来记录水平和垂直滚动条的位置，并在页面提交时调用 `Panel_SaveScrollPosition` Javascript 函数保存滚动条位置。当页面 PostBack 后重新加载时，通过 `Panel_RestoreScrollPosition` 函数恢复滚动条的位置。

程序代码下载：
TBPanel.rar