ASP.NET - MantainScrollPositionOnPostback su Chrome e altri browser

Ryan

10 anni fa

System.Web.HttpException (0x80004005): The application is configured to issue secure cookies - Cause e soluzioni del problema

Mantenere (o per meglio dire, ripristinare) la posizione della scrollbar della pagina in conseguenza di un postback è una funzionalità indispensabile per qualsiasi pagina contenente un form. Per anni in ASP.NET è stato possibile ottenere questo effetto aggiungendo un semplice parametro nella propria pagina/WebForm/MasterPage:

A livello di web.config: <pages maintainScrollPositionOnPostBack="true" />

A livello di pagina: <%@ Page MaintainScrollPositionOnPostback="true" %>

A livello di codice: Page.MaintainScrollPositionOnPostBack = true;

Sfortunatamente questi metodi, oltre a non essere disponibili con Razor, non sono più compatibili con la maggior parte dei browser recenti. Nonostante ASP.NET consenta ancora, tramite i Browser Definition File, la possibilità di impostare funzionalità specifiche per ciascuno di essi, è senz'altro preferibile adottare una soluzione pienamente compatibile con l'aiuto di un semplice script basato sul framework jQuery.

Questa è la soluzione specifica per WinForms:

<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>

<asp:HiddenField runat="server" ID="hfPosition" Value="" />

$(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>

Mentre questa è quella pensata per Razor (nonché per qualsiasi altra pagina web):

<input id="hfPosition" name="hfPosition value="" />
<script type="text/javascript">
    $(function () {
        var f = $("#hfPosition");
        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>