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

Question

<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 I'm 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 try to keep the page in the same position when the page is refreshed every 5 seconds and the page goes up. I tried Page MaintainScrollPositionOnPostback = "true". This did not work, I tried using Ajax, but I have no idea how to use it. Can someone help me how to do this with Ajax.

Answer 1

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

Related questions here:

MaintainScrollPositionOnPostback not working - how to debug?

MaintainScrollPositionOnPostback not working with javascript: __ doPostBack

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

Answer 2

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

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

Answer 3

A cheap fix for what sounds like a horrible user interface (page refresh every 5 seconds) should be to add a “#” and the identifier of the item you want to save in the URL in the address bar, but that will automatically scroll to the top parts of the element associated with the identifier.

If this is a commercial product and you are in a hurry, I would recommend checking out the jQuery ajax implementation and completely abandoning these reboots.

It can be as simple as a line:

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

If this looks weird to you, it's just a literal object that is fed into the ajax method of jQuery objects. A function assigned to "full" is triggered when an http response is received, which is passed to the function as the "data" argument, which is set inside the .ajax method.

Answer 4

UpdatePanels are terrible in terms of performance. I would do this with jquery and completely avoid postbacks.

 $.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, configure the read URL based on this guide:

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

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

Answer 5

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

Answer 6

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

Answer 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 the scroll position after postback.

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

Answer 8

For someone who is struggling with this. The 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(); }); 

Declaration of both the initial and final request. At the first request, get the scroll position of the window using jQuery. At the end of the request, just highlight this place.

Answer 9

Add this line

 <%@ Page MaintainScrollPositionOnPostback="true" %> 

Answer 10

This problem has answers all over the network, and personally none of them worked, because for me Firefox will try to restore the previous scroll position (wrong), fire the window.scroll event, which will overwrite my hidden field with the wrong position, which is my scrollTo will read. (I have gridviews coming from postbacks, followed by automatic folding of some rows.)

So, here is another solution to this problem - I decided that I only want to restore the scroll position after sending, not updating, so that was enough:

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, in updating the browser, my hidden input is not reset to zero, so sometimes it behaves oddly. I would like to know what to do with it, I think it’s Firefox because it doesn’t happen in IE, but life is too short [he says ... downloaded half the Internet and spent hours on it ..].

Answer 11

 <pages maintainScrollPositionOnPostBack="true">