ASP.NET_GridVIew_如何記住上一次垂直滾動避免每次都要下拉


最近在進行網頁表單資料綁定至GridView過程
遇到每次Postback後
GridView又跳到第一筆位置的不方便問題
因為每一次都要下拉滾動條
UpdatePanel包覆GridView依舊沒改善問題

設置了MaintainScrollPositionOnPostback為true依舊
原因在於MaintainScrollPositionOnPostback是針對整個Browser的Web Page滾動位置記憶而無法針對Panel、Div進行記憶



解決方式
1.這裡GridView必須放於Panel中(Panel才有支援Scroll)
2.使用.NET Ajax 前台相應的Js程式 
3.透過jQuery和一些js來進行動態的scroll position重新填回上一次紀錄的位置方式
達成記憶的效果


藉由ASP.NET Ajax當中的PageRequestManager來達成非同步Client操作
 Sys.WebForms.PageRequestManager.getInstance()

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest()這個方法,
等到update panel執行完成之後,會再呼叫一次

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(),所以
可以透過這二個方式來達到效果建立及取消。


<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<%--        <script type="text/javascript">
            var xPos, yPos;
            var prm = Sys.WebForms.PageRequestManager.getInstance();

            function BeginRequestHandler(sender, args) {
                if ($get('<%=Panel1.ClientID%>') != null) {
                    // Get X and Y positions of scrollbar before the partial postback
                    xPos = $get('<%=Panel1.ClientID%>').scrollLeft;
                    yPos = $get('<%=Panel1.ClientID%>').scrollTop;
                }
            }

            function EndRequestHandler(sender, args) {
                if ($get('<%=Panel1.ClientID%>') != null) {
                    // Set X and Y positions back to the scrollbar
                    // after partial postback
                    $get('<%=Panel1.ClientID%>').scrollLeft = xPos;
                    $get('<%=Panel1.ClientID%>').scrollTop = yPos;
                }
            }

            prm.add_beginRequest(BeginRequestHandler);
            prm.add_endRequest(EndRequestHandler);
        </script>--%>


於之後寫於Base Page (簡化要自行一直Copy Paste重複js、jQuery代碼的作業)


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
Public Class GridBasePage
    Inherits System.Web.UI.Page


    'Maintain Panel Scroll Position On Partial Postback ASP.NET
    'https://stackoverflow.com/questions/5288682/maintain-panel-scroll-position-on-partial-postback-asp-net/16784707
    'How to call Jquery function from C#
    'https://stackoverflow.com/questions/22216177/how-to-call-jquery-function-from-c-sharp
    'how to call Jquery function from codebehind in c#
    'https://forums.asp.net/t/1831713.aspx?how+to+call+Jquery+function+from+codebehind+in+c+
    'how to call jquery function in code behind in asp.net
    'https://www.c-sharpcorner.com/forums/how-to-call-jquery-function-in-code-behind-in-asp-net
    'Best Way To Call JavaScript Calls After Partial PostBack
    'https://www.c-sharpcorner.com/blogs/best-way-to-call-javascript-calls-after-partial-postback
    Sub MaintainGridViewScrollPosition(PanelControl As Panel, p As Page)
        Dim strScriptName As String = "MaintainGridViewScrollPosition"
        Dim csType As Type = p.GetType()
        Dim csm As ClientScriptManager = p.ClientScript
        Dim sbJsStatement As New StringBuilder
        Dim PanelClientID As String = PanelControl.ClientID
        sbJsStatement.Append("<script language='javascript'>")
        sbJsStatement.Append("  var xPos, yPos;")
        sbJsStatement.Append("  var prm = Sys.WebForms.PageRequestManager.getInstance();")
        sbJsStatement.Append("  function BeginRequestHandler(sender, args) {")
        sbJsStatement.Append("      if ($get('" & PanelClientID & "') != null) {")
        sbJsStatement.Append("          xPos = $get('" & PanelClientID & "').scrollLeft;")
        sbJsStatement.Append("          yPos = $get('" & PanelClientID & "').scrollTop;")
        sbJsStatement.Append("      }")
        sbJsStatement.Append("  }")
        sbJsStatement.Append("  function EndRequestHandler(sender, args) {")
        sbJsStatement.Append("      if ($get('" & PanelClientID & "') != null) {")
        sbJsStatement.Append("          $get('" & PanelClientID & "').scrollLeft = xPos;")
        sbJsStatement.Append("          $get('" & PanelClientID & "').scrollTop = yPos;")
        sbJsStatement.Append("      }")
        sbJsStatement.Append("  }")
        sbJsStatement.Append("  prm.add_beginRequest(BeginRequestHandler);")
        sbJsStatement.Append("  prm.add_endRequest(EndRequestHandler);")
        sbJsStatement.Append("</script>")

        csm.RegisterStartupScript(csType, strScriptName, sbJsStatement.ToString(), False)
    End Sub


End Class



這篇有使用到.NET AJAX事件流觀念
可以參考另一篇介紹
ASP.NET_AJAX生命週期事件流_AJAX技術跟傳統網頁不同優缺點比較
http://coolmandiary.blogspot.com/2020/08/aspnetajax.html








(最佳解法) Maintain Panel Scroll Position On Partial Postback ASP.NET
è可以於每次postback後記憶住上一次放置於Panel中的GirdView垂直滾動值
(PS:一定要將該段js jquery的程式碼放置於ScriptManager之後)



MaintainScrollPositionOnPostback參考文章
è記憶的是PAGE的位置
Maintain Scroll Position On After Postback in Asp.Net 2.0 3.5

如何讓postback後仍維持在同一個位置(MaintainScrollPositionOnPostback設定三種方式)

觸發 post back 固定畫面位置()
MaintainScrollPositionOnPostback IE ok, Firefox ok,  Google Chrome Safari 卻失敗修正方式

[ASP.NET] 使用MaintainScrollPositionOnPostback="true" Chrome則會失效

Panel 中放置 GridView ,點選 GridView 時,Panel 的卷軸會跑到最上方

è
由於WebForm的機制是PostBack,也就是每個動作都會PostBack送回Server端,重新再產生html然後再重新顯示畫面
因此Scroll的位置都會回到最上方

另,由於您的Scroll設定在Panel上,非整個頁面的Scroll位置
所以即使在@Page中設定MaintainScrollPositionOnPostback,他的作用不會產生在Panel內部

因此,您必須改個方式,讓Panel能在Client端記住位置,存在hidden的地方,隨著PostBack送回
再次顯示畫面時,再由ClientScript取得上一次位置,並跳到該位置


gridview 編輯 MaintainScrollPositionOnPostback 無效
èMaintainScrollPositionOnPostback page 的屬性,所以他記憶的是PAGE的位置而不是gridview的位置











留言

這個網誌中的熱門文章

經得起原始碼資安弱點掃描的程式設計習慣培養(五)_Missing HSTS Header

經得起原始碼資安弱點掃描的程式設計習慣培養(三)_7.Cross Site Scripting(XSS)_Stored XSS_Reflected XSS All Clients

T-SQL筆記3_索引觀念 和 B-Tree(SQL))_Performance Tuning技巧