Implementing Cross-Browser Compatible Smart Navigation Features

by Damon Armstrong

Rating:

SmartNavigation is a feature built into ASP.NET that makes postbackssmoother by remembering the page scroll position, retaining elementfocus, reducing screen flicker, and not registering the postback in thebrowser?s history. This greatly enhances the user experience for pagesthat make use of postbacks, but it only works in Internet Explorer 5.5and up. In this article Damon Armstrong will discuss how to buildsimilar page position and focus tracking features, but which will workin all modern, standards compliant browsers.

Introduction
On a recent project for a government client I was tasked with creating a user information page that needed to identify the region and office in which an individual worked. There were around 3,000 total offices, so I ended up creating two drop down lists to help narrow down the selection. The first drop down contained a list of all of the regions, and the second was automatically populated with region-specific offices by autopostbacking the form when a region was selected. Because the form had a number of data entry fields, these drop down lists were located near the bottom of the form and required viewers to scroll down to see them. It worked well in Internet Explorer. The trouble was, it only worked in Internet Explorer and some of our users had other browsers.

Inevitably, slightly irritated people began calling in and complaining that when they selected a region they were returned to the top of the page after the postback. This meant they had to scroll all the way back down the page to select an item from the office drop down list, and it was a bit irksome. They wanted the page to stay in the same place and maintain the tab position so they could just tab over to the office drop down. They wanted the Smart Navigation features that would have been available had they been using Internet Explorer.

My first inclination was to tell them download Internet Explorer because it would make all of their problems go away without much effort on my part, but I had a feeling that wouldnt go down very well. People who used browsers other than Internet Explorer are comfortable with and partial to their browsers, so why should they have to change? Instead, I decided it would be better to build something that would mimic the ASP.NET Smart Navigation functionality but which would be compatible with the most recent versions of Navigator, Opera, and FireFox.

This article is going to cover how to go about implementing some of the Smart Navigation functionality found in ASP.NET using cross-browser compatible JavaScript. It will also wrap all of the code into an easy to reuse assembly so you can import it into whatever projects you so choose without having to do a lot of reworking.

To understand this article you should have a good understanding of JavaScript, as well as the page scripting model. If you have never heard of the Page.RegisterClientScriptBlock() method then you should check out the links section of this article and do some catching up before pressing onward.

I'll be discussing, in some detail, how all the code works. But I know there are those of you out there who wont really want to get into it that deep into the underlying mechanism, but would just prefer to use the code. I sympathize with you, so if you are one of these people then you should read the "Using SmartNav on a Page" section. For those of you that want a more in depth understanding, I'll be discussing what Smart Navigation is, how it works, and getting into the details of how to implement our own version of the features with cross-browser compatible code.
System Requirements
To run the code for this sample you should have
A web server running on Windows 2000 or later The .NET Framework version 1.1 VS.NET 2003Installing and Compiling the Sam