Ripristina posizione di scorrimento dopo il postback asincrono - ASP.NET

Question

Qual è il modo migliore per reimpostare la posizione di scorrimento verso la parte superiore della pagina dopo un postback asincrono?

Il postback asincrono viene avviato da una colonna CommandField di ASP.NET GridView e il metodo di aggiornamento del pannello di aggiornamento di ASP.NET viene chiamato in GridView OnRowCommand.

La mia applicazione corrente è un sito Web ASP.NET 3.5.

EDIT: ho ricevuto un ottimo riscontro da parte di tutti, e ho finito con il metodo PageRequestManager in un tag script, ma la mia domanda successiva è:

Come si configura per solo eseguire quando l'utente fa clic il campo di comando ASP.NET nel mio controllo GridView? Ho altri pulsanti sulla pagina che eseguono un postback asincrono che non voglio scorrere in cima alla pagina.

MODIFICA 1: Ho sviluppato una soluzione in cui non è necessario utilizzare PageRequestManager. Vedi la mia risposta di follow-up per la soluzione.

Answer 1

Ecco la soluzione seguente ho sviluppato sulla base di questo

<script language="javascript" type="text/javascript"> 
    function SetScrollEvent() { 
     window.scrollTo(0,0); 
    } 
</script> 

<asp:GridView id="MyGridView" runat="server" OnRowDataBound="MyGridView_OnRowDataBound"> 
    <Columns> 
     <asp:CommandField ButtonType="Link" ShowEditButton="true" /> 
    </Columns> 
</asp:GridView> 

ASP.NET codice Webform source

ASP.NET Webform dietro

protected void MyGridView_OnRowDataBound(object sender, GridViewRowEventArgs e) 
{ 
    if(e.Row.RowType.Equals(DataControlRowType.DataRow)) 
    { 
     foreach (DataControlFieldCell cell in e.Row.Cells) 
     { 
      foreach(Control control in cell.Controls) 
      { 
       LinkButton lb = control as LinkButton; 

       if (lb != null && lb.CommandName == "Edit") 
        lb.Attributes.Add("onclick", "SetScrollEvent();"); 
      } 
     } 
    } 
} 

Answer 2

Hai impostato la proprietà della pagina MaintainScrollPosition? Non sono sicuro se questo sarebbe diverso se si esegue un postback asincrono o no.

Modifica: una cosa che si può tentare è di mettere a fuoco un particolare oggetto vicino alla parte superiore della pagina, che può essere di aiuto e un lavoro sporco.

Answer 3

Come stai usando UpdatePanels si sta andando ad avere bisogno di agganciare in ASP.NET AJAX PageRequestManager

Avrai bisogno di aggiungere un metodo per le endRequest ganci di eventi che sono:

Sollevato dopo il completamento di un postback asincrono e il controllo è stato restituito al browser.

questo modo ci sono qualcosa come:

<script type="text/javascript"> 
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(pageLoaded); 

    function pageLoaded(sender, args) { 
    window.scrollTo(0,0); 
    } 
</script> 

che costringerà il browser per scorrere di nuovo alla parte superiore della pagina una volta una richiesta di aggiornamento è stata completata.

Ci sono altri eventi è possibile collegare in, invece, naturalmente:

beginRequest // Raised before the request is sent 
initializeRequest // Raised as the request is initialised (good for cancelling) 
pageLoaded // Raised once the request has returned, and content is loaded 
pageLoading // Raised once the request has returned, and before content is loaded 

La bellezza di asincroni post-spalle è che la pagina sarà mantenere l'altezza di scorrimento senza dover impostare MaintainScrollPosition, in quanto non v'è alcuna "full page reload" sta accadendo, in questo caso in realtà vuoi che quell'effetto avvenga, quindi dovrai crearlo manualmente.

Modifica per rispondere alla domanda aggiornato

Ok, quindi se avete bisogno di ripristinare solo la postion su alcuni pressione dei pulsanti avrete bisogno di fare qualcosa di simile:

Inizio agganciando nella BeginRequest invece/e:

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); 

Questo perché nel parametro args è possibile accedere a:

012.

args.get_postBackElement().id 

che vi dirà l'id del pulsante che ha avviato l'intero evento - si può allora o controllare il valore qui, e spostare la pagina, o conservare in una variabile, ed eseguire una query nella richiesta end - essere a conoscenza delle condizioni di gara, ecc. dove l'utente fa clic su un altro pulsante prima del completamento dell'aggiornamento originale.

Questo dovrebbe farti andare con tutta la fortuna - ci sono un bel paio di esempi in tutto questo su Working with PageRequestManager Events

Answer 4

Si sta utilizzando AJAX asp.net? In tal caso ci sono due eventi molto utili nelle librerie client beginRequest e endRequest, uno dei problemi con i postbacks parziali/asincroni, è che la pagina generale non ha idea di cosa si sta facendo. gli eventi di inizio e fine richiesta ti permetteranno di mantenere la posizione di scorrimento sul client, potresti avere una var in js che è impostata sulla posizione di scorrimento su beginrequest, quindi alla richiesta di fine puoi reimpostare qualsiasi scrollTop di cui hai bisogno. certo che ho visto questo fatto prima, ma non riesco a trovare un collegamento. ill post, se trovo un esempio

Answer 5

Io uso un Input nascosto chiamato hScrollTop che ho impostato prima che il modulo asp.net venga posticipato. Quindi, quando la pagina viene caricata, imposta la scrollTop in base al valore dell'input nascosto.

Prova questo codice in una nuova pagina.

<div style="height:500px"></div> 

<form id="Form1" runat=server onsubmit="javascript:saveScrollTop();"> 
    <input type=submit value="Submit" runat=server> 
    <input type="hidden" id="hScrollTop" runat=server> 
</form> 

<div style="height:1000px"></div> 

<script language="javascript"> 
    function saveScrollTop() { 
     document.getElementById("<%= hScrollTop.ClientID %>").value = document.body.scrollTop; 
     return true; 
    } 

    window.onload = function() { 
     document.body.scrollTop = document.getElementById("<%= hScrollTop.ClientID %>").value; 
    } 

</script> 

Answer 6

tratte da questo tutorial:

http://aspnet.4guysfromrolla.com/articles/111407-1.aspx

Abbiamo impostato MaintainScrollPositionOnPostback = true

Poi, se abbiamo bisogno di resettare posizione di scorrimento chiamare il metodo:

Private Sub ResetScrollPosition() 
If Not ClientScript.IsClientScriptBlockRegistered(Me.GetType(), "CreateResetScrollPosition") Then 
    'Create the ResetScrollPosition() function 
    ClientScript.RegisterClientScriptBlock(Me.GetType(), "CreateResetScrollPosition", _ 
        "function ResetScrollPosition() {" & vbCrLf & _ 
        " var scrollX = document.getElementById('__SCROLLPOSITIONX');" & vbCrLf & _ 
        " var scrollY = document.getElementById('__SCROLLPOSITIONY');" & vbCrLf & _ 
        " if (scrollX && scrollY) {" & vbCrLf & _ 
        " scrollX.value = 0;" & vbCrLf & _ 
        " scrollY.value = 0;" & vbCrLf & _ 
        " }" & vbCrLf & _ 
        "}", True) 

    'Add the call to the ResetScrollPosition() function 
    ClientScript.RegisterStartupScript(Me.GetType(), "CallResetScrollPosition", "ResetScrollPosition();", True) 
End If 
End Sub 

Answer 7

Qui è la soluzione perfetta per ripristinare la posizione della barra di scorrimento su TOP in AJAX

codice lato client

function ResetScrollPosition() 
{ 
    setTimeout("window.scrollTo(0,0)", 0); 
} 

codice lato server

ScriptManager.RegisterStartupScript(Page, this.GetType(), "ScrollPage", "ResetScrollPosition();", true); 

Solo, window.scrollTo (0,0) non funzionerà. Ajax avrà la precedenza in questo caso quindi devi usare la funzione setTimeout con quella.

Answer 8

Page.RegisterStartupScript("MyScript", "<script language=javascript>setTimeout('window.scrollTo(0,0)', 0);</script>"); 

Mettere il precedente per la funzione che si vuole dire di andare al all'inizio della pagina. Come quando la pagina non è valida, è lì e aggiungerà un javascript temporaneo per spararti in cima alla pagina.