扩展 Panel 控件 - 自动维护滚动条位置

我们知道 Page 的 MaintainScrollPositionOnPostBack 属性为 True 时，PostBack 时页面就会自动维护滚动条位置。而在上一篇「维护 Panel 滚动条位置」文章中，也介绍如何利用 HiddenField 来维护 Panel 滚动条的位置；在这篇文章中，我们将利用相同的原理，扩展 Panel 控件，使得 Panel 控件就自动具有此功能。

我们将继承 Panel 控件下来命名为 TBPanel ，如同 Page 一样，在 TBPanel 中新增一个 MaintainScrollPositionOnPostBack 属性，当MaintainScrollPositionOnPostBack 设定 True 时，TBPanel 就会自动维护 PostBack 时滚动条的位置。

TBPanel 完整的程序代码如下

 1Imports System
 2Imports System.Collections.Generic
 3Imports System.ComponentModel
 4Imports System.Text
 5Imports System.Web
 6Imports System.Web.UI
 7Imports System.Web.UI.WebControls
 8
 9<ToolboxData("<{0}:TBPanel runat=server></{0}:TBPanel>")> _
10Public Class TBPanelClass TBPanel
11    Inherits System.Web.UI.WebControls.Panel
12    Private FMaintainScrollPositionOnPostBack As Boolean = False
13
14    /**/''' <summary>
15    ''' PostBack 時自動維護捲軸位置。
16    ''' </summary>
17    < _
18    Description("PostBack 時自動維護捲軸位置。"), _
19    DefaultValue(False) _
20    > _
21    Public Property MaintainScrollPositionOnPostBack()Property MaintainScrollPositionOnPostBack() As Boolean
22        Get
23            Return FMaintainScrollPositionOnPostBack
24        End Get
25        Set(ByVal value As Boolean)
26            FMaintainScrollPositionOnPostBack = value
27        End Set
28    End Property
29
30    /**/''' <summary>
31    ''' 維護捲軸位置。
32    ''' </summary>
33    Private Sub DoMaintainScrollPosition()Sub DoMaintainScrollPosition()
34        Dim oScript As StringBuilder
35        Dim sScript As String
36        Dim oScrollPosX As HiddenField '記錄水平捲軸位置
37        Dim oScrollPosY As HiddenField '記錄垂直捲軸位直
38
39        oScript = New StringBuilder()
40        oScript.Append("function Panel_SaveScrollPosition(PanelID){")
41        oScript.Append("document.getElementById(PanelID+'_ScrollPosX').value = document.getElementById(PanelID).scrollLeft;")
42        oScript.Append("document.getElementById(PanelID+'_ScrollPosY').value = document.getElementById(PanelID).scrollTop;}")
43        oScript.AppendLine()
44
45        oScript.Append("function Panel_RestoreScrollPosition(PanelID){")
46        oScript.Append("document.getElementById(PanelID).scrollLeft = document.getElementById(PanelID+'_ScrollPosX').value;")
47        oScript.Append("document.getElementById(PanelID).scrollTop = document.getElementById(PanelID+'_ScrollPosY').value;}")
48        oScript.AppendLine()
49
50        Me.Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "PanelScrollFunction", oScript.ToString(), True)
51
52        oScrollPosX = New HiddenField()
53        oScrollPosX.ID = Me.ClientID & "_ScrollPosX"
54        Me.Controls.Add(oScrollPosX)
55
56        oScrollPosY = New HiddenField
57        oScrollPosY.ID = Me.ClientID & "_ScrollPosY"
58        Me.Controls.Add(oScrollPosY)
59
60        '頁面 Sumbit 時，記錄 Panel 的水平及垂直捲軸位置
61        sScript = "Panel_SaveScrollPosition('" & Me.ClientID & "');"
62        Me.Page.ClientScript.RegisterOnSubmitStatement(Me.GetType(), Me.ID & "_SavePanelScroll", sScript)
63
64        If Me.Page.IsPostBack Then
65            '當 PostBack 時，利用 HiddenField 記錄的值來維護 Panel 捲軸位置
66            oScrollPosX.Value = Me.Page.Request.Form(oScrollPosX.ClientID)
67            oScrollPosY.Value = Me.Page.Request.Form(oScrollPosY.ClientID)
68            sScript = "Panel_RestoreScrollPosition('" & Me.ClientID & "');"
69            Me.Page.ClientScript.RegisterStartupScript(Me.GetType(), Me.ID & "_SetPanelScroll", sScript, True)
70        End If
71    End Sub
72
73    Protected Overrides Sub OnLoad()Sub OnLoad(ByVal e As System.EventArgs)
74        MyBase.OnLoad(e)
75        If Me.Visible AndAlso (Not Me.DesignMode) Then
76            If Me.MaintainScrollPositionOnPostBack Then
77                DoMaintainScrollPosition() '維護捲軸位置
78            End If
79        End If
80    End Sub
81End Class
82

程序代码中主要是透过 DoMaintainScrollPosition 方法，是用来维护滚动条位置。在此方法中会输出二个 HiddenField 来记录水平及垂直滚动条的位置，并在页面上注册 Panel_SaveScrollPosition 及 Panel_RestoreScrollPosition 二个 JavaScript 函式，当页面 Sumbit 时会呼叫 Panel_SaveScrollPositio 函式将 Panel 的滚动条位置记录于 HiddenField，而 PostBack 后重新载入页面时会呼叫 Panel_RestoreScrollPosition 来还原滚动条位置。

程序代码下载：TBPanel.rar