Maintaining Scroll Position on Postback, Part 2By Steve Stchur
I decided to place my SmartScroller control in a namespace called
sstchur.web.SmartNav. Since this control
<input> fields, I
had SmartScroller derive from
System.Web.UI.Control rather than
The following shell of my code shows this, along with SmartScroller's single member variable,
we'll discuss in more detail shortly.
order to access the values of the hidden
<input> fields in script. Therefore, from our server-side code
we need to be able to determine the Web Form's ID, meaning we have to first find the Web Form. To my knowledge, there's no
way to easily access the
HtmlForm class instance in a WebForm short of recursing through the control hierarchy.
The SmartScroller control contains a
GetServerForm() method that does just this:
This method is called from the
OnInit() method like so:
m_theForm = GetServerForm(Page.Controls);
This will start searching for the
HtmlForm starting from the top of the control hierarchy. Once it is found,
it is assigned to the private member variable
GetServerForm() works via a process
known as recursion; for more information on recursion be sure to read Recursion,
Why It's Cool.)
The next thing we need to do is override the
OnInit() is the same
as we examined earlier in this article.
The first step in this function is to grab the server side form, and we do this by calling our recursive
GetServerForm() function, passing in the
Page.Controls collection. This tells the
function to start looking for the server form at the top-most level of controls.
After we've got our server side form, we need to create two hidden
<input> form fields to store
the coordinates of the scroll bar at any given moment. We assign logical IDs to them -
scrollLeft and then add them to our
SmartScroller control collection.
scriptString, which is then added to the page through a call to
Page class contains a number of methods to emit client-side script (such as
For more information on injecting client-side script into a Web page from server-side code be sure to read
Scott Mitchell's article Working
With Client-Side Script.
That's all there is to the
OnInit() method. There is one final piece of the puzzle that needs to be put into
Render() method of the SmartScroller ASP.NET server control. This
simply ensures that the control is being rendered inside of a Web Form. It does this by calling the
VerifyRenderingInServerForm() method. This method checks to see if a Web Form exists on the page -
if it doesn't, it raises an exception.
Using the SmartScroller Control in an ASP.NET Web Page
Using SmartScroller in an ASP.NET Web page couldn't be easier. If you are using Visual Studio .NET, you can simply add SmartScroller to the Toolbox by right-clicking on the Toolbox, selecting to Add/Remove Items, and browsing to the SmartScroller assembly. If you are not using Visual Studio .NET, you'll need to add the SmartScroller assembly to your Web application's
/bindirectory and then add a
@Registerdirective to the top of your page that looks like:
Then, in your ASP.NET page, add the following Web control somewhere inside of your Web Form:
A complete example (and live demo) can be seen below:
I've put all those
<br> tags in just so the page will scroll for us. When visiting the
live demo, be sure to scroll down to one of the Button
Web controls and click it. Doing so will cause a postback, but you'll note that on postback your browser will retain the current
scroll position, rather than starting back up at the top of the page.
Having the browser retain its scrollbar position may not seem like a terribly important thing to spend your time and efforts trying to accomplish, but trust me, it's really, really annoying when you click on a link of a question in a FAQ and expect its answer, only to be launched way back to the top of the page. It's enough to make me say "forget it" and go some place else to find my answer.