ASP.Net Scroll on Post Back

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.aspgot 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.htmlthat would find the x or y scroll position, 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:

<pre class="code"><span style="color:blue;">public static string </span>GetPostBackControlType(System.Web.UI.<span style="color:#2b91af;">Page </span>page)
{
    <span style="color:blue;">string </span>objectType = <span style="color:blue;">string</span>.Empty;
    <span style="color:#2b91af;">Control </span>control = <span style="color:blue;">null</span>;
    <span style="color:blue;">string </span>ctrlname = page.Request.Params[<span style="color:#a31515;">"__EVENTTARGET"</span>];

    <span style="color:blue;">if </span>(ctrlname != <span style="color:blue;">null </span>&amp;&amp; ctrlname != <span style="color:#2b91af;">String</span>.Empty)
    {
        control = page.FindControl(ctrlname);
    }
    <span style="color:green;">// if __EVENTTARGET is null, the control is a button type and we need to // iterate over the form collection to find it </span><span style="color:blue;">else </span>{
        <span style="color:blue;">string </span>ctrlStr = <span style="color:#2b91af;">String</span>.Empty;
        <span style="color:#2b91af;">Control </span>c = <span style="color:blue;">null</span>;

        <span style="color:blue;">foreach </span>(<span style="color:blue;">string </span>ctl <span style="color:blue;">in </span>page.Request.Form)
        {
            <span style="color:green;">// handle ImageButton controls ... </span><span style="color:blue;">if </span>(ctl.EndsWith(<span style="color:#a31515;">".x"</span>) || ctl.EndsWith(<span style="color:#a31515;">".y"</span>))
            {
                ctrlStr = ctl.Substring(0, ctl.Length - 2);
                c = page.FindControl(ctrlStr);
            }
            <span style="color:blue;">else </span>{
                c = page.FindControl(ctl);
            }
            <span style="color:blue;">if </span>(c <span style="color:blue;">is </span>System.Web.UI.WebControls.<span style="color:#2b91af;">Button </span>||
               c <span style="color:blue;">is </span>System.Web.UI.WebControls.<span style="color:#2b91af;">ImageButton</span>)
            {
                control = c;
                <span style="color:blue;">break</span>;
            }
        }
    }

    <span style="color:blue;">if </span>(control != <span style="color:blue;">null</span>)
    {
        objectType = control.GetType().ToString();
    }

    <span style="color:blue;">return </span>objectType;

}</pre>

The JavaScript placed in the body of the aspx page:

<pre class="code"><span style="color:blue;">&lt;</span><span style="color:maroon;">script </span><span style="color:red;">type</span><span style="color:blue;">="text/javascript" </span><span style="color:red;">language</span><span style="color:blue;">="javascript"&gt; function </span>SaveScrollLocation() {
        <span style="color:#006400;">//trace('Scroll Top = ' + f_scrollTop()); </span>window.document.forms[0].__SCROLLLOC.value = f_scrollTop();
    }
    window.document.body.onscroll = SaveScrollLocation;

    <span style="color:blue;">function </span>f_scrollTop() {
        <span style="color:blue;">return </span>f_filterResults(
                window.pageYOffset ? window.pageYOffset : 0,
                document.documentElement ? document.documentElement.scrollTop : 0,
                document.body ? document.body.scrollTop : 0);
    }

    <span style="color:blue;">function </span>f_filterResults(n_win, n_docel, n_body) {
        <span style="color:blue;">var </span>n_result = n_win ? n_win : 0;
        <span style="color:blue;">if </span>(n_docel &amp;&amp; (!n_result || (n_result &gt; n_docel)))
            n_result = n_docel;
        <span style="color:blue;">return </span>n_body &amp;&amp; (!n_result || (n_result &gt; n_body)) ? n_body : n_result;
    }
    <span style="color:blue;">&lt;/</span><span style="color:maroon;">script</span><span style="color:blue;">&gt; </span></pre>
**The C# snippit placed in the Page OnInit function:**
<pre class="code"><span style="color:green;">// hidden field to store scroll location </span><span style="color:#2b91af;">Page</span>.ClientScript.RegisterHiddenField(<span style="color:#a31515;">"__SCROLLLOC"</span>, <span style="color:#a31515;">"0"</span>);

<span style="color:blue;">if </span>(<span style="color:#2b91af;">Page</span>.IsPostBack)
{
    <span style="color:blue;">string </span>ctrlType = <span style="color:#2b91af;">Global</span>.GetPostBackControlType(<span style="color:blue;">this</span>);

    <span style="color:blue;">if </span>(ctrlType.Contains(<span style="color:#a31515;">"DropDownList"</span>))
    {
        <span style="color:green;">// Keep scroll at the country drop down list </span>SetScrollLocation();
    }
}</pre>

The C# function to Set the Scroll Location:

<pre class="code"><span style="color:blue;">private void </span>SetScrollLocation()
{
    <span style="color:#2b91af;">StringBuilder </span>jsSB = <span style="color:blue;">new </span><span style="color:#2b91af;">StringBuilder</span>();

    jsSB.Append(<span style="color:#a31515;">"&lt;script language='javascript'&gt;"</span>);
    jsSB.Append(<span style="color:#a31515;">"function SetScrollLocation () {"</span>);
    jsSB.Append(<span style="color:#a31515;">" scroll(0," </span>+ Request[<span style="color:#a31515;">"__SCROLLLOC"</span>] + <span style="color:#a31515;">");"</span>);
    jsSB.Append(<span style="color:#a31515;">"}"</span>);
    jsSB.Append(<span style="color:#a31515;">"window.document.body.onload=SetScrollLocation;"</span>);
    jsSB.Append(<span style="color:#a31515;">"&lt;/script&gt;"</span>);

    Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), <span style="color:#a31515;">"setScroll"</span>, jsSB.ToString());

}</pre>

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.