维护 Panel 滚动条位置

GridView 若需要有滚动条，通常会将 GridView 置于 Panel 中，并设定 Panel 的 ScrollBars 属性为 "Auto" 时，这样 Panel 就会自动判断是否需要出现水平或垂直滚动条。
 

1          < asp:Panel  ID ="Panel1"  runat ="server"  Height ="300px"  Width ="712px"  ScrollBars ="Auto"  BorderStyle ="Solid"  BorderWidth ="1px" >
2          < asp:GridView  ID ="GridView1"  runat ="server"  AllowSorting ="True"  AutoGenerateColumns ="False"
3             DataKeyNames ="ProductID"  DataSourceID ="SqlDataSource1"  EmptyDataText ="没有数据录可显示。" >
4              < Columns >
5                 ...
6                 ...
7              </ Columns >
8          </ asp:GridView >
9          </ asp:Panel >

可是当页面 PostBack 时，Panel 的垂直滚动条会跳回最上方，水平滚动条会跳回最左方。我们可以参考 Page.MaintainScrollPositionOnPostBack 属性的做法(参考 解析 Page.MaintainScrollPositionOnPostBack 属性 这篇文章)，利用二个 HiddenField 来记录水平及垂直滚动条的位置。

我们可以在 Page Load 中撰写如下的程序代码，其中 Panel 的 ID 命名为 Panel1，在面页输出 "ScrollPosX" 及 "ScrollPosY" 二个 HiddenField，当页面 Sumbit 时，利用 "ScrollPosX" HiddenField 来记录滚动条水平位置，"ScrollPosY" HiddenField 来记录垂直位置。而当页面 PostBack 后重新加载页面，就取得这二个 HiddenField 值，重新设定 Panel 的滚动条位置，如此就可以维护 Panel 滚动条位置。

 1      Protected   Sub Page_Load() Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 2        Dim sScript As String
 3        Dim oScrollPosX As HiddenField '记录水平滚动条位置
 4        Dim oScrollPosY As HiddenField  '记录垂直滚动条位直
 5
 6        oScrollPosX = New HiddenField()
 7        oScrollPosX.ID = "ScrollPosX"
 8        Me.Form.Controls.Add(oScrollPosX)
 9
10        oScrollPosY = New HiddenField
11        oScrollPosY.ID = "ScrollPosY"
12        Me.Form.Controls.Add(oScrollPosY)
13
14        '页面 Sumbit 时，记录 Panel 的水平及垂直滚动条位置
15        sScript = "window.document.getElementById('" & oScrollPosX.ClientID & "').value =" & _
16                  "window.document.getElementById('" & Panel1.ClientID & "').scrollLeft;"
17        sScript = sScript & _
18                  "window.document.getElementById('" & oScrollPosY.ClientID & "').value = " & _
19                  "window.document.getElementById('" & Panel1.ClientID & "').scrollTop;"
20        Me.ClientScript.RegisterOnSubmitStatement(Me.GetType, "SavePanelScroll", sScript)
21
22        If Me.IsPostBack Then
23            '当 PostBack 时，利用 HiddenField 记录的值来维护 Panel 滚动条位置
24            oScrollPosX.Value = Me.Request.Form(oScrollPosX.ClientID)
25            oScrollPosY.Value = Me.Request.Form(oScrollPosY.ClientID)
26
27            sScript = "window.document.getElementById('" & Panel1.ClientID & "').scrollLeft = " & oScrollPosX.Value & ";" & _
28                      "window.document.getElementById('" & Panel1.ClientID & "').scrollTop = " & oScrollPosY.Value & ";"
29            Me.ClientScript.RegisterStartupScript(Me.GetType, "SetPanelScroll", sScript, True)
30        End If
31    End Sub