CODEWITHSUNDEEP
c#asp.netpostback
BobLoblaw
BobLoblaw

Reputation: 2001

How to maintain scroll position on autopostback?

How can I get back to the same position of a page on postback. It always seems to get to the top of the page.

I've tried using maintainScrollPositionOnPostBack = "true"

But its not working.

Upvotes: 36

Views: 80453

Answers (12)

omadawn
omadawn

Reputation: 309

Best solution for me, was to wrap the problematic controls with an update panel

<asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Conditional">
<ContentTemplate>
dropdown controls that cause postback etc..
</ContentTemplate>
</asp:UpdatePanel>

ofcourse, you also need the 

<asp:ScriptManager ID="ScriptManager1" runat="server" />

to be present inside the main form of the site.

Upvotes: 3

Bharat Patil
Bharat Patil

Reputation: 31

Try this. It's working for me. 

<script type="text/javascript">
  window.onload = function () {
               var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
               document.getElementById("<%=scrollArea.ClientID%>").scrollTop = h.value;
              }
   function SetDivPosition() {
           var intY = document.getElementById("<%=scrollArea.ClientID%>").scrollTop;
           var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
           h.value = intY;
     }

  function afterpostback() {

            var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
            document.getElementById("<%=scrollArea.ClientID%>").scrollTop = h.value;

     }

</script> 

 <asp:HiddenField ID="hfScrollPosition" runat="server" Value="0" />
 <div id="scrollArea" onscroll="SetDivPosition()"   runat="server"  style="height:225px;overflow:auto;overflow-x:hidden;"> 

if (Page.IsPostBack) {
ScriptManager.RegisterClientScriptBlock(Page, this.GetType(), "CallJS", "afterpostback();", true);
}

Upvotes: 2

Vladislav
Vladislav

Reputation: 1995

Make sure, that you do not set default button in <form id="form1" runat="server" defaultbutton="YourDefaultButton">. Remove defaultbutton="YourDefaultButton" and MaintainScrollPositionOnPostback="true" will work.

Upvotes: 0

Juli&#225;n
Juli&#225;n

Reputation: 1386

From this question: Maintain Panel Scroll Position On Partial Postback ASP.NET

I was looking for an answer to this problem for several days, using the typical alternative of MaintainScrollPositionOnPostback and the JavaScript solutions using BeginRequestHandler and EndRequestHandler where in my case I use MasterPage.

Nothing worked, however I came up with a fairly simple solution using jQuery with BeginRequestHandler and EndRequestHandler using the same @waqas-raja algorithm:

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

The idea is to capture the position of the Scroll in a global variable each time the user moves the Scroll, in this way it is known which was the last position and when making the postback the EndRequestHandler event is entered and updated with the last position what the user marked

This worked for me in Firefox and Google Chrome :)

Upvotes: -1

RBILLC
RBILLC

Reputation: 190

Note: If you have a default control defined, it will scroll to that control on post back even if Page MaintainScrollPositionOnPostback="true"

Upvotes: 1

the-a-monir
the-a-monir

Reputation: 177

<script type="text/javascript">    
  var xPos, yPos;
  var prm = Sys.WebForms.PageRequestManager.getInstance();

  function BeginRequestHandler(sender, args) {
    if ($get('<%=Panel1.ClientID%>') != null) {         
      xPos = $get('<%=Panel1.ClientID%>').scrollLeft;
      yPos = $get('<%=Panel1.ClientID%>').scrollTop;
    }
 }

 function EndRequestHandler(sender, args) {
     if ($get('<%=Panel1.ClientID%>') != null) {       
       $get('<%=Panel1.ClientID%>').scrollLeft = xPos;
       $get('<%=Panel1.ClientID%>').scrollTop = yPos;
     }
 }
 prm.add_beginRequest(BeginRequestHandler);
 prm.add_endRequest(EndRequestHandler);

add the above code in ScriptManager tag and add MaintainScrollPositionOnPostback="true" in the page declaration

Upvotes: 1

joseph.c
joseph.c

Reputation: 156

Although bbbwex's reply is correct, it actually took me a while to realize I need to place MaintainScrollPositionOnPostback="true" at both

  1. Top of the ASPX page.

  2. In IsPostBack

It works after I satisfy both condition.

Upvotes: 1

bbbwex
bbbwex

Reputation: 732

I've recently looked for this as well. Came up with a load of Javascript to be inserted until I found the following:

At the top of your .aspx codefile, insert the following:

 MaintainScrollPositionOnPostback="true"

so the very first sentence in your .aspx starts

<%@ Page Language="C#" MaintainScrollPositionOnPostback="true" AutoEventWireup="true" CodeBehind="Default.aspx.cs"

This works just fine for me without having to add any other code for keeping scrollbar positions using updatepanels

Upvotes: 54

Guzumba
Guzumba

Reputation: 111

Are you using Google Chrome to test? I was having the same issue but started testing in IE and Firefox and it was working. I don't think Chrome supports this property. It might be a .NET Framework 3.5 issue also. It is probably fixed in .NET 4.0

Upvotes: 4

K Richard
K Richard

Reputation: 1984

There are a few ways I have used to set maintainScrollPositionOnPostBack. Have you tried more than one? Can you describe what is triggering the postback and which browsers you have tested? Are you using a master page?

  1. You can set Page.MaintainScrollPositionOnPostBack = true; in the code behind on page load.
  2. You can add it to the page declaration <%@ Page MaintainScrollPositionOnPostback="true" %>
  3. You can add it in the web config file <pages maintainScrollPositionOnPostBack="true" />

Upvotes: 20

FreeAsInBeer
FreeAsInBeer

Reputation: 12979

If you have a specific anchor you want to move to you could do something like described here. Otherwise you would have to use javascript and find out how far you are from the top, save it in a hidden field or cookie, and reset the view after the page loads.

Upvotes: 1

TheGeekYouNeed
TheGeekYouNeed

Reputation: 7539

You can set .Focus() onto a specific server control when your page posts back.

Upvotes: 8

Related Questions