Reset scroll position after Async postback - ASP.NET

Question

What is the best way to reset the scroll position to the top of page after the an asynchronous postback?

The asynchronous postback is initiated from a ASP.NET GridView CommandField column and the ASP.NET update panel Update method is called in the GridView OnRowCommand.

My current application is an ASP.NET 3.5 web site.

EDIT: I have received excellent feedback from everyone, and I ended using the PageRequestManager method in a script tag, but my next question is:

How do I configure it to only execute when the user clicks the ASP.NET CommandField in my GridView control? I have other buttons on the page that perform an asynchronous postback that I do not want to scroll to the top of the page.

EDIT 1: I have developed a solution where I do not need to use the PageRequestManager. See my follow up answer for solution.

Solution 1

Here is the following solution I developed based on this source

ASP.NET Webform

<script language="javascript" type="text/javascript">
   function SetScrollEvent() {
      window.scrollTo(0,0);
   }
</script> 

<asp:GridView id="MyGridView" runat="server" OnRowDataBound="MyGridView_OnRowDataBound">
    <Columns>
        <asp:CommandField ButtonType="Link" ShowEditButton="true" />
    </Columns>
</asp:GridView>

ASP.NET Webform code behind

protected void MyGridView_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if(e.Row.RowType.Equals(DataControlRowType.DataRow))
    {
        foreach (DataControlFieldCell cell in e.Row.Cells)
        {
            foreach(Control control in cell.Controls)
            {
                LinkButton lb = control as LinkButton;

                if (lb != null && lb.CommandName == "Edit")
                    lb.Attributes.Add("onclick", "SetScrollEvent();");
            }
        }
    }
}

Solution 2

As you're using UpdatePanels you're going to need to hook into the ASP.NET AJAX PageRequestManager

You'll need to add a method to the endRequest event hooks that are:

Raised after an asynchronous postback is finished and control has been returned to the browser.

So you'd have something like:

<script type="text/javascript">
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(pageLoaded);

  function pageLoaded(sender, args) {
     window.scrollTo(0,0);
  }
</script>

Which will force the browser to scroll back to the top of the page once an update request has completed.

There are other events you could hook into instead of course:

beginRequest // Raised before the request is sent
initializeRequest // Raised as the request is initialised (good for cancelling)
pageLoaded // Raised once the request has returned, and content is loaded
pageLoading // Raised once the request has returned, and before content is loaded

The beauty of asynchronous post-backs is that the page will maintain the scroll height without you having to set MaintainScrollPosition, as there is no "full page reload" happening, in this case you actually want that effect to happen, so you will need to manually create it.

Edit to respond to updated question

Ok, so if you need to only reset the postion on certain button presses you'll need to do something like this:

Start by hooking into the BeginRequest instead/as well:

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

This is because in the args parameter you get access to:

args.get_postBackElement().id

Which will tell you the id of the button that started the whole event - you can then either check the value here, and move the page, or store it in a variable, and query it in the end request - being aware of race conditions, etc where the user clicks another button before your original update completes.

That should get you going with any luck - there's quite a few examples around this on Working with PageRequestManager Events

Solution 3

Are you using asp.net AJAX? If so there are two very useful events in the client libraries beginRequest and endRequest, one of the problems with partial/async postbacks, is that the general page hasnt got a clue what you are doing. the begin and endrequest events will allow you to maintain scroll position at the client, you could have a var in js that is set to the scroll position on beginrequest, then on end request you can reset whichever element's scrollTop you require.. i'm sure ive seen this done before but cant find a link. ill post if i find an example

Solution 4

taken from this tutorial:

http://aspnet.4guysfromrolla.com/articles/111407-1.aspx

We set MaintainScrollPositionOnPostback=true

Then if we need to reset scroll position call the method:

Private Sub ResetScrollPosition()
If Not ClientScript.IsClientScriptBlockRegistered(Me.GetType(), "CreateResetScrollPosition") Then
   'Create the ResetScrollPosition() function
   ClientScript.RegisterClientScriptBlock(Me.GetType(), "CreateResetScrollPosition", _
                    "function ResetScrollPosition() {" & vbCrLf & _
                    " var scrollX = document.getElementById('__SCROLLPOSITIONX');" & vbCrLf & _
                    " var scrollY = document.getElementById('__SCROLLPOSITIONY');" & vbCrLf & _
                    " if (scrollX && scrollY) {" & vbCrLf & _
                    "    scrollX.value = 0;" & vbCrLf & _
                    "    scrollY.value = 0;" & vbCrLf & _
                    " }" & vbCrLf & _
                    "}", True)

   'Add the call to the ResetScrollPosition() function
   ClientScript.RegisterStartupScript(Me.GetType(), "CallResetScrollPosition", "ResetScrollPosition();", True)
End If
End Sub 

View more solutions

Comments

[Michael Kniskern]

I only want to return to the top of the page with this specific event of the ASP.NET GridView. I have a bunch of other buttons on the same page that I want to maintain the scroll position for.