Как я могу предотвратить переход страницы на верхнюю позицию после неудачной проверки?

Question

У меня есть простая страница aspx с несколькими текстовыми полями и кнопкой отправки. Некоторые поля являются обязательными, и под кнопкой находится ValidationSummary. Полная форма больше высоты экрана, поэтому нужно прокрутить вниз, чтобы добраться до кнопки отправки. Если я не заполняю все обязательные поля и нажимаю «Отправить», проверка завершается неудачно, как ожидалось, и в сводке проверки отображаются некоторые информационные сообщения под кнопкой. Проверка происходит на клиенте и обратной передачи не происходит.

Так что все это работает, как хотелось бы. Но беспокоит то, что страница перемещается («прыгает») в верхнюю позицию, когда я нажимаю на кнопку «Отправить». Чтобы увидеть сводку проверки, нужно снова переместиться вниз по странице.

Я попытался установить для свойства ShowSummary значение false (что не имеет особого смысла): проверка все еще работает (без обратной передачи), но в этом случае страница не перемещается в верхнюю позицию. Таким образом, проблема, похоже, зависит от визуализации проверочных текстов.

Есть ли способ предотвратить переход этой страницы?

Заранее спасибо!

Обновление:

Поведение, описанное выше, не зависит от браузера. Я тестировал в пяти разных браузерах, и везде одинаково.

Answer 1

Я задал вопрос на asp.net (http://forums.asp.net/p/1545969/3779312.aspx) и получил ответы с двумя решениями. Лучше один фрагмент Javascript, который поддерживает положение прокрутки:

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

Это только для размещения на странице и некуда звонить.

Другое решение аналогично предложению RioTera здесь (с использованием MaintainScrollPositionOnPostBack), но добавляет EnableClientScript="false" к Валидаторам для принудительной обратной передачи. Это тоже работает, но цена - это искусственный постбэк.

Answer 2

Вы можете использовать свойство Page MaintainScrollPositionOnPostBack:

В коде позади:

Page.MaintainScrollPositionOnPostBack = true;

или в вашей веб-форме:

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

Answer 3

Попробуйте установить фокус страницы Page.SetFocus(control); У меня есть кнопка вставки, которая добавляет дополнительную строку в мое представление сетки, которое является одним из многих элементов на странице, поэтому я могу добавить Page.SetFocus(control) в качестве последнего метода в моем событии btnInsert_Click.

Answer 4

Я обнаружил, что установка свойства:

maintainScrollPositionOnPostBack="true"

в вашем Web.config <pages> разделе работает хорошо.

Answer 5

Страница мигает, потому что вся страница отправляется обратно на сервер, а содержимое снова отправляется с сервера.Вы должны использовать тег UpdatePanel, чтобы окружить место, которое вы хотите обновить.Он будет только публиковать информацию, которая находится внутри тега

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

Читать http://msdn.microsoft.com/en-us/library/bb386573(v=vs.100).aspx#CodeExamples

Answer 6

Я использую MVC5, и единственный способ остановить прыжок был с кодом JQuery ниже.

Я протестировал решение для Safari, Chrome, Mozilla, Internet Explorer и Opera.

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

Answer 7

К сожалению, MantainScrollPositionOnPostback больше не работает в современных браузерах. Для кросс-браузерно-совместимого решения вы можете использовать этот фрагмент (требуется 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>

См. Также мой ответ здесь .