Использование UpdatePanel в ASP.NET AJAX
ОГЛАВЛЕНИЕ
Используем GridView в UpdatePanel
Вся прелесть элемента управления UpdatePanel заключается в том, что благодаря ей создание AJAX пользовательских интерфейсов (даже пользовательских интерфейсов, которые используют такие веб-элементы управления, как GridView, для работы с информацией) становится такой же простой, как прогулка в парке. Весь богатый набор функций GridView - листание, сортировка, правка и удаление - доступен и может быть использован без добавления дополнительного кода, если элемент вложен в UpdatePanel.
Пример, содержащий рабочий GridView, расположенный в UpdatePanel и поддерживающий правку, удаление, листание и сортировку, можно загрузить по ссылке в конце данной статьи. Чтобы создать такую страницу, начните с добавления элементов управления ScriptManager и UpdatePanel на вашу страницу. Далее, перетащите GridView из инструментария Toolbox в UpdatePanel. Отсюда вы можете настроить ваш GridView так же, как бы вы это сделали в обычной ситуации. Вы можете связать GridView с декларативным элементом управления источником данных и позволить странице производить листинг, сортировку, правку и удаление путем проверки чек-боксов из смарт тега GridView. Детальное описание правки, удаления, листинга и сортировки информации выходит за рамки данной статьи.
Как только вы правильно настроите ваш GridView, протестируйте его в браузере. Так как GridView находится в UpdatePanel, действия, которые обычно вызывали бы полный постбэк - переход на другую страницу, сортировку, правку, удаление - теперь вызывают частичный постбэк. В результате вы получите более быстрый пользовательский интерфейс.
Используем несколько UpdatePanels на единой странице
В рассмотренных двух примерах, использующих UpdatePanel, страница содержала только один элемент UpdatePanel, но в жизни бывают случаи, когда на страницу необходимо поместить более одного UpdatePanel. Это особенно удобно в случаях, когда различные части страницы отвечают за различные действия. Например, в одной части страницы вы хотите осуществить запрос на ввод информации. После получения информации вам, наверняка, захочется сохранить ее в базе данных и после обновить другую часть страницы, которая резюмирует данную информацию.
По умолчанию, когда любой UpdatePanel на странице вызывает асинхронный постбэк, интерфейсы всех UpdatePanels на странице обновляются. Это может быть легко продемонстрировано в примере, который отображает время и дату в UpdatePanel. Начните с создания новой ASP.NET страницы и добавьте ScriptManager и два UpdatePanel. Установите свойства ID UpdatePanel в UpdatePanel1 и UpdatePanel2. В пределах ContentTemplates данных двух UpdatePanels добавьте элементы Label и Button. Также добавьте другой элемент Button за пределами UpdatePanels. При нажатии на внешнюю кнопку Button вызовется полностраничный постбэк. В дополнение к внешнему элементу Button, добавьте элемент Label для отображения текущей даты и времени. На данном этапе декларативная разметка вашей страницы должна выглядеть примерно так:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label runat="server" id="Panel1Time"></asp:Label>
<br />
<asp:Button runat="server" ID="Panel1Button" Text="Partial Postback from Panel 1" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Label runat="server" id="Panel2Time"></asp:Label>
<br />
<asp:Button runat="server" ID="Panel2Button" Text="Partial Postback from Panel 2" />
</ContentTemplate>
</asp:UpdatePanel>
<br /><br />
<asp:Label runat="server" id="PageTime"></asp:Label>
<br />
<asp:Button runat="server" ID="FullPostbackButton" Text="Full Postback" />
Элемент управления UpdatePanel имеет в наличии событие Load, которое срабатывает во время каждого визита на страницу, будь то полный, либо частичный постбэк. Создайте обработчик для этого события в каждом из UpdatePanel и, будучи в обработчике события, установите соответствующее свойство Text элемента Label в текущую дату и время. Аналогично установите свойство Text элемента PageTime Label в обработчике события Page_Load.
protected void Page_Load(object sender, EventArgs e)
{
PageTime.Text = "Page time: " + DateTime.Now.ToString();
}
protected void UpdatePanel1_Load(object sender, EventArgs e)
{
Panel1Time.Text = "UpdatePanel1 time: " + DateTime.Now.ToString();
}
protected void UpdatePanel2_Load(object sender, EventArgs e)
{
Panel2Time.Text = "UpdatePanel2 time: " + DateTime.Now.ToString();
}
Установите контрольные точки (breakpoint) в этих трех обработчиках событий и начните отладку (debug) страницы. Заметьте, что всякий раз, когда пользователи посещают страницу, срабатывает каждая из этих контрольных точек. И не так уж и важно, была ли страница посещена в первый раз или нет, после полного постбэка либо после частичного постбэка. Тем не менее, только определенные части страницы обновляются в определенных условиях. Данный скриншот показывает страницу в то время когда она была только посещена. Заметьте, что все три элемента Label отображают одни те же значения.
Если нажать кнопку "Full Postback", страница будет полностью обработана, и все элементы Label опять будут отображать одинаковые значения. Тем не менее, если нажать на одну из кнопок "Partial Postback", происходит частичный постбэк. В то время как частичный постбэк также вызывает все три события Load, он обновляет только те пользовательские интерфейсы, которые принадлежат страничным UpdatePanel . После нажатия на кнопку "Partial Postback", элемент "Page time" все еще выводит время с прошлого полного постбэка , в то время как элементы Labels в UpdatePanel отображают текущее время.
Три ключевых пункта можно вывести из этого примера:
-
Событие Load UpdatePanel срабатывает при каждом визите на страницу, независимо от того, была ли страница посещена после частичного постбэка либо после полного (или просто была посещена впервые).
-
При частичном постбэке области за пределами UpdatePanels не обновляются. Да, при этом событие Load все равно срабатывает, но интерфейс не обновляется. Это происходит потому, что сервер отсылает обратно только измененную разметку для области UpdatePanel.
- По умолчанию, когда вызван частичный постбэк, все 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.
Заключительные комментарии по поводу UpdatePanel
Вся прелесть UpdatePanel заключается в том, что он работает гладко практически со всеми элементами управления. Например, чтобы добавить возможности AJAX в GridView, достаточно просто перетащить GridView в UpdatePanel, и теперь такие свойства GridView, как редактирование, сортировка, удаление и листинг используют технологию AJAX, чтобы предоставить более отзывчивый пользовательский интерфейс. Тем не менее, стоит все же отметить что не все элементы управления ASP.NET совместимы с UpdatePanel. Microsoft перечисляет такие несовместимые элементы управления в обзоре элемента управления UpdatePanel:
Следующие элементы управления ASP.NET несовместимы с обновлениями части страницы, и тем самым не поддерживаются элементом управления UpdatePanel:
- Элементы управления TreeView и Menu.
- Элементы управления Web Parts. Для более подробной информации изучите ASP.NET Web Parts Controls.
- Элементы управления FileUpload, когда они используются для того, чтобы загружать файлы в качестве частичного постбэка.
- Элементы управления GridView и DetailsView, когда их свйоства EnableSorting и PagingCallbacks установлено в значение "Истина" (True). По умолчанию установлено в "Ложь" (False).
- Элементы управления Login, PasswordRecovery, ChangePassword, и CreateUserWizard, содержимое которых не было ковертировано в редактируемые шаблоны.
- Элементы управления Substitution.
- Элементы управления Validation, такие, как BaseCompareValidator, BaseValidator, CompareValidator, CustomValidator, RangeValidator, RegularExpressionValidator, RequiredFieldValidator, и ValidationSummary.
Те элементы управления, которые несовместимы с частичной обработкой страницы, все еще могут быть использованы за пределами элемента UpdatePanel. В дополнение следуте отметить, что в некоторых случаях вы можете использовать эти элементы управления таким образом, чтобы сделать совместимыми с частичными обновлениями страницы. Например, вы можете использовать элементы управления Login, ChangePassword, или PasswordRecovery в пределах элемента UpdatePanel, если вы можете сконвертировать их содержимое в шаблоны.
Взгляд в будущее...
В дополнение к ScriptManager и UpdatePanel, расширения ASP.NET AJAX Extensions включают в себя парочку других веб-элементов управления. Мы рассмотрим их в последующих статьях, а после перейдем к элементам управления из инструментария ASP.NET AJAX Control Toolkit. А пока...
Scott Mitchell