ASP.NET AJAX: Клиентский объект PageRequestManager - Переход на конкретный HTML элемент при завершении частичного постбэка
ОГЛАВЛЕНИЕ
Переход на конкретный HTML элемент при завершении частичного постбэка
Недавно мне предоставилась возможность работать с коллегой, который использовал AJAX на странице по поиску информации в базе данных. В общем, пользователи вводят различные данные для фильтрации в текстовый элемент управления TextBox, нажимают на кнопку "Show Results", и результат будет отображен в отсортированной листаемой табличной сетке GridView под элементом управления TextBox. Элементы TextBox и GridView оба находились в UpdatePanel.
Страница была так организована, что кнопка "Show Results" была расположена внизу браузерного окна для пользователей, которые используют низкое разрешение экрана. После того, как значения для поиска (были) введены в элементы TextBox и была нажата кнопка "Show Results", табличная сетка GridView будет отображена под кнопкой "Show Results", но такие пользователи не увидят данные результаты, потому что они не помещаются на их экране. Таким образом, им необходимо перейти вниз, чтобы увидеть результаты. Но поскольку AJAX предоставляет более сглаженную обработку, то пользователи не могли заметить, что страница была обновлена. На экране не было никакого оповещения о том, что их действие (нажатие на кнопку "Show Results") привело к какому-либо результату, так как он был расположен ниже.
Решением данной проблемы является автоматическая прокрутка по странице к конкретному HTML элементу, расположеному прямо над результатом. Данная прокрутка необходима тогда, когда был завершен частичный постбэк.
Объект браузера window включает в себя метод scrollTo(x, y) , который переходит на конкретные координаты (x,y). Написав небольшой скрипт, вы сможете определить координаты (x,y) какого-либо HTML элемента. Мы нашли скрипт созданный Eric Pascarello, который содержит в себе всю даннуй функциональность в функции ScrollToElement(element), написанной на JavaScript . Мы вызвали данный метод путем передачи в обработчик события endRequest тот HTML элемент, на который необходимо перейти.
function PageRequestManager_endRequest(sender, args) {
// Переход на конкретный HTML элемент
var scrollTo = document.getElementById('scrollHere');
ScrollToElement(scrollTo);
}
Значение scrollHere, переданное в функцию getElementById(id), связано с элементом <div>, расположенным на странице прямо над выпадающим списком категорий.
Чтобы увидеть данную функциональность в действии, загрузите демо-код, приведенный в конце данной статьи. Два следующих скриншота демонстрируют данное поведение. Первый скриншот показывает страницу в то время, когда ее просматривают. В самом низу расположен выпадающий список , где пользователь сможет выбрать категорию. Как только он выберет категорию и нажмет кнопку "Display Matching Products", ниже списка будет отображена табличная сетка GridView, которая покажет все товары, принадлежащие выбранной категории.
По умолчанию, после нажатия на кнопку "Display Matching Products" пользовательское окно браузера останется в том же положении. Пользователю пришлось бы вручную перейти вниз, к результатам, и в том случае, если кнопка "Display Matching Products" уже была в самом низу их окна, они могли бы и не понять, что отчет о запрашиваемой информации уже был доступен ниже по странице.
Используя данный скрипт на странице, пользовательский браузер автоматически перейдет к результатам в момент, когда частичный постбэк будет завершен.
Веселого программирования!
Scott Mitchell