在ASP.NET WebForms中回发后滚动到上一个位置

时间:2014-01-14 18:26:40

标签: c# javascript jquery asp.net webforms

我正在使用ASP.NET WebForms实现跨浏览器的Web应用程序。所以,我有动态创建的表,其中每个单元格都是从TableCell继承的自定义用户控件。在我的控件中,asp:Panel有几个文本框。由于动态创建表,它可以是不同的宽度。当我更改其中一个文本框中的文本时,TextChanged事件触发并刷新页面。但由于它滚动跳到顶部。如何将页面滚动到上一个位置?

我已经尝试了Page.MaintainScrollPositionOnPostBack = true但它不起作用。

谢谢!

1 个答案:

答案 0 :(得分:2)

您需要使用JavaScript来帮助您完成此项工作。几年前,我遇到了同样的问题,并且能够在回发后使用JavaScript进行滚动修复。

以下是您可以阅读的文章:http://basgun.wordpress.com/2008/06/09/maintain-scroll-position-updatepanel-postback/

基本上,您将在页面请求中添加事件和参数,以便为您解决问题。

文章中的代码:

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