ASP.Net Scroll on Post Back

Mon, 26 Mar 2007 16:57:39 GMT

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:

    public static string 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:

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:

    private void SetScrollLocation()
    {
        StringBuilder jsSB = new StringBuilder();

        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.

The Moon Upstairs - Javascript

ASP.Net Scroll on Post Back