PranasLu's Blog

2010-01-28

Maintain browser scroll position across postbacks in ASP.NET

Filed under: Programming — Tags: , , , — pranaslu @ 19:54

Paskirtis

Vaikštant per puslapius, grįžtant į ankstesnį puslapį arba persikrovus tam pačiam puslapiui išlaikoma ta pati lango scroll pozicija. Aktualu didelėse formose, kur reikia scroll’inti.

JS kodas “/Javascript/Script.js”:

var __formID = ""; // ASP.NET Form ClientID Holder

function SmartNavigation_GetScrollerCoords()
{
    var scrollX, scrollY;

    if (document.all)
    {
        if (!document.documentElement.scrollLeft)
            scrollX = document.body.scrollLeft;
        else
            scrollX = document.documentElement.scrollLeft;
           
        if (!document.documentElement.scrollTop)
            scrollY = document.body.scrollTop;
        else
            scrollY = document.documentElement.scrollTop;
    }   
    else
    {
        scrollX = window.pageXOffset;
        scrollY = window.pageYOffset;
    }

    document.forms[__formID].xScrollCoordHolder.value = scrollX;
    document.forms[__formID].yScrollCoordHolder.value = scrollY;
}

function SmartNavigation_Scroll()
{
    var x = document.forms[__formID].xScrollCoordHolder.value;
    var y = document.forms[__formID].yScrollCoordHolder.value;
    window.scrollTo(x, y);
}

 

C# ViewData kodas

    public class ViewData
    {
        // Fields to hold browser page scroll position
        public string xScrollCoord = "0";
        public string yScrollCoord = "0";
        
        ...
    }

C# PageBase<T> kodas

 

    public class PageBase<T> : PageBase where T : ViewData
    {
        protected override void OnPreInit(EventArgs e)
        {
            ...

            // Persist page scroll position
            if (IsPostBack)
            {
                _viewData.xScrollCoord = Request["xScrollCoordHolder"];
                _viewData.yScrollCoord = Request["yScrollCoordHolder"];
            }

            base.OnPreInit(e);
        }

        protected override void OnLoadComplete(EventArgs e)
        {
            // logic to maintain scroll position across postbacks
            if (!IsPostBack)
            {
                ClientScript.RegisterHiddenField("xScrollCoordHolder", _viewData.xScrollCoord);
                ClientScript.RegisterHiddenField("yScrollCoordHolder", _viewData.yScrollCoord);
                ClientScript.RegisterStartupScript(this.GetType(), "__formID", "__formID='{0}';".FormatWith(Form.ClientID), true);
                ClientScript.RegisterStartupScript(this.GetType(), "SmartNavigation_Scroll", "SmartNavigation_Scroll();", true);
                ClientScript.RegisterOnSubmitStatement(this.GetType(), "SmartNavigation_GetScrollerCoords", "SmartNavigation_GetScrollerCoords();");
            }
            base.OnLoadComplete(e);
        }

        ...
    }

Kita

Pridėtas FormatWith metodas Nrd.Framework.Common.Extenders.String klasėje:

    /// <summary>
    /// string.Format(source, args) in fluent language syntax => source.FormatWith(args)
    /// </summary>
    /// <param name="source"></param>
    /// <param name="args"></param>
    /// <returns></returns>
    public static string FormatWith(this string source, params object[] args)
    {
        return string.Format(source, args);
    }

PageBase<T> klasėje pridėti:

    using Nrd.Framework.Common.Extenders;

Error.aspx.cs klasėje pridėtas kodas:

    public partial class Error : PageBase<ErrorData>
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Page.ClientScript.RegisterClientScriptInclude("MooTools", "/JavaScript/mootools-1.2.2-core.js");
            Page.ClientScript.RegisterClientScriptInclude("JQuery", "/JavaScript/jquery-1.3.1.js");
            Page.ClientScript.RegisterClientScriptInclude("MyScript", "/JavaScript/Script.js");

            ...
        }

        ...
    }

nes Error.aspx.cs klasė paveldi iš PageBase<T>, vadinasi irgi naudoja JS funkcijas, kurios aprašytos /Javascript/Script.js faile, kurios skirtos puslapio scroll pozicijai išlaikyti.

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: