Restablecer la posición de desplazamiento después de la devolución de datos de Async - ASP.NET

Question

¿Cuál es la mejor manera de restablecer la posición de desplazamiento en la parte superior de la página después de una devolución de datos asincrónica?

La devolución de datos asincrónica se inicia desde una columna de ASP.NET GridView CommandField y el método de actualización del panel de actualización de ASP.NET se llama en el GridView OnRowCommand.

Mi aplicación actual es un sitio web ASP.NET 3.5.

EDIT: he recibido excelentes comentarios de todos, y que terminó con el método PageRequestManager en una etiqueta de script, pero mi siguiente pregunta es:

¿Cómo se configura que sólo se ejecutan cuando el usuario hace clic el ASP.NET CommandField en mi control GridView? Tengo otros botones en la página que realizan una devolución de datos asincrónica que no quiero desplazar a la parte superior de la página.

EDIT 1: He desarrollado una solución donde no necesito usar PageRequestManager. Ver mi respuesta de seguimiento para la solución.

Answer 1

Aquí está la solución después de lo desarrollado en base a este

<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 código de formulario web source

ASP.NET Webform detrás

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

¿Ha establecido la propiedad de la página MaintainScrollPosition? No estoy seguro si eso sería diferente si haces una devolución de datos Async o no.

Editar: Una cosa que podría intentar es centrarse en un elemento en particular cerca de la parte superior de la página, que puede ayudar y ser un trabajo sucio.

Answer 3

Como estás usando UpdatePanels que vas a necesitar para enganchar en el ASP.NET AJAX PageRequestManager

Usted tendrá que añadir un método a los endRequest ganchos de eventos que son:

Se genera después de que se completa una devolución de datos asincrónica y se devuelve el control al navegador.

Por lo que tendría algo como:

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

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

lo que obligará a que el navegador para desplazarse de nuevo a la parte superior de la página una vez una solicitud de actualización se ha completado.

Hay otros eventos que podría colgados en lugar de curso:

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 belleza de post-espaldas asíncronos es que la página va a mantener la altura de desplazamiento sin que tenga que establecer MaintainScrollPosition, ya que no hay la "recarga de página completa" está sucediendo, en este caso, realmente desea que ocurra ese efecto, por lo que tendrá que crearlo manualmente.

Editar para responder a la pregunta actualizado

Ok, así que si sólo se necesita para restablecer el Postion en ciertas pulsaciones de botón que tendrá que hacer algo como esto:

inicio enganchando en el lugar BeginRequest/así:

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

Esto es debido a que en los argumentos parámetro que consigue el acceso a:

args.get_postBackElement().id 

Lo que le dirá la identificación del botón que inició el evento completo - puede verificar el valor aquí, y mover la página, o almacenarla en una variable, y consultarla en la solicitud final - conocer las condiciones de carrera, etc. donde el usuario hace clic en otro botón antes de que se complete la actualización original.

Eso debe conseguir que ir con un poco de suerte - hay un buen número de ejemplos de todo esto en Working with PageRequestManager Events

Answer 4

¿Está utilizando AJAX asp.net? Si es así, hay dos eventos muy útiles en las bibliotecas del cliente beginRequest y endRequest, uno de los problemas con las devoluciones de datos parciales/asincrónicas es que la página general no tiene ni idea de lo que está haciendo. los eventos de inicio y finalización le permitirán mantener la posición de desplazamiento en el cliente, podría tener una var en js que esté configurada en la posición de desplazamiento en beginrequest, y luego en la solicitud final podrá restablecer el scrollTop de cualquier elemento que necesite ... estoy Seguro que he visto esto hecho antes, pero no puedo encontrar un enlace. mal puesto si encuentro un ejemplo

Answer 5

Utilizo una entrada oculta llamada hScrollTop que configuro antes de que se publique el formulario asp.net. Luego, cuando la página se carga, establece el scrollTop de acuerdo con el valor de la entrada oculta.

Pruebe este código en una página nueva.

<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

tomado de este tutorial:

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

Nos set MaintainScrollPositionOnPostback = true

Entonces, si tenemos que restablecer la posición de desplazamiento llamar al método:

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

Aquí es la solución perfecta para reiniciar la posición de la barra de desplazamiento en TOP en AJAX

Código del lado del cliente Código lateral

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

servidor

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

Sólo, window.scrollTo (0,0) no funcionará. Ajax tendrá prioridad en este caso, por lo que debe usar la función setTimeout con eso.

Answer 8

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

Poner lo anterior a la función que usted quiere decir que ir a la parte superior de la página. Como cuando la página no es válida, póngala allí y agregará javascript temporal para enviarlo a la parte superior de la página.