7.6.4.5. Серверные элементы управления

Серверные элементы управления AJAX ASP.NET состоят из кода сервера и клиента, интеграция которых позволяет реализовать полнофункциональное клиентское поведение. При добавлении элемента управления AJAX в состав веб-страницы ASP.NET страница автоматически отправляет обозревателю клиентские сценарии для поддержки функциональных возможностей AJAX. Можно также написать дополнительный клиентский код для настройки функциональных возможностей элемента управления, но это не обязательно.

Ниже приведен список наиболее часто используемых серверных элементов управления ASP.NET AJAX:

• ScriptManager – управляет ресурсами сценариев для клиентских компонентов, частичной отрисовки страниц, локализации, глобализации и пользовательских сценариев. Элемент управления ScriptManager необходим для использования элементов управления UpdatePanel, UpdateProgress и Timer.

• UpdatePanel – позволяет обновлять отдельные части страницы вместо обновления ее целиком, осуществляемого путем использования синхронной обратной передачи.

• UpdateProgress – предоставляет информацию о состоянии касательно частичного обновления страницы в элементах управления UpdatePanel.

• Timer – выполняет операции обратной передачи с заданной периодичностью. Элемент управления Timer можно использовать для периодического обновления всей страницы или же ее части; в последнем случае он используется совместно с элементом управления UpdatePanel.

Можно также создавать специализированные серверные элементы управления ASP.NET, реализующие клиентское поведение AJAX. Пользовательские элементы, расширяющие возможности других веб-элементов управления ASP.NET, называются управляющими элементами – расширителями.

7.6.5. Пример использования ajax

Прежде всего, необходимо на страницу добавить в самое начало страницы объект ScriptManager (это должен быть первый объявленный объект внутри form):

<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>

Этот объект будет отвечать за работу JavaScript, в частности за подключение нового скриптового кода, который будет скачиваться при асинхронных запросах.

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

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

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

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

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

Реализуем страницу с несколькими UpdatePanel, причем сделаем так, что нажатие кнопки с идентификатором AddReview приводило к обновлению всех 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" %>' />

<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>

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

<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>

<asp:Button ID="AddReview" runat="server" OnClick="OnClick" Text="Добавить свой комментарий" />

</ContentTemplate>

</asp:UpdatePanel>

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