Использование UpdatePanel в ASP.NET AJAX - Условные обновления интерфейса UpdatePanel
ОГЛАВЛЕНИЕ
Условные обновления интерфейса UpdatePanel
По умолчанию, все интерфейсы UpdatePanels обновляются после какого-либо постбэка, вызванного любым UpdatePanel. Данное поведение может быть изменено путем установки свойства UpdateMode UpdatePanel в Conditional (значение по умолчанию равно Always). Как только вы совершите данное изменение, UpdatePanel обновится только в том случае, если он является инициатором частичного постбэка. Чтобы показать данный принцип, я создал демо-код, который использует три UpdatePanel. Тот UpdatePanel, что расположен выше, содержит интерфейс по вводу данных, запрашивающий пользователя ввести имя и далее нажать на кнопку, тем самым, указывая, что он либо друг (friend), либовраг (foe). Под данным UpdatePanel расположены два других UpdatePanels, FriendPanel и FoePanel. FriendPanel содержит элемент GridView, который выводит список всех введенных друзей; FoePanel содержит GridView, который выводит всех недругов.
В дополнение к данным пользовательским интерфейсам, каждая UpdatePanel содержит элемент управления Label , который выводит текущую дату и время, используя обработчик события Load. Заметьте элемент Label, расположенный на самом верху страницы - его свойство Text установлено в текущее время и дату при помощи страничного обработчика события Load. Скриншот, показанный ниже, был сделан, когда страницу посетили в первый раз. Элементы Label на странице и UpdatePanels выводят одинаковое время.
Полный код данной демонстрации доступен для загрузки в конце данной статьи.
По умолчанию, когда пользователь вводит имя и нажимает либо на кнопку "This Person is a Friend", либо на "This Person is a Foe", частичный постбэк обеспечивает вызов обновления всех UpdatePanel. Тем не менее, данный уровень обновления является излишеством, так как необходимо обновить либо FriendsPanel, либо только FoePanel (в зависимости от того, какая кнопка была нажата). Путем ограничения того, что UpdatePanel обновляет, мы улучшим отзывчивость страницы, так как с сервера в браузер будет выслано гораздо меньше разметки.
Чтобы произвести данное изменение, начните с установки значений свойства UpdateMode элементов FriendsPanel и FoePanel в Conditional. При этом данные два UpdatePanel не будут обновлены, когда нажаты кнопки "This Person is a Friend" или "This Person is a Foe". Чтобы убедиться в этом, как только вы сделаете данные изменения, установив свойства в Conditional, заново посетите страницу и затем введите имя в текстовое поле и нажмите кнопку "This Person is a Friend". Самая верхняя UpdatePanel запустит частичный постбэк и ее элемент Label отобразит текущие время и дату, но элементы Label в FriendsPanel и FoePanel все так же будут показывать предыдущие значения, так как они не были обновлены при срабатывании частичного постбэка.
Нам необходимо проинформировать FriendPanel о том, чтонужнообновить свой интерфейс, когда нажата кнопка "This Person is a Friend"; аналогично нам необходимо указать FoePanel о том, что нужно обновить свой интерфейс когда нажали "This Person is a Foe". Коллекция триггеров UpdatePanel включает в себя список элементов управления на странице, связанных с событиями, которые заставляют UpdatePanel обновить свой интерфейс. Находясь в Visual Studio Designer, нажмите на UpdatePanel и далее откройте окно свойств Properties. Выберите свойство Triggers и нажмите на элипсы, чтобы открыть окно редактирования коллекции триггеров UpdatePanelTrigger Collection Editor (смотри ниже). Здесь вы можете указать какие элементы управления и события должны вызывать обновления интерфейса UpdatePanel во время частичного постбэка.
Для FriendPanel добавьте AsyncPostbackTrigger для обработчика события кнопки "This Person is a Friend". Проделайте то же самое для FoePanel используя кнопку "This Person is a Foe".
Когда вы объявите данные триггеры, зайдите заново на страницу, введите имя и нажмите кнопку "This Person is a Friend": тем самым выполняется частичный постбэк и оба верхних UpdatePanel и FriendPanel обновляются. Тем не менее, FoePanelостанется необновленной, о чем говорит нам не обновленная информация, отображенная в элементах Label.
