¿Cómo puedo evitar que una página salte a la posición superior después de una validación fallida?

Question

Tengo una página aspx simple con algunos cuadros de texto y un botón de enviar. Algunos campos son obligatorios y debajo del botón se encuentra un Resumen de validación. El formulario completo es más grande que la altura de la pantalla, por lo que uno tiene que desplazarse hacia abajo para llegar al botón Enviar. Si no llené todos los campos requeridos y hago clic en Enviar la validación, falla como se esperaba y el resumen de validación muestra algunos mensajes de información debajo del botón. La validación ocurre en el cliente y no se produce devolución de datos.

Así que todo esto funciona como lo desea. Pero inquietante es que la página se mueve ("salta") a la posición superior cuando hago clic en el botón Enviar. Para ver el resumen de validación uno tiene que moverse hacia abajo en la página nuevamente.

He intentado configurar la propiedad ShowSummary en false (lo cual no tiene mucho sentido): La validación aún funciona (no es una devolución) pero en este caso la página no se mueve a la posición superior. Entonces, el problema parece depender de la presentación de los textos de validación.

¿Hay alguna manera de evitar que esta página salte?

¡Gracias de antemano!

Actualización:

El comportamiento que he descrito anteriormente no parece ser dependiente del navegador. He probado en cinco navegadores diferentes y está en todas partes igual.

Answer 1

le he pedido a la pregunta sobre asp .net (http://forums.asp.net/p/1545969/3779312.aspx) y obtuvo respuestas con dos soluciones. El mejor es esta pieza de Javascript que mantiene la posición de desplazamiento:

<script type="text/javascript"> 
    window.scrollTo = function(x,y) 
    { 
     return true; 
    } 
</script> 

Esto es sólo para poner en la página y en ninguna parte a llamar.

La otra solución es similar a la propuesta de RioTera aquí (usando MaintainScrollPositionOnPostBack) pero agrega EnableClientScript="false" a los Validadores para forzar una devolución de datos. Funciona también, pero el precio es una devolución de datos artificial.

Answer 2

Puede utilizar el MaintainScrollPositionOnPostBack la propiedad Página:

En el código subyacente:

Page.MaintainScrollPositionOnPostBack = true; 

o en su formulario web:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" MaintainScrollPositionOnPostback="true" %> 

Answer 3

definir la página enfoque Page.SetFocus(control); Try Me tiene un botón de inserción que añade una fila adicional a mi gridview, que es uno de los muchos elementos de una página para que pueda añadir Page.SetFocus(control) como último recurso en mi caso btnInsert_Click.

Answer 4

La página parpadea porque toda la página se publica de nuevo en el servidor y el contenido vuelve a enviarse desde el servidor. Debe usar la etiqueta UpdatePanel para rodear el lugar que desea actualizar. Sólo será la devolución de datos la información que está dentro de la etiqueta

<asp:ScriptManager ID="ScriptManager1" runat="server" /> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
<ContentTemplate> 
    <!-- Place updatable markup and controls here. --> 
</ContentTemplate> 
</asp:UpdatePanel> 

Leer http://msdn.microsoft.com/en-us/library/bb386573(v=vs.100).aspx#CodeExamples

Answer 5

Desafortunadamente MantainScrollPositionOnPostback ya no funciona en los navegadores modernos. Para una solución multi-navegador compatible puede utilizar este fragmento (requiere jQuery):

<asp:HiddenField runat="server" ID="hfPosition" Value="" /> 
<script type="text/javascript"> 
    $(function() { 
     var f = $("#<%=hfPosition.ClientID%>"); 
     window.onload = function() { 
      var position = parseInt(f.val()); 
      if (!isNaN(position)) { 
       $(window).scrollTop(position); 
      } 
     }; 
     window.onscroll = function() { 
      var position = $(window).scrollTop(); 
      f.val(position); 
     }; 
    }); 
</script> 

Véase también mi respuesta here.

Answer 6

que he encontrado que la fijación de la propiedad:

maintainScrollPositionOnPostBack="true" 

en su sección Web.config <pages> funciona bien.

Answer 7

Estoy usando MVC5 y la única manera de detener el salto fue con el código JQuery a continuación.

He probado la solución en Safari, Chrome, Mozilla, Internet Explorer y Opera.

$(document).scrollTop($('form#formCheckout').offset().top); 
    event.stopPropagation(); 
    event.preventDefault();