我們知道 Page 的 MaintainScrollPositionOnPostBack 屬性為 True 時(shí)，PostBack 時(shí)頁(yè)面就會(huì)自動(dòng)維護(hù)滾動(dòng)條位置。而在上一篇「維護(hù) Panel 滾動(dòng)條位置」文章中，也介紹如何利用 HiddenField 來(lái)維護(hù) Panel 滾動(dòng)條的位置；在這篇文章中，我們將利用相同的原理，擴(kuò)展 Panel 控件，使得 Panel 控件就自動(dòng)具有此功能。

　　我們將繼承 Panel 控件下來(lái)命名為 TBPanel ，如同 Page 一樣，在 TBPanel 中新增一個(gè) MaintainScrollPositionOnPostBack 屬性，當(dāng)MaintainScrollPositionOnPostBack 設(shè)定 True 時(shí)，TBPanel 就會(huì)自動(dòng)維護(hù) PostBack 時(shí)滾動(dòng)條的位置。

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 時(shí)自動(dòng)維護(hù)捲軸位置。
16 ''' </summary>
17 < _
18 Description("PostBack 時(shí)自動(dòng)維護(hù)捲軸位置。"), _
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 ''' 維護(hù)捲軸位置。
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 '頁(yè)面 Sumbit 時(shí)，記錄 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 '當(dāng) PostBack 時(shí)，利用 HiddenField 記錄的值來(lái)維護(hù) 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() '維護(hù)捲軸位置
78 End If
79 End If
80 End Sub
81End Class
82

　　程序代碼中主要是透過(guò) DoMaintainScrollPosition 方法，是用來(lái)維護(hù)滾動(dòng)條位置。在此方法中會(huì)輸出二個(gè) HiddenField 來(lái)記錄水平及垂直滾動(dòng)條的位置，并在頁(yè)面上注冊(cè) Panel_SaveScrollPosition 及 Panel_RestoreScrollPosition 二個(gè) JavaScript 函式，當(dāng)頁(yè)面 Sumbit 時(shí)會(huì)呼叫 Panel_SaveScrollPositio 函式將 Panel 的滾動(dòng)條位置記錄于 HiddenField，而 PostBack 后重新載入頁(yè)面時(shí)會(huì)呼叫 Panel_RestoreScrollPosition 來(lái)還原滾動(dòng)條位置。