Come mantenere la posizione di scorrimento pagina dopo una pagina di postback in asp.net

Question

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server"> 
    <meta http-equiv="refresh" content="4" /> 
<script type="text/javascript"> 

    var xPos1, yPos1; 

    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_pageLoading(pageLoadingHandler); 
    prm.add_pageLoaded(pageLoaded); 
    function pageLoaded(sender, args) { 

     $get('<%=Panel_Users.ClientID %>').scrollLeft = xPos1; 
     $get('<%=Panel_Users.ClientID %>').scrollTop = yPos1; 
    } 
    function pageLoadingHandler(sender, args) { 
     xPos1 = $get('<%=Panel_Users.ClientID %>').scrollLeft 
     yPos1 = $get('<%=Panel_Users.ClientID %>').scrollTop; 
    } 
    </script> 
</asp:Content> 

non funziona, dove sto andando male

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />  

<div style="height: 504px; width: 941px;"> 
       <asp:Panel runat="server" ID="Panel_Users" ScrollBars="Auto" Style="z-index: 1; left: 748px; 
        top: 621px; position: absolute; height: 250px; width: 287px"> 
        <asp:UpdatePanel UpdateMode="Conditional" ID="UpdatePanel1" runat="server"> 
         <ContentTemplate> 
          <asp:GridView ID="Grid_UserTable" runat="server" Style="z-index: 1; left: 2px; top: 5px; 
           position: absolute; height: 152px; width: 243px" BorderColor="#666666" AutoGenerateColumns="False" 
           OnRowDataBound="MyGrid_RowDataBound"> 
           <Columns> 
            <asp:TemplateField HeaderText="Status"> 
             <ItemTemplate> 
              <asp:Image ID="Status" runat="server" /> 
             </ItemTemplate> 
            </asp:TemplateField> 
            <asp:BoundField DataField="TimeReceived" HeaderText="TimeReceived" InsertVisible="False" 
             ReadOnly="True" SortExpression="TimeReceived" /> 
            <asp:BoundField DataField="TimeRead" HeaderText="TimeRead" SortExpression="TimeRead" /> 
            <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" /> 
           </Columns> 
          </asp:GridView> 
         </ContentTemplate> 
        </asp:UpdatePanel> 
       </asp:Panel> 
      </div> 

Sto cercando di rendere il soggiorno pagina alla la stessa posizione quando la pagina si aggiorna dopo ogni 5 secondi e la pagina va in cima. Ho provato Page MaintainScrollPositionOnPostback = "true". Non ha funzionato, ho provato ad usare Ajax ma non ho idea di come usarlo. Qualcuno può aiutarmi a farlo con Ajax.

Answer 1

MaintainScrollPositionOnPostback funziona solo in IE. Per fare ciò è possibile eseguire il rollover del proprio script client o utilizzare i link di ancoraggio in diverse sezioni della pagina/modulo.

domande simili qui:

MaintainScrollPositionOnPostback is not working - how to debug?

MaintainScrollPositionOnPostback not working with javascript:__doPostBack

maintainScrollPositionOnPostback="true" does not work globally after setting in web.config ,but works in page level,what should I do?

Answer 2

Una correzione a buon mercato per quello che suona come terribile interfaccia utente (pagina viene aggiornata ogni 5 secondi) sarebbero da aggiungere '#' e l'id dell'elemento che vuoi mantenere in vista dell'URL nella barra degli indirizzi, ma che scorrerà automaticamente verso l'alto dell'elemento collegato all'ID.

Se questo è un prodotto commerciale e siete di fretta mi consiglia di verificare l'implementazione di ajax JQuery e busso fuori quelle ricariche del tutto.

Può essere semplice come una linea come:

$.ajax(
    { 
     url:"/thisPath/requestPath", 
     complete:function(data){ 
     //apply data (the http-response) to HTML 
    } 
); 

Se questo sembra bizzarro a te, è solo un oggetto letterale di essere alimentata al JQuery oggetti metodo di AJAX. La funzione assegnata al "completo" si attiva quando viene ricevuta la risposta http che viene alimentata alla funzione come argomento "dati" che è stabilito all'interno del metodo .ajax.

Answer 3

UpdatePanels sono orribili dal punto di vista delle prestazioni. Lo farei con jquery ed eviterei completamente i postback.

$.ajax({ 
    url: "/path/to/url/that/returns/users", 
    type: "POST", 
    dataType: "json", 
    data: {}, 
    success: function(data, status, xhttp) 
    { 
     var html = "<table>"; 
     for (var i = 0; i < data.length; i++) 
     { 
      html += "<tr>"; 
      html += "<td></td>"; // build up table cells 
      html += "</tr>"; 
     } 
     html += "</table>"; 
     $("#NameOfDivToPutTableIn").html(html); 
    } 

}); 

Se questa è un'opzione, impostare l'URL di leggere da base a questo tutorial:

http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Se non si desidera utilizzare jQuery, è comunque possibile utilizzare MS AJAX , salta semplicemente i pannelli di aggiornamento. http://www.geekzilla.co.uk/View7B75C93E-C8C9-4576-972B-2C3138DFC671.htm

Answer 4

<%@ Page MaintainScrollPositionOnPostback="true" %> come la dichiarazione plage manterrà la posizione di scorrimento in quanto è

Answer 5

Prova il seguente codice sul vostro disegno page..It funziona bene per me ..

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="frmName.aspx.vb" Inherits="frmName" MaintainScrollPositionOnPostBack = "true" %> 

Answer 6

<pages maintainScrollPositionOnPostBack="true"> 

Answer 7

Try questo nel codice sottostante:

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (Page.IsPostBack) 
    { 
     Page.MaintainScrollPositionOnPostBack = true; 
    } 
} 

Posdata: l'ho provato con C#.

Answer 8

@{ 
 
    
 
} 
 

 
<html> 
 

 
<head> 
 
<script type="text/javascript"> 
 

 
window.onload = function() { 
 
    var div = document.getElementById("dvScroll"); 
 
    var div_position = document.getElementById("div_position"); 
 
    var position = parseInt(@Request.Form("div_position")); 
 
    if (isNaN(position)) { 
 
     position = 0; 
 
    } 
 

 
    div.scrollTop = position; 
 
    div.onscroll = function() { 
 
     div_position.value = div.scrollTop; 
 
    }; 
 
}; 
 

 
</script> 
 
</head> 
 

 
<body> 
 

 
<div id="dvScroll" style="overflow-y: scroll; height: 260px; width: 300px"> 
 
    1. This is a sample text 
 
    <br /> 
 
    2. This is a sample text 
 
    <br /> 
 
    3. This is a sample text 
 
    <br /> 
 
    4. This is a sample text 
 
    <br /> 
 
    5. This is a sample text 
 
    <br /> 
 
    6. This is a sample text 
 
    <br /> 
 
    7. This is a sample text 
 
    <br /> 
 
    8. This is a sample text 
 
    <br /> 
 
    9. This is a sample text 
 
    <br /> 
 
    10. This is a sample text 
 
    <br /> 
 
    11. This is a sample text 
 
    <br /> 
 
    12. This is a sample text 
 
    <br /> 
 
    13. This is a sample text 
 
    <br /> 
 
    14. This is a sample text 
 
    <br /> 
 
    15. This is a sample text 
 
    <br /> 
 
    16. This is a sample text 
 
    <br /> 
 
    17. This is a sample text 
 
    <br /> 
 
    18. This is a sample text 
 
    <br /> 
 
    19. This is a sample text 
 
    <br /> 
 
    20. This is a sample text 
 
    <br /> 
 
    21. This is a sample text 
 
    <br /> 
 
    22. This is a sample text 
 
    <br /> 
 
    23. This is a sample text 
 
    <br /> 
 
    24. This is a sample text 
 
    <br /> 
 
    25. This is a sample text 
 
    <br /> 
 
</div> 
 

 
<hr /> 
 
<form method="post"> 
 
<input type="hidden" id="div_position" name="div_position" /> 
 
<input type="submit" value="Cool" /> 
 
</form> 
 
</body> 
 
</html>

È possibile utilizzare questo per mantenere la posizione di scorrimento dopo il postback.

Fonte: http://www.aspsnippets.com/Articles/Maintain-Scroll-Position-of-DIV-on-PostBack-in-ASPNet.aspx

Answer 9

Per qualcun altro alle prese con questo. La soluzione più semplice è quella di mantenere la posizione di scorrimento dell'intera finestra

var xPos, yPos; 

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (evt, args) { 
     window.scrollTo(xPos , yPos); 
    }); 


    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function (evt, args) { 
     xPos = $(window).scrollLeft(); 
     yPos = $(window).scrollTop(); 

    }); 

Annuncio sia di inizio che di fine richiesta. Alla richiesta di inizio ottieni la posizione di scorrimento di Windows usando Jquery. Alla richiesta di fine basta scorrere fino a quella posizione.

Answer 10

Aggiungere questa linea

<%@ Page MaintainScrollPositionOnPostback="true" %> 

Answer 11

Ci sono risposte in tutta la rete a questo problema, e personalmente nessuno di loro ha lavorato, per quanto mi riguarda Firefox avrebbe tentato di recuperare la posizione di scorrimento precedente (a torto), attivare il Evento window.scroll, che sovrascriverebbe il mio campo nascosto con la sua posizione errata, che il mio scrollTo avrebbe poi letto. (Ho delle visualizzazioni di griglia provenienti dai postback seguito da un collasso automatico di alcune righe.)

Quindi, ecco un'altra soluzione a questo problema: ho deciso di ripristinare la posizione di scorrimento solo dopo un invio, non un aggiornamento, quindi questo era adeguata:

ASPX pagina:

<form runat="server" onsubmit="$('#hfScroll').val($(window).scrollTop()); return true;"> 
    <input type="hidden" id="hfScroll" value="0" /> 

Javascript:

function restoreScroll() 
{ 
    var position = parseInt($('#hfScroll').val()); 
    if (!isNaN(position)) { 
     $(document).scrollTop(position); 
    } 
}; 
var prm = Sys.WebForms.PageRequestManager.getInstance(); 
prm.add_pageLoaded(restoreScroll); 

Per qualche motivo, durante l'aggiornamento del browser il mio input nascosto non viene reimpostato a zero, quindi a volte si comporta in modo strano. Mi piacerebbe sapere cosa sta facendo questo, penso che sia Firefox perché non succede su IE, ma la vita è troppo breve [dice ... avendo scaricato metà di internet e passato ore in questo ..].