A recent project I've been working on is a knowledge base with dynamic
data structures. As such, all of the controls placed on the update page are
dynamically created at runtime.
There is a drop down list for country and state, with the country list causing a post
back to fill the state list. We needed the page to scroll back to the country
list after postback to relieve the user of having to scroll down two pages.
It didn't take much research to find the Page directive MaintainScrollPositionOnPostback="true". While
this did get the page to scroll back to the drop down list, it also caused the page
to scroll back to the submit button when there was a validation error (all done on
the server side). Hey, no problem, I'll just set that directive programatically
only when the post back is caused by that drop down list.
I found a nice article by Peter Bromberg on a way to determine the control that causes a
post back at http://www.eggheadcafe.com/articles/20050609.asp.
I got null exceptions when trying to return the control, so I changed the code slightly
to just return a string that describes the type of control.
But more null exceptions awaited me when I tried to set the scroll back directive
from the drop down list call back function. Apparently this was also related
to the dynamic nature of the page. I decided to abandon the page directive and
to wade into Javascript.
An article at ASP.Net magazine by Brad McCabe, http://www.aspnetpro.com/NewsletterArticle/2003/09/asp200309bm_l/asp200309bm_l.asp got
me started in the right direction. The functions presented would save the scroll
position in a hidden field, and that field would later be used to set the scroll position.
I converted the functions to C# and implemented them in my Page.OnInit function.
After getting all the Javascript errors resolved (always a chore for me), the page refused
to scroll on post back.
Using a neat Javascript trace utility from http://www.interlogy.com/~cigdem/trace/ I
was able to determine that "theBody.scrollTop", which I translated as "document.body.scrollTop",
was not returning anything. So I was saving nothing to the hidden control.
Looking further I found a set of Javascript functions by "Tigra" at http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html that
would find the x or y scroll postion, and the height and width of the window.
The article also has a great cross reference table for different browsers and the
window/scroll functions supported by each.
I only needed the y scroll function, and used a call to it to replace the document.page.scrollTop
property. Now Tracer was confirming that I was saving the correct scroll position,
but alas the page did not scroll back. After a little more debugging I
determined the page would never scroll by setting the document.body.scrollTop in this
situation since this is just a property you are setting. Something else would
have to read that value to set the scroll. I had no idea what that might be
since Javascript is not my strong point.
But there is a scroll function, and by calling scroll(0, [saved y value]) I was able
to finally get the page to scroll back only to the drop down list.
The post back control function, in App_Data/Global.asax.cs:
publicstaticstring GetPostBackControlType(System.Web.UI.Page page)
{
string objectType
= string.Empty;
Control control
= null;
string ctrlname
= page.Request.Params["__EVENTTARGET"];
if (ctrlname
!= null && ctrlname != String.Empty)
{
control = page.FindControl(ctrlname);
}
//
if __EVENTTARGET is null, the control is a button type and we need to
//
iterate over the form collection to find it
else
{
string ctrlStr=String.Empty;
Control c=null;
foreach (string ctl in page.Request.Form)
{
//
handle ImageButton controls ...
if (ctl.EndsWith(".x")
|| ctl.EndsWith(".y"))
{
ctrlStr = ctl.Substring(0,ctl.Length-2);
c= page.FindControl(ctrlStr);
}
else
{
c = page.FindControl(ctl);
}
if (c is System.Web.UI.WebControls.Button ||
c is System.Web.UI.WebControls.ImageButton)
{
control = c;
break;
}
}
}
if (control
!= null)
{
objectType = control.GetType().ToString();
}
return objectType;
}
The Javascript placed in the body of the aspx page:
<scripttype="text/javascript"language="javascript">
function SaveScrollLocation
() {
//trace('Scroll
Top = ' + f_scrollTop());
window.document.forms[0].__SCROLLLOC.value
= f_scrollTop();
}
window.document.body.onscroll=SaveScrollLocation;
function f_scrollTop()
{
return f_filterResults
(
window.pageYOffset ? window.pageYOffset : 0,
document.documentElement ? document.documentElement.scrollTop : 0,
document.body ? document.body.scrollTop : 0);
}
function f_filterResults(n_win,
n_docel, n_body) {
var n_result
= n_win ? n_win : 0;
if (n_docel
&& (!n_result || (n_result > n_docel)))
n_result = n_docel;
return n_body
&& (!n_result || (n_result > n_body)) ? n_body : n_result;
}
</script>
The C# snippit placed in the Page OnInit function:
//
hidden field to store scroll location
Page.ClientScript.RegisterHiddenField("__SCROLLLOC", "0");
if (Page.IsPostBack)
{
string ctrlType
= Global.GetPostBackControlType(this);
if (ctrlType.Contains("DropDownList"))
{
//
Keep scroll at the country drop down list
SetScrollLocation();
}
}
The C# function to Set the Scroll Location:
privatevoid SetScrollLocation()
{
StringBuilder jsSB
= newStringBuilder();
jsSB.Append("<script
language='javascript'>");
jsSB.Append("function
SetScrollLocation () {");
jsSB.Append("
scroll(0," + Request["__SCROLLLOC"]
+ ");");
jsSB.Append("}");
jsSB.Append("window.document.body.onload=SetScrollLocation;");
jsSB.Append("</script>");
Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "setScroll",
jsSB.ToString());
}
While this implementation only acts on the DropDownList, you could easily extend it
to different controls or different dropdowns by returning the ID of the control causing
the postback.
