asp.net - route - ¿Cómo puedo evitar que una página salte a la primera posición después de una validación fallida?

select asp-for asp-items

Question

Tengo una página aspx simple con unos cuadros de texto y un botón de envío. Algunos campos son obligatorios y debajo del botón hay un resumen de validación. La forma completa es más grande que la altura de la pantalla, por lo que uno tiene que desplazarse hacia abajo para llegar al botón de envío. Si no completo todos los campos obligatorios y hago clic en enviar, la validación falla como se esperaba y el resumen de la 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 se desea. Pero molesto 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 bajar la página nuevamente.

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

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

¡Gracias de antemano!

Actualizar:

El comportamiento que describí anteriormente no parece depender del navegador. He probado en cinco navegadores diferentes y es igual en todas partes.

Answer 1

Desafortunadamente, MantainScrollPositionOnPostback ya no funciona en los navegadores modernos. Para una solución compatible con otros navegadores, puede usar este fragmento de código (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 2

Estoy usando MVC5 y la única forma 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();

Answer 3

He encontrado que la configuración de la propiedad:

maintainScrollPositionOnPostBack="true"

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

Answer 4

He hecho la pregunta en asp.net ( http://forums.asp.net/p/1545969/3779312.aspx ) y obtuve respuestas con dos soluciones. La 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 no hay ningún lugar para llamar.

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

Answer 5

Intente configurar el enfoque de página Page.SetFocus(control); Tengo un botón de inserción que agrega una fila adicional a mi vista de cuadrícula, que es uno de los muchos elementos en una página, por lo que puedo agregar Page.SetFocus(control) como el último método en mi evento btnInsert_Click.

Answer 6

La página parpadea porque toda la página se devuelve al servidor y el contenido se envía de nuevo desde el servidor. Debe usar la etiqueta UpdatePanel para rodear el lugar que desea actualizar. Solo devolverá 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>

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

Answer 7

Puede utilizar la propiedad de la página MaintainScrollPositionOnPostBack:

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