维护 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