Сбросить положение прокрутки после асинхронной обратной передачи - ASP.NET

StackOverflow https://stackoverflow.com/questions/616210

Вопрос

Каков наилучший способ вернуть положение прокрутки в начало страницы после асинхронной обратной передачи?

Асинхронная обратная передача инициируется из столбца командного поля ASP.NET GridView, а в команде OnRowCommand GridView вызывается метод обновления панели ASP.NET update.

Мое текущее приложение представляет собой веб-сайт ASP.NET 3.5.

Редактировать: Я получил отличные отзывы от всех, и я закончил использовать метод PageRequestManager в теге script, но мой следующий вопрос:

Как мне настроить его так, чтобы он выполнялся только тогда, когда пользователь нажимает на командное поле ASP.NET в моем элементе управления GridView?У меня есть другие кнопки на странице, которые выполняют асинхронную обратную передачу, которую я не хочу прокручивать до верха страницы.

ПРАВКА 1: Я разработал решение, в котором мне не нужно использовать PageRequestManager.Смотрите мой последующий ответ для решения проблемы.

Другие советы

Поскольку вы используете UpdatePanels, вам нужно подключиться к ASP.NET AJAX PageRequestManager

Вам нужно будет добавить метод к endRequest крючки, которые:

  

Возникает после завершения асинхронной обратной передачи и возвращения контроля браузеру.

Итак, у вас будет что-то вроде: 

<script type="text/javascript">
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(pageLoaded);

  function pageLoaded(sender, args) {
     window.scrollTo(0,0);
  }
</script>

Что заставит браузер прокрутить назад до верхней части страницы после завершения запроса на обновление.

Есть и другие события, которые вы можете подключить вместо: 

beginRequest // Raised before the request is sent
initializeRequest // Raised as the request is initialised (good for cancelling)
pageLoaded // Raised once the request has returned, and content is loaded
pageLoading // Raised once the request has returned, and before content is loaded

Прелесть асинхронных постбэков в том, что страница будет поддерживать высоту прокрутки без необходимости устанавливать MaintainScrollPosition, так как здесь нет «полной перезагрузки страницы». в этом случае вы действительно хотите, чтобы этот эффект был, поэтому вам нужно будет создать его вручную.

Изменить, чтобы ответить на обновленный вопрос

Хорошо, поэтому, если вам нужно сбросить положение только при определенных нажатиях кнопок, вам нужно сделать что-то вроде этого:

Начните с подключения к BeginRequest, а также / 

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

Это потому, что в параметре args вы получаете доступ к: 

args.get_postBackElement().id

Который сообщит вам идентификатор кнопки, которая запустила все событие - вы можете либо проверить значение здесь, и переместить страницу, либо сохранить ее в переменной, и запросить ее в конце запроса - зная о условия гонки и т. д., когда пользователь нажимает другую кнопку до завершения вашего исходного обновления.

Это должно привести вас к удаче - есть множество примеров на Работа с событиями PageRequestManager

Вот идеальное решение для сброса положения полосы прокрутки в TOP в AJAX

Клиентский код 

function ResetScrollPosition()
{
    setTimeout("window.scrollTo(0,0)", 0);
}

Серверный код 

ScriptManager.RegisterStartupScript(Page, this.GetType(), "ScrollPage", "ResetScrollPosition();", true);

Только window.scrollTo (0,0) не будет работать. В этом случае Ajax будет иметь приоритет, поэтому вам нужно использовать функцию setTimeout.

Используете ли вы asp.net AJAX?Если это так, то в клиентских библиотеках есть два очень полезных события BeginRequest и EndRequest, одна из проблем с частичными / асинхронными обратными отправками заключается в том, что общая страница не имеет понятия, что вы делаете.события begin и endrequest позволят вам сохранить положение прокрутки на клиенте, у вас может быть var в js, который установлен в положение прокрутки при beginrequest, затем при конечном запросе вы можете сбросить scrollTop любого элемента, который вам требуется..я уверен, что видел, как это делалось раньше, но не могу найти ссылку.я напишу, если найду пример

взято из этого урока:

http://aspnet.4guysfromrolla.com/articles/111407-1.aspx

Мы устанавливаем MaintainScrollPositionOnPostback = true

Тогда, если нам нужно сбросить позицию прокрутки, вызовите метод: 

Private Sub ResetScrollPosition()
If Not ClientScript.IsClientScriptBlockRegistered(Me.GetType(), "CreateResetScrollPosition") Then
   'Create the ResetScrollPosition() function
   ClientScript.RegisterClientScriptBlock(Me.GetType(), "CreateResetScrollPosition", _
                    "function ResetScrollPosition() {" & vbCrLf & _
                    " var scrollX = document.getElementById('__SCROLLPOSITIONX');" & vbCrLf & _
                    " var scrollY = document.getElementById('__SCROLLPOSITIONY');" & vbCrLf & _
                    " if (scrollX && scrollY) {" & vbCrLf & _
                    "    scrollX.value = 0;" & vbCrLf & _
                    "    scrollY.value = 0;" & vbCrLf & _
                    " }" & vbCrLf & _
                    "}", True)

   'Add the call to the ResetScrollPosition() function
   ClientScript.RegisterStartupScript(Me.GetType(), "CallResetScrollPosition", "ResetScrollPosition();", True)
End If
End Sub

Вы установили свойство страницы MaintainScrollPosition? Не уверен, будет ли это по-другому, если вы делаете асинхронную обратную передачу или нет.

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

Я использую скрытый ввод с именем hScrollTop, который я установил перед отправкой формы asp.net. Затем, когда страница загружается, она устанавливает scrollTop в соответствии со значением скрытого ввода.

Попробуйте этот код на новой странице. 

<div style="height:500px"></div>

<form id="Form1" runat=server onsubmit="javascript:saveScrollTop();">
    <input type=submit value="Submit" runat=server>
    <input type="hidden" id="hScrollTop" runat=server>
</form>

<div style="height:1000px"></div>

<script language="javascript">
    function saveScrollTop() {
        document.getElementById("<%= hScrollTop.ClientID %>").value = document.body.scrollTop;
        return true;
    }

    window.onload = function() {
        document.body.scrollTop = document.getElementById("<%= hScrollTop.ClientID %>").value;
    }

</script>

Page.RegisterStartupScript("MyScript", "<script language=javascript>setTimeout('window.scrollTo(0,0)', 0);</script>");

Поместите вышеупомянутое в функцию, которую вы хотите сказать, чтобы перейти в начало страницы. Например, когда страница недействительна, имейте ее там, и она добавит временный javascript, чтобы стрелять в верхнюю часть страницы.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top