How to maintain page scroll position after a page postback in asp.net

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <meta http-equiv="refresh" content="4" />   
 <script type="text/javascript">

    var xPos1, yPos1;

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_pageLoading(pageLoadingHandler);
    prm.add_pageLoaded(pageLoaded);
    function pageLoaded(sender, args) {

        $get('<%=Panel_Users.ClientID %>').scrollLeft = xPos1;
        $get('<%=Panel_Users.ClientID %>').scrollTop = yPos1;
    }
    function pageLoadingHandler(sender, args) {
        xPos1 = $get('<%=Panel_Users.ClientID %>').scrollLeft
        yPos1 = $get('<%=Panel_Users.ClientID %>').scrollTop;
    }
    </script>
</asp:Content>

Doesn’t work, where am I going wrong

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

<div style="height: 504px; width: 941px;">
                 <asp:Panel runat="server" ID="Panel_Users" ScrollBars="Auto" Style="z-index: 1; left: 748px;
                     top: 621px; position: absolute; height: 250px; width: 287px">
                     <asp:UpdatePanel UpdateMode="Conditional" ID="UpdatePanel1" runat="server">
                         <ContentTemplate>
                             <asp:GridView ID="Grid_UserTable" runat="server" Style="z-index: 1; left: 2px; top: 5px;
                                 position: absolute; height: 152px; width: 243px" BorderColor="#666666" AutoGenerateColumns="False"
                                 OnRowDataBound="MyGrid_RowDataBound">
                                 <Columns>
                                     <asp:TemplateField HeaderText="Status">
                                         <ItemTemplate>
                                             <asp:Image ID="Status" runat="server" />
                                         </ItemTemplate>
                                     </asp:TemplateField>
                                     <asp:BoundField DataField="TimeReceived" HeaderText="TimeReceived" InsertVisible="False"
                                         ReadOnly="True" SortExpression="TimeReceived" />
                                     <asp:BoundField DataField="TimeRead" HeaderText="TimeRead" SortExpression="TimeRead" />
                                     <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                                 </Columns>
                             </asp:GridView>
                         </ContentTemplate>
                     </asp:UpdatePanel>
                 </asp:Panel>
             </div>

I am trying to make the page stay at the same position when the page refreshes after every 5 seconds and the page goes to top. I tried Page MaintainScrollPositionOnPostback=”true” . It didn’t work, I tried using Ajax but have no idea how to use it. Can someone help me how to do it with Ajax.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Try the following code on your design page..It works fine for me..

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="frmName.aspx.vb" Inherits="frmName" MaintainScrollPositionOnPostBack = "true" %>

Method 2

The MaintainScrollPositionOnPostback only works in IE. To do this you can either roll your own client script or use anchor links on different sections of your page/form.

Similar questions here:

MaintainScrollPositionOnPostback is not working – how to debug?

MaintainScrollPositionOnPostback not working with javascript:__doPostBack

maintainScrollPositionOnPostback=”true” does not work globally after setting in web.config ,but works in page level,what should I do?

Method 3

<%@ Page MaintainScrollPositionOnPostback="true" %> as the page declaration will keep the scroll position as it is

Method 4

A cheap fix for what sounds like awful UI (page refreshes every 5 seconds) would be to add ‘#’ and the id of the element you want to keep in view to the URL in the address bar but that will automatically scroll to the top of the ID-linked element.

If this is a commercial product and you’re in a hurry I’d recommend checking out JQuery’s ajax implementation and knock off those reloads altogether.

It may be as simple as a line like:

  $.ajax(
    {
      url:"/thisPath/requestPath",
      complete:function(data){
      //apply data (the http-response) to HTML
    }
  );

If that looks bizarre to you, it’s just an object-literal being fed to the JQuery objects ajax method. The function assigned to the ‘complete’ fires when the http-response is received which is fed to the function as the argument ‘data’ which is established on the inside of the .ajax method.

Method 5

Try this in the code behind:

protected void Page_Load(object sender, EventArgs e)
{
    if (Page.IsPostBack)
    {
        Page.MaintainScrollPositionOnPostBack = true;
    }
}

Posdata: I tried it with C#.

Method 6

UpdatePanels are horrible from a performance standpoint. I would do this with jquery and avoid the postbacks completely.

$.ajax({
    url: "/path/to/url/that/returns/users",
    type: "POST",
    dataType: "json",
    data: {},
    success: function(data, status, xhttp)
    {
        var html = "<table>";
        for ( var i = 0; i < data.length; i++ )
        {
            html += "<tr>";
            html += "<td></td>"; // build up table cells
            html += "</tr>";
        }
        html += "</table>";
        $("#NameOfDivToPutTableIn").html(html);
    }

});

If this is an option, set up the url to read from based on this tutorial:

http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

If you don’t want to use jquery, you can still use MS AJAX, just skip those update panels. http://www.geekzilla.co.uk/View7B75C93E-C8C9-4576-972B-2C3138DFC671.htm

Method 7

@{
    
}

<html>

<head>
<script type="text/javascript">

window.onload = function () {
   var div = document.getElementById("dvScroll");
   var div_position = document.getElementById("div_position");
    var position = parseInt(@Request.Form("div_position"));
    if (isNaN(position)) {
        position = 0;
    }

    div.scrollTop = position;
    div.onscroll = function () {
        div_position.value = div.scrollTop;
    };
};

</script>
</head>

<body>

<div id="dvScroll" style="overflow-y: scroll; height: 260px; width: 300px">
    1. This is a sample text
    <br />
    2. This is a sample text
    <br />
    3. This is a sample text
    <br />
    4. This is a sample text
    <br />
    5. This is a sample text
    <br />
    6. This is a sample text
    <br />
    7. This is a sample text
    <br />
    8. This is a sample text
    <br />
    9. This is a sample text
    <br />
    10. This is a sample text
    <br />
    11. This is a sample text
    <br />
    12. This is a sample text
    <br />
    13. This is a sample text
    <br />
    14. This is a sample text
    <br />
    15. This is a sample text
    <br />
    16. This is a sample text
    <br />
    17. This is a sample text
    <br />
    18. This is a sample text
    <br />
    19. This is a sample text
    <br />
    20. This is a sample text
    <br />
    21. This is a sample text
    <br />
    22. This is a sample text
    <br />
    23. This is a sample text
    <br />
    24. This is a sample text
    <br />
    25. This is a sample text
    <br />
</div>

<hr />
<form method="post">
<input type="hidden" id="div_position" name="div_position" />
<input type="submit" value="Cool" />
</form> 
</body>
</html>

You can use this to maintain scroll Position after postback.

Source: http://www.aspsnippets.com/Articles/Maintain-Scroll-Position-of-DIV-on-PostBack-in-ASPNet.aspx

Method 8

For someone else struggling with this. Easiest solution is to keep the scroll location of the entire window

  var xPos, yPos;

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (evt, args) {
        window.scrollTo(xPos , yPos);
    });


    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function (evt, args) {
        xPos = $(window).scrollLeft();
        yPos = $(window).scrollTop();

    });

Ad both begin and end request. On begin request get the windows scroll position using Jquery. On end request just scroll to that location.

Method 9

There are answers all over the net to this problem, and personally none of them worked, as for me Firefox would attempt to recover the previous scroll position (wrongly), trigger the window.scroll event, which would overwrite my hidden field with its wrong position, which my scrollTo would then read. (I have gridviews coming from postbacks followed by automatic collapsing of some rows.)

So here’s yet another solution to this problem – I decided I only want to recover the scroll position after a submit, not a refresh, so this was adequate:

ASPX page:

<form runat="server" onsubmit="$('#hfScroll').val($(window).scrollTop()); return true;">
    <input type="hidden" id="hfScroll" value="0" />

Javascript:
function restoreScroll()
{
    var position = parseInt($('#hfScroll').val());
    if (!isNaN(position)) {
        $(document).scrollTop(position);
    }
};
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(restoreScroll);

For some reason, on browser refresh my hidden input is not reset to zero, so this does behave odd sometimes. I would love to know what’s doing this, I think it is Firefox as it doesn’t happen on IE, but life’s too short [he says…having downloaded half the internet and spent hours on this..].

Method 10

If the post back is caused by a button, you can try this:

ScriptManager.GetCurrent(Page).RegisterAsyncPostBackControl(button);

Method 11

<pages maintainScrollPositionOnPostBack="true">


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x