我们将继承 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
9 < ToolboxData( " <{0}:TBPanel runat=server></{0}:TBPanel> " ) > _
10 Public Class TBPanel Class 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
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
9 < ToolboxData( " <{0}:TBPanel runat=server></{0}:TBPanel> " ) > _
10 Public Class TBPanel Class 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