Wednesday, April 29, 2009

Keep scroll position on ASP.NET page when using Master Pages

In ASP.NET you can force the browser to scroll back to the position it was prior to a postback. To enable this just add MaintainScrollPositionOnPostBack=”True” to your page declaration. This would look something like this:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" 
Inherits="MyApp.WebForm4" MaintainScrollPositionOnPostBack=”True”%>
This is great and all, but this doesn’t work with Master Pages. This is because Master Pages are really more like User Controls than a real page. Master Pages don’t have a Page declaration like above. Instead they have something similar, but instead of the word Page, it uses the word Master. It doesn’t support the MaintainScrollPositionOnPostBack property. What to do now? Option 1: Global Change If you want the change to affect all the pages in your application, you can put it in the web.config in the Pages element like the following.
<pages maintainScrollPositionOnPostBack="True">
Option 2: Page Level Change On any page (even ones that use Master Pages), you can add this line to your Page_Load event. Page.MaintainScrollPositionOnPostBack = true; Option 3: Hybrid

You can combine the two options above. The setting in the web.config becomes the default. Then on any particular page you can add the one line to your Page_Load event to change the default behavior.

 

8 comments:

Anonymous said...

I am using GridView in .net 2.0.
When user click on a Edit button the scroll position is maintain but not at Edited Row. I am using Template fields for Edi/Update/Cancel. please suggest the solution to maintain scroll position on editing row.
Thanks in advance.

Brent V said...

Hi anonymous,

Two solutions come to mind.

1. Use javascript to get the current scroll position of the grid, submit it in the form data, after the page is rendered, use javascript to pull the value back and set the scroll position of your grid.

2. Put your grid in an Update Panel and get AJAX for free, no postback needed. This is on the surface easier, but can have complication depending on how complex your grid is.

I hope this helps.

Brent

Anonymous said...

I have been searching for a fix to maintain scroll position on postback. And, I coded your suggested fix to set it in the config file and on each page.
But it doesn't work with IE8 and the latest version of Firefox. It worked OK with an earlier version of IE, I think IE5. Any suggestions? Thanks,

Bobby

And, perhaps you would kindly send me an e-mail at bobbyastrain42@yahoo.com

Brent V said...

Anonymous,

Wow! I am shocked. This is a standard ASP.NET feature. I am surprised it doesn't work anymore. I don't have the latest IE, so I can't comment. I do have FF, but I have not tried it for a while. Maybe try ASP.NET 3.5. I would think that would do it if nothing else.

Good luck.

Brent

Bobby said...

Brent,

Thanks, I'll try your suggestion. Is it compatible with VS 2005?

Bobby

Brent V said...

Bobby,

I seem to remember the ASP.NET feature being around since version 1 or 1.1 or .NET and Visual Studio 2003. So, yes the feature will be there in VS2005, but what may have changed is the code behind the feature from VS2003 to VS2005 to VS2008. The code in VS2005 may be older and not updated to support the latest versions of IE and FF. Be sure you have all your patches (especially service packs) for .NET (the version you are using which I would guess is 2.x).

If you get desperate you can always look at the javascript files that are included on the generated html page. Using your favorite JavaScript debugger (I love Firebug or VS2008) to figure out where it is breaking. To override a function in JavaScript you just declare it again later on the page that the original function declaration.

My guess is that the bug would be in the JavaScript since the code on the server side is really just remembering the scroll info and sending it back to the page.

I am curious to know what you find. I hope that helps.

Brent

Anonymous said...

I have been working on a mobile site for the past couple of weeks and I wanted the functionality of MaintainScrollPositionOnPostback but realized that javascript is spotty in mobile browsers and decided to manage jumps and postbacks via anchor tags and decorations to the url:

In the page to jump to:
<a name="xxx" />
The url to jump to
www.somesite.com/mypage.aspx?q=aa&r=bb#xxx

Unknown said...

MaintainScrollPositionOnPostBack
="True" not work on google crme and firebos..how can work it on this browser anybody help me..