ASP.NET 魔法學院

GridView 若需要有捲軸，通常會將 GridView 置於 Panel 中，並設定 Panel 的 ScrollBars 屬性為 "Auto" 時，這樣就可以在 Panel 就會自動判斷是否需要出現水平或垂直捲軸。

<asp:Panel ID="Panel1" runat="server" Height="300px" Width="712px" ScrollBars="Auto" BorderStyle="Solid" BorderWidth="1px"> <asp:GridView ID="GridView1" runat="server" AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="ProductID" DataSourceID="SqlDataSource1" EmptyDataText="沒有資料錄可顯示。"> <Columns> ... ... </Columns> </asp:GridView> </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 捲軸位置。

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim sScript As String Dim oScrollPosX As HiddenField '記錄水平捲軸位置 Dim oScrollPosY As HiddenField '記錄垂直捲軸位直 oScrollPosX = New HiddenField() oScrollPosX.ID = "ScrollPosX" Me.Form.Controls.Add(oScrollPosX) oScrollPosY = New HiddenField oScrollPosY.ID = "ScrollPosY" Me.Form.Controls.Add(oScrollPosY) '頁面 Sumbit 時，記錄 Panel 的水平及垂直捲軸位置 sScript = "window.document.getElementById('" & oScrollPosX.ClientID & "').value =" & _ "window.document.getElementById('" & Panel1.ClientID & "').scrollLeft;" sScript = sScript & _ "window.document.getElementById('" & oScrollPosY.ClientID & "').value = " & _ "window.document.getElementById('" & Panel1.ClientID & "').scrollTop;" Me.ClientScript.RegisterOnSubmitStatement(Me.GetType, "SavePanelScroll", sScript) If Me.IsPostBack Then '當 PostBack 時，利用 HiddenField 記錄的值來維護 Panel 捲軸位置 oScrollPosX.Value = Me.Request.Form(oScrollPosX.ClientID) oScrollPosY.Value = Me.Request.Form(oScrollPosY.ClientID) sScript = "window.document.getElementById('" & Panel1.ClientID & "').scrollLeft = " & oScrollPosX.Value & ";" & _ "window.document.getElementById('" & Panel1.ClientID & "').scrollTop = " & oScrollPosY.Value & ";" Me.ClientScript.RegisterStartupScript(Me.GetType, "SetPanelScroll", sScript, True) End If End Sub

ASP.NET 魔法學院