ASP.NET 魔法學院

我們知道 Page 的 MaintainScrollPositionOnPostBack 屬性為 True 時，PostBack 時頁面就會自動維護捲軸位置。而在上一篇「維護 Panel 捲軸位置」文章中，也介紹如何利用 HiddenField 來維護 Panel 捲軸的位置；在這篇文章中，我們將利用相同的原理，擴展 Panel 控制項，使得 Panel 控制項就自動具有此功能。

我們將繼承 Panel 控制項下來命名為 TBPanel ，如同 Page 一樣，在 TBPanel 中新增一個 MaintainScrollPositionOnPostBack 屬性，當MaintainScrollPositionOnPostBack 設定 True 時，TBPanel 就會自動維護 PostBack 時捲軸的位置。

TBPanel 完整的程式碼如下

Imports System Imports System.Collections.Generic Imports System.ComponentModel Imports System.Text Imports System.Web Imports System.Web.UI Imports System.Web.UI.WebControls <ToolboxData("<{0}:TBPanel runat=server></{0}:TBPanel>")> _ Public Class TBPanel Inherits System.Web.UI.WebControls.Panel Private FMaintainScrollPositionOnPostBack As Boolean = False ''' <summary> ''' PostBack 時自動維護捲軸位置。 ''' </summary> < _ Description("PostBack 時自動維護捲軸位置。"), _ DefaultValue(False) _ > _ Public Property MaintainScrollPositionOnPostBack() As Boolean Get Return FMaintainScrollPositionOnPostBack End Get Set(ByVal value As Boolean) FMaintainScrollPositionOnPostBack = value End Set End Property ''' <summary> ''' 維護捲軸位置。 ''' </summary> Private Sub DoMaintainScrollPosition() Dim oScript As StringBuilder Dim sScript As String Dim oScrollPosX As HiddenField '記錄水平捲軸位置 Dim oScrollPosY As HiddenField '記錄垂直捲軸位直 oScript = New StringBuilder() oScript.Append("function Panel_SaveScrollPosition(PanelID){") oScript.Append("document.getElementById(PanelID+'_ScrollPosX').value = document.getElementById(PanelID).scrollLeft;") oScript.Append("document.getElementById(PanelID+'_ScrollPosY').value = document.getElementById(PanelID).scrollTop;}") oScript.AppendLine() oScript.Append("function Panel_RestoreScrollPosition(PanelID){") oScript.Append("document.getElementById(PanelID).scrollLeft = document.getElementById(PanelID+'_ScrollPosX').value;") oScript.Append("document.getElementById(PanelID).scrollTop = document.getElementById(PanelID+'_ScrollPosY').value;}") oScript.AppendLine() Me.Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "PanelScrollFunction", oScript.ToString(), True) oScrollPosX = New HiddenField() oScrollPosX.ID = Me.ClientID & "_ScrollPosX" Me.Controls.Add(oScrollPosX) oScrollPosY = New HiddenField oScrollPosY.ID = Me.ClientID & "_ScrollPosY" Me.Controls.Add(oScrollPosY) '頁面 Sumbit 時，記錄 Panel 的水平及垂直捲軸位置 sScript = "Panel_SaveScrollPosition('" & Me.ClientID & "');" Me.Page.ClientScript.RegisterOnSubmitStatement(Me.GetType(), Me.ID & "_SavePanelScroll", sScript) If Me.Page.IsPostBack Then '當 PostBack 時，利用 HiddenField 記錄的值來維護 Panel 捲軸位置 oScrollPosX.Value = Me.Page.Request.Form(oScrollPosX.ClientID) oScrollPosY.Value = Me.Page.Request.Form(oScrollPosY.ClientID) sScript = "Panel_RestoreScrollPosition('" & Me.ClientID & "');" Me.Page.ClientScript.RegisterStartupScript(Me.GetType(), Me.ID & "_SetPanelScroll", sScript, True) End If End Sub Protected Overrides Sub OnLoad(ByVal e As System.EventArgs) MyBase.OnLoad(e) If Me.Visible AndAlso (Not Me.DesignMode) Then If Me.MaintainScrollPositionOnPostBack Then DoMaintainScrollPosition() '維護捲軸位置 End If End If End Sub End Class

程式碼中主要是透過 DoMaintainScrollPosition 方法，是用來維護捲軸位置。在此方法中會輸出二個 HiddenField 來記錄水平及垂直捲軸的位置，並在頁面上註冊 Panel_SaveScrollPosition 及 Panel_RestoreScrollPosition 二個 JavaScript 函式，當頁面 Sumbit 時會呼叫 Panel_SaveScrollPositio 函式將 Panel 的捲軸位置記錄於 HiddenField，而 PostBack 後重新載入頁面時會呼叫 Panel_RestoreScrollPosition 來還原捲軸位置。

程式碼下載：TBPanel.rar

ASP.NET 魔法學院