在部分回发 ASP.NET 上保持面板滚动位置答案

【问题标题】：Maintain Panel Scroll Position On Partial Postback ASP.NET在部分回发 ASP.NET 上保持面板滚动位置
【发布时间】：2011-07-14 09:44:46
【问题描述】：

我有一个放置在 ASP.NET 面板中的 gridview。面板和 Gridview 都在 UpdatePanel 中。 gridview 中有一个列会导致部分回发。我想在这些回发上保持面板滚动位置。有什么办法吗？问候。

【问题讨论】：

检查这个对我有帮助的解决方案：*.com/a/28594716/7731479

标签： asp.net updatepanel postback scroll

【解决方案1】：

asp.net 中没有内置工具来解决它

但是，有解决此问题的方法；你需要用javascript来处理它。

这里提到解决方案：Maintain Scrollbar Position Inside UpdatePanel After Partial PostBack

2012 年 5 月 20 日编辑；在看到 cmets 之后

<form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Release" />
   <script type="text/javascript">
      // It is important to place this JavaScript code after ScriptManager1
      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>

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <ContentTemplate>
     <asp:Panel ID="Panel1" runat="server" Height="300">
        <%-- Some stuff which would cause a partial postback goes here --%>
     </asp:Panel>
   </ContentTemplate>
 </asp:UpdatePanel>

</form>

下面是代码快照：-

【讨论】：

优秀！！像魅力一样工作！
图片中的代码效果很好！如果你想复制和粘贴，这里有一个链接，weblogs.asp.net/andrewfrederick/archive/2008/03/04/…
我正在使用计时器更新网格视图，在这种情况下它不起作用 js 从不执行
它与 jQuery 完美搭配，将 $get( 更改为 $( 并使用 scrollLeft() 而不仅仅是 scrollLeft
只有在更改绑定到面板中的 LinkButton 元素并导致回发的数据后，它才对我有用。在我的例子中，我有一个可以构建日历的中继器，通过加入单独的 html 位，这些位保存在标签中，一个保存在 LinkButton 中。如果绑定到 LinkButton 的数据以标签开头，则滚动位置将跳转到开头。将初始放置在前一个标签中后，滚动位置将保持如此处所述。希望这可能对某人有用

【解决方案2】：

将 MaintainScrollPositionOnPostback="true" 添加到您的页面指令。

【讨论】：

它不会帮助它保持页面的滚动位置而不是 div 或面板

【解决方案3】：

我几天来一直在寻找这个问题的答案，使用典型的替代方法 MaintainScrollPositionOnPostback 和使用 BeginRequestHandler 和 EndRequestHandler 的 JavaScript 解决方案，在我的例子中我使用 MasterPage。

没有任何效果，但是我想出了一个相当简单的解决方案，使用 jQuery 与 BeginRequestHandler 和 EndRequestHandler 使用相同的 @waqas-raja 算法：

<script type="text/javascript">

    var scrollPosition = 0;

    $(document).ready(function () {

        $(window).scroll(function (event) {
            scrollPosition = $(window).scrollTop();
        });

    });

</script>

<script type="text/javascript">

    // It is important to place this JavaScript code after ScriptManager1
    var xPos, yPos;
    var prm = Sys.WebForms.PageRequestManager.getInstance();

    function BeginRequestHandler(sender, args) {
        console.log('BeginRequest');
    }

    function EndRequestHandler(sender, args) {
        $(window).scrollTop(scrollPosition);
    }

    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);

</script>

这个想法是在每次用户移动 Scroll 时在全局变量中捕获 Scroll 的位置，这样就知道哪个是最后一个位置，并且在进行回发时输入 EndRequestHandler 事件并使用用户标记的最后位置

这在 Firefox 和 Google Chrome 中对我有用 :)

【讨论】：