ASP.Net Ajax and Browser Scroll Positioning

[db007]

Hi,

I have a problem with a current project and the scroll position.

I have an AJAX enabled website using Visual Studio 2005 and ASP.Net 2.0.

The project also uses masterpages.

On the page in question, there is a search section in an AJAX update panel, situated on the left hand side. Upon submitting criteria and pressing a button, the results are displayed on the right hand side of the page.

On the right hand side of the page, there is another AJAX Update Panel. Within this Ajax Update Panel there are 2 standard asp.net panels. Only 1 of these two standard asp.net panels is ever displayed at any one time. The first of the standard panels is used to display the list of results.

When a user selects an item from the list of results to view in full detail, the first standard asp.net panel is made Invisible, and second standard asp.net panel is then made visible, which displays the details of the selected item.

So, the way the two standard asp.net panels (that are contained with the AJAX update panel) work is like a master-detail relationship between the list of results and the details for a particular, selected item.

All of this works fine apart from one aspect.

If the user has scrolled down to an item near the bottom of the list of results, when they select the item to view and the second asp.net panel is then displayed, the browser is still in the same position. This means that the user is then looking half-way down the details, which is obviously not acceptable.

Note: when I say “scrolled down” I mean using the browser scroller – no DIV scrollers are used etc.

What I want to happen is that when the asp.net panel containing the detail is displayed, the browser position should be positioned so that it is at the top of the page.

However, the user can also click a “back to results” link when looking at the details. If this is clicked, then when the panel containing the results is then displayed again, I need the browser to reposition back to where it was originally (i.e., just before the user clicked to view the details of a particular item in the results list).

I’ve looked around in some books and on the web, but the solutions I’ve found there don’t work for this scenario. Of course, we are mainly dealing here with the implications of AJAX and partial page postbacks (for the Update panel).

The site needs to work in IE6, IE7 and (ideally) Firefox.

I would appreciate any help on this because a lack of a solution might mean going right back to the drawing board.

Many thanks,
Darren

[Frinavale]

You should look into writing a JavaScript function that scrolls the browser back to the top once the Ajax call has ended it's request.

Look into using the PageRequestManager to execute JavaScript when the Ajax call has returned.

For example, you would add a script something like the following to your page:

<script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(endRequestEventHandler);
//Note that the endRequestEventHandler is the name of the method that should be called to handle the event that occurs when Ajax request has completed.  This is something like a delegate.  You cannot pass parameters to this function...do not include brackets () either...it is simply the name of the function.
 
function endRequestEventHandler()
{
   //....code for scrolling goes here
}
</script>
 

You'll have to look into how to create a JavaScript function that does the browser scrolling...


-Frinny