我們知道 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 來還原滾動條位置。