15.2.2. Работа с UpdatePanel

При первом рассмотрении UpdatePanel сходен в работе с обычным Panel. В результате рендеренга страницы этот компонент также заменяется на HTML-элемент div и служит для группировки и разметки страницы. Особенность же этого компонента заключается в том, что любой запрос, совершенный элементом, расположенным внутри UpdatePanel является асинхронным и приводит только к перерисовке его содержимого. Остальная страница не изменяется. Даже если при постбэке пользователь изменит структуру или набор компонент вне UpdatePanel, то на этапе Render жизненного цикла страницы, эти изменения не будут учтены, произойдет генерация HTML-разметки только для содержимого компонента и эта разметка будет отправлена клиенту. Клиентская часть ASP.NET AJAX обработает полученный код и изменить разметку внутри div'а, соответствующего UpdatePanel.

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

Иногда бывает не достаточно обновлять только содержимое того UpdatePanel'а, который вызвал постбэк. Нужно заставить обновиться и другие UpdatePanel'ы на странице. Это можно сделать двумя способами:

• В разметке ASP или в code-behind UpdatePanel указать триггеры (Triggers), которые будут приводить к перерисовке содержимого этой панели. В качестве параметров указываются идентификаторы серверных компонент, находящихся вне UpdatePanel, которые должны привести к обновлению его содержимого.

• В code-behind'e можно вызвать метод UpdatePanel.Update(), что приведет к тому, что его содержимое будет ренедрится на сервере и отправляться клиенту.

Все это значит, что для внедрения AJAX в наш Интернет-магазин достаточно поместить все необходимые компоненты в UpdatePanel'ы и при необходимости указать триггеры:

<asp:UpdatePanel ID="UpdatePanelComments"

runat="server" UpdateMode="Conditional">

<Triggers>

<asp:AsyncPostBackTrigger ControlID="AddReview" />

</Triggers>

<ContentTemplate>

<asp:DataList ID="ReviewList" runat="server" Width="100%"

CellPadding="0" CellSpacing="0">

<ItemTemplate>

<asp:Label ID="Label1" style='font-weight:bold'

Text='<%# DataBinder.Eval(Container.DataItem, "ReviewerName") %>'

runat="server" />

<span class="Normal">говорит... </span>

<asp:Image ID="Image1" runat="server"

ImageUrl='<%# "~/images/ReviewRating" + DataBinder.Eval(Container.DataItem, "Rating") +".gif" %>' />

<br>

<asp:Label ID="Label2" CssClass="Normal"

Text='<%# DataBinder.Eval(Container.DataItem, "Comments") %>'

runat="server" />

</ItemTemplate>

<SeparatorTemplate>

<br>

</SeparatorTemplate>

</asp:DataList>

</ContentTemplate>

</asp:UpdatePanel>

…

<asp:UpdatePanel ID="UpdatePanelNewCommentProperties" runat="server"

UpdateMode="Conditional">

<Triggers><asp:AsyncPostBackTrigger ControlID="AddReview" />

</Triggers>

<ContentTemplate>

…

</ContentTemplate>

</asp:UpdatePanel>

…

<asp:UpdatePanel ID="UpdatePanelCommentButton" runat="server">

<ContentTemplate>

<br>

<span class="NormalBold">Комментарий</span>

<br>

<asp:TextBox ID="Comment" TextMode="multiline"

MaxLength="3850" Rows="7" Width="100%"

runat="server" />

<asp:RequiredFieldValidator ControlToValidate="Comment"

Display="Dynamic" Font-Names="verdana" Font-Size="9pt"

ErrorMessage="Поле 'Комментарий' должно быть заполнено." runat="server"

ID="RequiredFieldValidator3"></asp:RequiredFieldValidator>

<br>

<br>

<asp:Button ID="AddReview" runat="server"

OnClick="OnClick" Text="Добавить свой комментарий" />

<br>

</ContentTemplate>

</asp:UpdatePanel>

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