我们知道 Page 的 MaintainScrollPositionOnPostBack 属性为 True 时,PostBack 时页面就会自动维护滚动条位置。而在上一篇「维护 Panel 滚动条位置」文章中,也介绍如何利用 HiddenField 来维护 Panel 滚动条的位置;在这篇文章中,我们将利用相同的原理,扩展 Panel 控件,使得 Panel 控件就自动具有此功能。
我们将继承 Panel 控件下来命名为 TBPanel ,如同 Page 一样,在 TBPanel 中新增一个 MaintainScrollPositionOnPostBack 属性,当MaintainScrollPositionOnPostBack 设定 True 时,TBPanel 就会自动维护 PostBack 时滚动条的位置。
TBPanel 完整的程序代码如下
程序代码中主要是透过 DoMaintainScrollPosition 方法,是用来维护滚动条位置。在此方法中会输出二个 HiddenField 来记录水平及垂直滚动条的位置,并在页面上注册 Panel_SaveScrollPosition 及 Panel_RestoreScrollPosition 二个 JavaScript 函式,当页面 Sumbit 时会呼叫 Panel_SaveScrollPositio 函式将 Panel 的滚动条位置记录于 HiddenField,而 PostBack 后重新载入页面时会呼叫 Panel_RestoreScrollPosition 来还原滚动条位置。
程序代码下载:TBPanel.rar
我们将继承 Panel 控件下来命名为 TBPanel ,如同 Page 一样,在 TBPanel 中新增一个 MaintainScrollPositionOnPostBack 属性,当MaintainScrollPositionOnPostBack 设定 True 时,TBPanel 就会自动维护 PostBack 时滚动条的位置。
TBPanel 完整的程序代码如下
1
Imports System
2
Imports System.Collections.Generic
3
Imports System.ComponentModel
4
Imports System.Text
5
Imports System.Web
6
Imports System.Web.UI
7
Imports System.Web.UI.WebControls
8![](/Images/OutliningIndicators/None.gif)
9
<ToolboxData("<{0}:TBPanel runat=server></{0}:TBPanel>")> _
10
Public Class TBPanel
11
Inherits System.Web.UI.WebControls.Panel
12
Private FMaintainScrollPositionOnPostBack As Boolean = False
13![](/Images/OutliningIndicators/InBlock.gif)
14
''' <summary>
15
''' PostBack 時自動維護捲軸位置。
16
''' </summary>
17
< _
18
Description("PostBack 時自動維護捲軸位置。"), _
19
DefaultValue(False) _
20
> _
21
Public 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![](/Images/OutliningIndicators/InBlock.gif)
30
''' <summary>
31
''' 維護捲軸位置。
32
''' </summary>
33
Private Sub DoMaintainScrollPosition()
34
Dim oScript As StringBuilder
35
Dim sScript As String
36
Dim oScrollPosX As HiddenField '記錄水平捲軸位置
37
Dim oScrollPosY As HiddenField '記錄垂直捲軸位直
38![](/Images/OutliningIndicators/InBlock.gif)
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![](/Images/OutliningIndicators/InBlock.gif)
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![](/Images/OutliningIndicators/InBlock.gif)
50
Me.Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "PanelScrollFunction", oScript.ToString(), True)
51![](/Images/OutliningIndicators/InBlock.gif)
52
oScrollPosX = New HiddenField()
53
oScrollPosX.ID = Me.ClientID & "_ScrollPosX"
54
Me.Controls.Add(oScrollPosX)
55![](/Images/OutliningIndicators/InBlock.gif)
56
oScrollPosY = New HiddenField
57
oScrollPosY.ID = Me.ClientID & "_ScrollPosY"
58
Me.Controls.Add(oScrollPosY)
59![](/Images/OutliningIndicators/InBlock.gif)
60
'頁面 Sumbit 時,記錄 Panel 的水平及垂直捲軸位置
61
sScript = "Panel_SaveScrollPosition('" & Me.ClientID & "');"
62
Me.Page.ClientScript.RegisterOnSubmitStatement(Me.GetType(), Me.ID & "_SavePanelScroll", sScript)
63![](/Images/OutliningIndicators/InBlock.gif)
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![](/Images/OutliningIndicators/InBlock.gif)
73
Protected Overrides 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
81
End Class
82![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/None.gif)
8
![](/Images/OutliningIndicators/None.gif)
9
![](/Images/OutliningIndicators/None.gif)
10
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
11
![](/Images/OutliningIndicators/InBlock.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/InBlock.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/InBlock.gif)
28
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
29
![](/Images/OutliningIndicators/InBlock.gif)
30
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
33
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/InBlock.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/InBlock.gif)
38
![](/Images/OutliningIndicators/InBlock.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/InBlock.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/InBlock.gif)
43
![](/Images/OutliningIndicators/InBlock.gif)
44
![](/Images/OutliningIndicators/InBlock.gif)
45
![](/Images/OutliningIndicators/InBlock.gif)
46
![](/Images/OutliningIndicators/InBlock.gif)
47
![](/Images/OutliningIndicators/InBlock.gif)
48
![](/Images/OutliningIndicators/InBlock.gif)
49
![](/Images/OutliningIndicators/InBlock.gif)
50
![](/Images/OutliningIndicators/InBlock.gif)
51
![](/Images/OutliningIndicators/InBlock.gif)
52
![](/Images/OutliningIndicators/InBlock.gif)
53
![](/Images/OutliningIndicators/InBlock.gif)
54
![](/Images/OutliningIndicators/InBlock.gif)
55
![](/Images/OutliningIndicators/InBlock.gif)
56
![](/Images/OutliningIndicators/InBlock.gif)
57
![](/Images/OutliningIndicators/InBlock.gif)
58
![](/Images/OutliningIndicators/InBlock.gif)
59
![](/Images/OutliningIndicators/InBlock.gif)
60
![](/Images/OutliningIndicators/InBlock.gif)
61
![](/Images/OutliningIndicators/InBlock.gif)
62
![](/Images/OutliningIndicators/InBlock.gif)
63
![](/Images/OutliningIndicators/InBlock.gif)
64
![](/Images/OutliningIndicators/InBlock.gif)
65
![](/Images/OutliningIndicators/InBlock.gif)
66
![](/Images/OutliningIndicators/InBlock.gif)
67
![](/Images/OutliningIndicators/InBlock.gif)
68
![](/Images/OutliningIndicators/InBlock.gif)
69
![](/Images/OutliningIndicators/InBlock.gif)
70
![](/Images/OutliningIndicators/InBlock.gif)
71
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
72
![](/Images/OutliningIndicators/InBlock.gif)
73
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
74
![](/Images/OutliningIndicators/InBlock.gif)
75
![](/Images/OutliningIndicators/InBlock.gif)
76
![](/Images/OutliningIndicators/InBlock.gif)
77
![](/Images/OutliningIndicators/InBlock.gif)
78
![](/Images/OutliningIndicators/InBlock.gif)
79
![](/Images/OutliningIndicators/InBlock.gif)
80
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
81
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
82
![](/Images/OutliningIndicators/None.gif)
程序代码中主要是透过 DoMaintainScrollPosition 方法,是用来维护滚动条位置。在此方法中会输出二个 HiddenField 来记录水平及垂直滚动条的位置,并在页面上注册 Panel_SaveScrollPosition 及 Panel_RestoreScrollPosition 二个 JavaScript 函式,当页面 Sumbit 时会呼叫 Panel_SaveScrollPositio 函式将 Panel 的滚动条位置记录于 HiddenField,而 PostBack 后重新载入页面时会呼叫 Panel_RestoreScrollPosition 来还原滚动条位置。
程序代码下载:TBPanel.rar