Cómo mantener la página de posición de desplazamiento después de una devolución de datos en asp.net página

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> 

no funciona, dónde voy mal

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

que estoy tratando de hacer que la estancia en la página la misma posición cuando la página se actualiza después de cada 5 segundos y la página va hacia arriba. Intenté la página MaintainScrollPositionOnPostback = "true". No funcionó, intenté usar Ajax pero no tengo idea de cómo usarlo. ¿Alguien puede ayudarme a cómo hacerlo con Ajax?

Answer 1

El MaintainScrollPositionOnPostback solo funciona en IE. Para hacer esto, puede desplegar su propio script de cliente o usar enlaces de anclaje en diferentes secciones de su página/formulario.

preguntas similares aquí:

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 solución barata para lo que suena como la interfaz de usuario horrible (página se actualiza cada 5 segundos) sería añadir '#' y la identificación del elemento que desea mantener a la vista de la URL en la barra de direcciones, pero que se desplazará automáticamente a la parte superior del elemento vinculado a ID.

Si se trata de un producto comercial y tiene prisa, le recomiendo que consulte la implementación de Ajax de JQuery y suspenda esas recargas por completo.

Puede ser tan simple como una línea como:

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

Si eso parece extraño a usted, es sólo un objeto literal que se alimentan a la jQuery método de objetos de ajax. La función asignada al 'completo' se dispara cuando se recibe la respuesta http que se alimenta a la función como el argumento 'datos' que se establece en el interior del método .ajax.

Answer 3

UpdatePanels son horribles desde el punto de vista del rendimiento. Haría esto con jquery y evitaría las devoluciones por completo.

$.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); 
    } 

}); 

Si esto es una opción, configurar la url para leer desde la base de este tutorial:

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

Si no desea utilizar jQuery, todavía se puede usar MS AJAX , omita esos paneles de actualización. http://www.geekzilla.co.uk/View7B75C93E-C8C9-4576-972B-2C3138DFC671.htm

Answer 4

<%@ Page MaintainScrollPositionOnPostback="true" %> como la declaración plage mantendrá la posición de desplazamiento, ya que es

Answer 5

Pruebe el siguiente código en su diseño page..It funciona bien para mí ..

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

Answer 6

<pages maintainScrollPositionOnPostBack="true"> 

Answer 7

Try esto en el código detrás:

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

Posdata: Lo intenté 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>

Usted puede usar esto para mantener la posición de desplazamiento después de la devolución de datos.

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

Answer 9

para otra persona que lucha con esto. La solución más fácil es mantener la ubicación de desplazamiento de toda la ventana

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(); 

    }); 

Solicitud de inicio y finalización del anuncio. Al comenzar la solicitud, obtenga la posición de desplazamiento de Windows usando Jquery. Al final de la solicitud simplemente desplácese a esa ubicación.

Answer 10

Añadir esta línea

<%@ Page MaintainScrollPositionOnPostback="true" %> 

Answer 11

Hay respuestas por toda la red a este problema, y ​​personalmente ninguno de ellos trabajaron, en cuanto a mí Firefox podría intentar recuperar la posición de desplazamiento anterior (erróneamente), dispare la window.scroll evento, que sobrescribiría mi campo oculto con su posición incorrecta, que mi scrollTo leería. (Tengo gridviews provenientes de las devoluciones de datos seguidas por colapso automático de algunas filas.)

Así que aquí hay otra solución a este problema: decidí que solo quería recuperar la posición de desplazamiento después de un envío, no una actualización, así que esto era adecuada:

ASPX página:

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

Por alguna razón, en la actualización del navegador, mi entrada oculta no se restablece a cero, por lo que a veces se comporta de manera extraña. Me encantaría saber qué está haciendo esto, creo que es Firefox, ya que no ocurre en IE, pero la vida es demasiado corta [dice ... habiendo descargado la mitad de Internet y dedicado horas a esto ...].