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

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

Gracias, XaiSoft

Se está encontrando con este problema porque UpdatePanel reemplaza completamente su elemento desplazado por uno nuevo cuando vuelve la solicitud asíncrona.

Soluciones posibles:

  1. Use JavaScript para almacenar la propiedad scrollTop del elemento en un elemento de formulario oculto antes de UpdatePanel (llamando al método ClientScriptManager.RegisterOnSubmitStatement ) y luego configurándolo en el nuevo cuando vuelva la llamada AJAX. Esto será tedioso, propenso a errores y probablemente no muy compatible (ver aquí ).

  2. Utilice JavaScript para almacenar la propiedad selectedIndex del y vuelva a seleccionar ese elemento cuando vuelva la llamada AJAX. Obviamente, esto no funcionará si el usuario no ha seleccionado nada todavía.

  3. No utilice UpdatePanel s . Pruebe los métodos de página jQuery + ASP.NET en su lugar.

  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 la posición de desplazamiento para el panel / Div sin el 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 

Parece que el siguiente ejemplo de código se desplaza de la siguiente manera:

  • Internet Explorer 8: después de la devolución, el 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, el elemento seleccionado puede estar oculto ya que el cuadro de lista se desplaza hacia la parte superior, como usted dice.

 
     
         
              A 
              B 
              C 
              D 
              E 
              F 
              G 
              H 
         
     
 

Aún puede lograr la devolución parcial de datos utilizando el UpdatePanel contiene un ListBox , pero puede evitar que se sobrescriba con una nueva instancia configurando lo siguiente en el UpdatePanel :

 ChildrenAsTriggers="False" 

Esto como se indica en la MSDN :

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

La única advertencia es que si intenta realizar cualquier otra manipulación visual en el ListBox desde el lado del servidor (es decir, agregar atributos CSS a los elementos en las devoluciones de datos), no verá que se procesen hasta que ocurra otra devolución no relacionada. Si todo lo que está haciendo es hacer selecciones que configurar ChildrenAsTriggers="False" funcionará.

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 ella. Las páginas de contenido obviamente ejecutaban window.scroll (0,0) en cada desencadenante del UpdatePanel de la página de contenido. Intenté anular la funcionalidad add_endRequest en la página de contenido, pero no pude hacer que funcionara. Finalmente, solo modifiqué el Master.Master para no hacer window.scroll (0,0).