Asp.net keepScrollPositionOnPostBack и ошибка проверки формы

Question

У меня очень длинная форма, которую нужно заполнить. Я включил функцию k eepScrollPositionOnPostBack, поскольку у меня есть несколько элементов управления, которые скрывают / отображают в зависимости от пользовательского ввода.

Поскольку форма длинная, я бы хотел, чтобы страница была сфокусирована и переместилась к первому элементу управления, который вызвал сбой проверки, и у меня включена опция сбоя проверки. Однако, кажется, что k eepScrollPositionOnPostBack переопределяет это (элемент управления фокусируется, но не прокручивается до него).

Есть идеи для обхода этого? Все, что я пробовал до сих пор, не сработало. Это проект веб-формы asp.net.

Answer 1

Это хороший вопрос и очень сложно получить работу. Но мне удалось получить одну версию, которую вы можете попробовать и, возможно, использовать.

Параметр MaintainScrollPositionOnPostback="true" устанавливает серию javascript-событий при отправке формы и загрузке окна, и они, как вы говорите, "перезаписывают" фокус, установленный валидатором.

Поэтому я добавил общий класс CSS для всех валидаторов, например:

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" CssClass="error" ErrorMessage="RequiredFieldValidator" SetFocusOnError="true"
    EnableClientScript="false" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>

А затем я добавил еще один обработчик событий в window.load (обратите внимание, что нам нужно также оставить тот, который добавлен Asp.Net, чтобы мы не могли выполнить windows.load = function...):

<script>
    window.addEventListener("load", function () {
        var el = document.getElementsByClassName("error");
        if (el.length > 0) {
            window.location.hash = "#" + el[0].id;                
        }
    });        
</script>

Здесь вы можете использовать jQuery для поддержки большего количества браузеров, но addEventListener довольно хорошо поддерживается.

Скрипт ищет сообщение об ошибке и фокусируется на нем по его идентификатору с привязкой. В Javascript есть метод focus, но он предназначен для элементов формы, поэтому это обходной путь.

Надеюсь это поможет!