MaintainScrollPositionOnPostback en ASP WebForms

Muchas veces nos habremos visto en la necesidad de volver a un punto de la página después de hacer un postback para que el usuario no tuviera que utilizar el scroll lateral.

Normalmente yo suelo utilizar un focus() en javascript si se trata de un formulario y lo añado con ClientScript.RegisterClientScriptBlock.

No obstante, puede optimizarse más, y para eso viene en nuestra ayuda el atributo MaintainScrollPositionOnPostback que podemos añadir a la directiva Page de nuestro html.

 <%@ Page MaintainScrollPositionOnPostback="true" %>

Esto hará que se guarde la posición exacta en píxeles en unos hidden y se restaurará automáticamente mediante javascript. Con esto .NET genera lo siguiente en el HTML:

<input type="hidden" name="__SCROLLPOSITIONX" id="__SCROLLPOSITIONX" value="0" /> 
<input type="hidden" name="__SCROLLPOSITIONY" id="__SCROLLPOSITIONY" value="257" /> 

Y como script aproximadamente esto:


theForm.oldSubmit = theForm.submit; 
theForm.submit = WebForm_SaveScrollPositionSubmit; 
theForm.oldOnSubmit = theForm.onsubmit; 
theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit;
theForm.oldOnLoad = window.onload; 
window.onload = WebForm_RestoreScrollPosition;

Si queréis alternar el comportamiento de la página para que a veces lo haga y otras no, en vez de desactivar este comportamiento, Scott Mitchell nos explica como: http://aspnet.4guysfromrolla.com/articles/111407-1.aspx

Algunos usuarios reportan que MaintainScrollPositionOnPostback no funciona en Chrome / Firefox

Se ha reportado que esta propiedad no funciona en dichos navegadores, este defecto no lo he apreciado.

Pero para aquellos que os topéis con este problema, podemos implementar nosotros mismos la solución válida que deja un usuario de stackoverflow.com

<asp:HiddenField runat="server" ID="hfPosition" Value="" />
<script type="text/javascript">
    $(function () {
        var f = $("#<%=hfPosition.ClientID%>");
        window.onload = function () {
            var position = parseInt(f.val());
            if (!isNaN(position)) {
                $(window).scrollTop(position);
            }
        };
        window.onscroll = function () {
            var position = $(window).scrollTop();
            f.val(position);
        };
    });
</script>
Escrito el 11 ene 2009
comments powered by Disqus

« DropDownList y AppendDataBoundItems - App_offline.htm mientras estás actualizando »