Mantener la posición de desplazamiento en cuadros de lista en paneles de actualización, NO la página

Question

Tengo un cuadro de lista dentro de un panel de actualización. Cuando me desplazo hacia abajo y selecciono un elemento, se desplaza de vuelta a la parte superior del cuadro de lista. Escuché que el dom no hace un seguimiento de la posición de desplazamiento en una devolución de datos. ¿Alguien tiene una solución/ejemplo sobre cómo resolver esto?

Gracias, XaiSoft

Answer 1

que se está ejecutando en este problema debido a que el UpdatePanel reemplaza completamente a su <select> elemento desplazado por una nueva cuando la solicitud asincrónica regresa.

soluciones posibles:

1. Use JavaScript para almacenar la propiedad scrollTop del elemento <select> en un elemento de forma oculta antes de enviar el UpdatePanel (llamando al método ClientScriptManager.RegisterOnSubmitStatement) y luego colocarlo en el nuevo <select> cuando vuelve la llamada AJAX. Esto será tedioso, propenso a errores y probablemente no muy compatible (ver here).

2. Utilice JavaScript para almacenar la propiedad <select>selectedIndex y vuelva a seleccionar ese elemento cuando vuelva a aparecer la llamada AJAX. Obviamente, esto no funcionará si el usuario no ha seleccionado nada aún.

3. Don't use UpdatePanels. Pruebe jQuery + ASP.NET page methods en su lugar.

Answer 2

Parece que los siguientes rollos ejemplo de código de la siguiente manera:

• Internet Explorer 8: Después de devolución de datos del elemento seleccionado es el primer elemento visible.

• Firefox: Después de la devolución, el elemento seleccionado siempre está visible (pero puede ser el último elemento visible).

• Chrome: Después de la devolución de datos, el elemento seleccionado puede estar oculto ya que el cuadro de lista se desplaza hacia la parte superior, como dices.

 
<asp:UpdatePanel ID="up1" runat="server"> 
    <ContentTemplate> 
     <asp:ListBox ID="lb1" runat="server" Height="100px" AutoPostBack="true"> 
      <asp:ListItem>A</asp:ListItem> 
      <asp:ListItem>B</asp:ListItem> 
      <asp:ListItem>C</asp:ListItem> 
      <asp:ListItem>D</asp:ListItem> 
      <asp:ListItem>E</asp:ListItem> 
      <asp:ListItem>F</asp:ListItem> 
      <asp:ListItem>G</asp:ListItem> 
      <asp:ListItem>H</asp:ListItem> 
     </asp:ListBox> 
    </ContentTemplate> 
</asp:UpdatePanel> 

Answer 3

var xPos, yPos; 
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 

    function BeginRequestHandler(sender, args) { 
     if (($get('Panel1')) != null) { 
      xPos = $get('Panel1').scrollLeft; 
      yPos = $get('Panel1').scrollTop; 
     } 
    } 

    function EndRequestHandler(sender, args) { 
     if (($get('Panel1')) != null) { 
      $get('Panel1').scrollLeft = xPos; 
      $get('Panel1').scrollTop = yPos; 
     } 
    } 
    prm.add_beginRequest(BeginRequestHandler); 
    prm.add_endRequest(EndRequestHandler); 

    //Note: "Panel1" Panel or div u want to maintain scroll position 
    //Note: This Java Script should be added after Scriptmanager***** 

// Mantener Posición de desplazamiento para el panel/Div con fuera del panel de actualización

window.onload = function() { 
     var strCook = document.cookie; 
     if (strCook.indexOf("!~") != 0) { 
      var intS = strCook.indexOf("!~"); 
      var intE = strCook.indexOf("~!"); 
      var strPos = strCook.substring(intS + 2, intE); 
      document.getElementById('Panel1').scrollTop = strPos; 
     } 
    } 
    function SetDivPosition() { 
     var intY = document.getElementById('Panel1').scrollTop; 
     document.title = intY; 
     document.cookie = "yPos=!~" + intY + "~!"; 
    } 


    //Note: "Panel1" Panel id or div id for which u want to maintain scroll position 

Answer 4

todavía se puede lograr la devolución de datos parcial mediante la UpdatePanel contiene un ListBox, pero evitar que se de ser sobrescrito por una nueva instancia estableciendo lo siguiente en el UpdatePanel:

ChildrenAsTriggers="False" 

Esta como se indica en la MSDN:

Obtiene o establece un valor que indica si las devoluciones de datos de inmediato controles secundarios de un control UpdatePanel actualizar el contenido del panel. Establezca la propiedad ChildrenAsTriggers en false si NO desea que devoluciones desde controles secundarios inmediatos del control UpdatePanel a provoquen una actualización del contenido del panel.

La única salvedad a esto es si usted está tratando de hacer cualquier otra manipulación visual al cuadro de lista desde el lado del servidor (es decir, añadir CSS atributos a los elementos de las devoluciones de datos), entonces no podrá ver las hacen hasta se produce otra devolución de datos no relacionada. Si todo lo que hace es hacer selecciones, entonces la configuración ChildrenAsTriggers="False" funcionará.

Answer 5

Para la aplicación empresarial en la que estaba trabajando, resultó que la página MasterPage.Master manejaba el evento Sys.WebForms.PageRequestManager.getInstance(). Add_endRequest y configuraba window.scroll (0,0) dentro de él. Las páginas de contenido obviamente estaban ejecutando window.scroll (0,0) en cada activador del UpdatePanel de la página de contenido. Intenté sobreescribir la funcionalidad add_endRequest en la página de contenido, pero no pude lograr que funcionara. Finalmente, acabo de modificar el Master.Master para no hacer window.scroll (0,0).