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

https://stackoverflow.com/questions/5288682/maintain-panel-scroll-position-on-partial-postback-asp-net/16784707

è可以於每次postback後記憶住上一次放置於Panel中的GirdView垂直滾動值

(PS:一定要將該段js 跟 jquery的程式碼放置於ScriptManager之後)

MaintainScrollPositionOnPostback參考文章

è記憶的是PAGE的位置

Maintain Scroll Position On After Postback in Asp.Net 2.0 3.5

http://csharpdotnetfreak.blogspot.com/2011/08/maintain-scroll-position-postback.html

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

https://dotblogs.com.tw/keino123/2011/03/30/22158

觸發 post back 固定畫面位置(二)

MaintainScrollPositionOnPostback IE ok, Firefox ok,  但 Google Chrome 與 Safari 卻失敗修正方式

http://paladinprogram.blogspot.com/2010/06/post-back.html

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

http://aspbook.blogspot.com/2017/08/aspnet-maintainscrollpositiononpostback.html

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

https://social.msdn.microsoft.com/Forums/zh-TW/71b5d2af-5da9-45c2-85cc-f1c3dffc32da/22312-panel-200132591832622-gridview-652924067036984-gridview?forum=236

è

由於WebForm的機制是PostBack，也就是每個動作都會PostBack送回Server端，重新再產生html然後再重新顯示畫面

因此Scroll的位置都會回到最上方

另，由於您的Scroll設定在Panel上，非整個頁面的Scroll位置

所以即使在@Page中設定MaintainScrollPositionOnPostback，他的作用不會產生在Panel內部

因此，您必須改個方式，讓Panel能在Client端記住位置，存在hidden的地方，隨著PostBack送回

再次顯示畫面時，再由Client端Script取得上一次位置，並跳到該位置

gridview 編輯 MaintainScrollPositionOnPostback 無效

èMaintainScrollPositionOnPostback 是 page 的屬性，所以他記憶的是PAGE的位置而不是gridview的位置

http://www.blueshop.com.tw/board/FUM20041006161839LRJ/BRD20120219134718L5Q.html