Общие сведения о триггерах UpdatePanel ASP.NET AJAX

по Скотт Cate

Скачать в формате PDF

При работе в редакторе разметки в Visual Studio можно заметить, что в IntelliSense есть два дочерних элемента элемента управления UpdatePanel. Одним из которых является элемент Triggers, указывающий элементы управления на странице (или пользовательский элемент управления, если вы используете его), который запускает частичную визуализацию элемента управления UpdatePanel, в котором находится элемент.

Введение

Технология ASP.NET Майкрософт предоставляет объектно-ориентированную и основанную на событиях модель программирования и объединяет их с преимуществами скомпилированного кода. Однако модель обработки на стороне сервера имеет несколько недостатков в технологии, многие из которых могут быть решены новыми функциями, включенными в расширения AJAX для Microsoft ASP.NET 3,5. Эти расширения включают в себя множество новых многофункциональных клиентских функций, включая частичную визуализацию страниц без полного обновления страницы, возможность доступа к веб-службам через клиентский сценарий (включая API профилирования ASP.NET) и обширный API на стороне клиента. предназначен для отражения многих схем управления, наблюдаемых в наборе серверных элементов управления ASP.NET.

В этом техническом документе рассматриваются функции триггеров XML ASP.NET компонента AJAX UpdatePanel. Триггеры XML предоставляют детальный контроль над компонентами, которые могут вызвать частичную визуализацию для отдельных элементов управления UpdatePanel.

Этот технический документ основан на выпуске бета-версии 2 .NET Framework 3,5 и Visual Studio 2008. Расширения AJAX ASP.NET, ранее надстройка, предназначенная для ASP.NET 2,0, теперь интегрированы в библиотеку базовых классов .NET Framework. В этом техническом документе также предполагается, что вы будете работать с Visual Studio 2008, а не с Visual Web Developer Express и предоставите пошаговые руководства в соответствии с пользовательским интерфейсом Visual Studio (хотя списки кода будут полностью совместимы независимо от среда разработки).

Триггеры

По умолчанию триггеры для заданной UpdatePanel автоматически включают любые дочерние элементы управления, которые вызывают обратную передачу, включая (например) элементы управления TextBox, для которых свойство AutoPostBack установлено в значение true. Однако триггеры также можно включать декларативно с помощью разметки. Это делается в разделе <triggers> объявления элемента управления UpdatePanel. Хотя доступ к триггерам можно получить через свойство коллекции Triggers, рекомендуется зарегистрировать все триггеры частичного отображения во время выполнения (например, если элемент управления недоступен во время разработки) с помощью метода RegisterAsyncPostBackControl(Control) объекта ScriptManager на странице в событии Page_Load. Помните, что страницы не имеют состояния, поэтому следует повторно регистрировать эти элементы управления при каждом создании.

Автоматическое включение дочерних триггеров также может быть отключено (чтобы дочерние элементы управления, создающие обратные передачи, не запускают частичные рендерингы), устанавливая для свойства ChildrenAsTriggers значение false. Это обеспечивает наибольшую гибкость при назначении отдельных элементов управления, которые могут вызывать отрисовку страницы, и рекомендуется, чтобы разработчик мог ответить на событие, а не обрабатывать все события, которые могут возникнуть.

Обратите внимание, что когда элементы управления UpdatePanel являются вложенными, если для UpdateMode задано значение Conditional, то если дочерняя UpdatePanel запускается, а родитель — нет, будет обновлена только дочерняя UpdatePanel. Однако если обновляется родительская UpdatePanel, то дочерняя UpdatePanel также будет обновлена.

Элемент> <Triggers

При работе в редакторе разметки в Visual Studio можно заметить, что в IntelliSense есть два дочерних элемента элемента управления UpdatePanel. Наиболее часто наблюдаемым элементом является элемент <ContentTemplate>, который по сути инкапсулирует содержимое, которое будет храниться на панели обновления (содержимое, для которого включается частичная визуализация). Другим элементом является элемент <Triggers>, указывающий элементы управления на странице (или пользовательский элемент управления, если вы используете его), который запускает частичную визуализацию элемента управления UpdatePanel, в котором находится <триггеры> элемента.

Элемент <Triggers> может содержать любое число для каждого из двух дочерних узлов: <asp:AsyncPostBackTrigger> и <asp:PostBackTrigger>. Они оба принимают два атрибута, ControlID и EventNameи могут указывать любой элемент управления в текущей единице инкапсуляции (например, если элемент управления UpdatePanel находится в пользовательском веб-элементе управления), не следует пытаться ссылаться на элемент управления на странице, на которой будет располагаться пользовательский элемент управления).

Элемент <asp:AsyncPostBackTrigger> особенно полезен в том, что он может ориентироваться на любое событие из элемента управления, который существует как дочерний элемент любого элемента управления UpdatePanel в единице инкапсуляции, а не только UpdatePanel, в которой этот триггер является дочерним. Таким же может быть любой элемент управления для активации частичного обновления страницы.

Аналогичным образом элемент <asp:PostBackTrigger> можно использовать для запуска частичной визуализации страницы, но для одной, которая требует полного кругового пути к серверу. Этот элемент Trigger также может использоваться для принудительной отрисовки полной страницы, когда элемент управления в противном случае обычно запускает частичную отрисовку страницы (например, если элемент управления Button существует в элементе <ContentTemplate> элемента управления UpdatePanel). Опять же, элемент Постбакктригжер может указывать любой элемент управления, который является дочерним для любого элемента управления UpdatePanel в текущей единице инкапсуляции.

<триггеры> ссылка на элемент

Дочерние элементы разметки:

Тег Описание
<ASP: Асинкпостбакктригжер> Указывает элемент управления и событие, которое приведет к частичному обновлению страницы для UpdatePanel, содержащей ссылку на этот триггер.
<ASP: Постбакктригжер> Указывает элемент управления и событие, которое приведет к полному обновлению страницы (полное обновление страницы). Этот тег можно использовать для принудительного полного обновления, когда элемент управления в противном случае вызывает частичную визуализацию.

Пошаговое руководство. триггеры между UpdatePanel

  1. Создайте новую страницу ASP.NET с набором объектов ScriptManager, чтобы включить частичную визуализацию. Добавьте на эту страницу две UpdatePanel — в первую очередь включите элемент управления "метка" (Label1) и два элемента управления "Кнопка" (Button1 и Button2). При нажатии кнопки Button1 следует нажать кнопку "Обновить" и "Button2", чтобы обновить это или что-нибудь на этих строках. Во второй UpdatePanel включите только элемент управления Label (Ярлык2), но задайте для его свойства ForeColor значение, отличное от значения по умолчанию, чтобы отличать его.
  2. Задайте для свойства UpdateMode обоих тегов UpdatePanel значение Conditional.

Листинг 1. Разметка для Default. aspx:



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
   <head runat="server">
      <title>Untitled Page</title>
   </head>
   <body>
      <form id="form1" runat="server">
         <asp:ScriptManager EnablePartialRendering="true"
            ID="ScriptManager1" runat="server"></asp:ScriptManager>
         <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server"
               UpdateMode="Conditional">
               <ContentTemplate>
                  <asp:Label ID="Label1" runat="server" />
                  <br />
                  <asp:Button ID="Button1" runat="server"
                     Text="Update Both Panels" OnClick="Button1_Click" />
                  <asp:Button ID="Button2" runat="server"
                     Text="Update This Panel" OnClick="Button2_Click" />
               </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdatePanel ID="UpdatePanel2" runat="server"
               UpdateMode="Conditional">
               <ContentTemplate>
                  <asp:Label ID="Label2" runat="server" ForeColor="red" />
               </ContentTemplate>
               <Triggers>
                  <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
               </Triggers>
            </asp:UpdatePanel>
         </div>
      </form>
   </body>
</html>

  1. В обработчике событий Click для Button1 присвойте Label1. Text и Ярлык2. Text значение, зависящее от времени (например, DateTime. Now. Толонгтиместринг ()). Для обработчика событий Click для свойства Button2 задайте для параметра значение, зависящее от времени, только Label1. Text.

Листинг 2: CodeBehind (обрезанный) в default.aspx.cs:

public partial class _Default : System.Web.UI.Page
{
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToLongTimeString();
        Label2.Text = DateTime.Now.ToLongTimeString();
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToLongTimeString();
    }
}
  1. Нажмите клавишу F5, чтобы создать и запустить проект. Обратите внимание, что при нажатии кнопки обновить обе панели будут изменены текстовые метки. Однако при нажатии кнопки Обновить эту панель будут обновлены только метки Label1.

(Щелкните, чтобы просмотреть изображение с полным размером)

Внутренняя структура

Используя только что созданный вами пример, мы рассмотрим, что делает AJAX ASP.NET и как работают триггеры кросс-Panel UpdatePanel. Для этого мы будем работать с созданным HTML-кодом страницы, а также с расширением Mozilla Firefox, именуемым FireBug, мы легко проанализировать обратные передачи AJAX. Мы также будем использовать средство отражения .NET, Лутз (. Оба эти средства свободно доступны в Интернете, и их можно найти с помощью поиска в Интернете.

Анализ исходного кода страницы показывает практически ничего из обычного. элементы управления UpdatePanel подготавливаются к просмотру как <div> контейнеры, и мы видим, что ресурсы скрипта включают в себя <asp:ScriptManager>. Также существуют некоторые новые вызовы к PageRequestManager, относящиеся к AJAX, которые являются внутренними для библиотеки клиентских скриптов AJAX. Наконец, мы видим два контейнера UpdatePanel — один с отображаемыми <input> кнопками, в которых два элемента управления <asp:Label> отображаются как контейнеры <span>. (Если вы просматриваете дерево DOM в FireBug, вы заметите, что метки затемнены, чтобы показать, что они не создают видимого содержимого).

Нажмите кнопку обновить эту панель и обратите внимание, что верхний элемент UpdatePanel будет обновлен с учетом текущего времени сервера. В FireBug выберите вкладку Console (консоль), чтобы можно было проверить запрос. Сначала проверьте параметры запроса POST:

(Щелкните, чтобы просмотреть изображение с полным размером)

Обратите внимание, что UpdatePanel обозначает код AJAX на стороне сервера, точно то, какое дерево управления было запущено с помощью параметра ScriptManager1: Button1 элемента управления UpdatePanel1. Теперь нажмите кнопку обновить обе панели. Затем, изучив ответ, мы видим разделенный каналами набор переменных, заданных в строке. в частности, верхняя UpdatePanel, UpdatePanel1, содержит весь HTML-код, отправленный в браузер. Библиотека клиентских скриптов AJAX заменяет исходное содержимое элемента UpdatePanel на новое содержимое с помощью свойства .innerHTML, поэтому сервер отправляет измененное содержимое с сервера в виде HTML.

Теперь нажмите кнопку обновить обе панели и изучите результаты с сервера. Результаты очень похожи. обе UpdatePanel получают новый HTML с сервера. Как и в предыдущем ответном вызове, отправляется дополнительное состояние страницы.

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

Например, рассмотрим элемент управления CheckBox; Изучите Дизассемблированный код класса в .NET Reflector. Для этого убедитесь, что ваша сборка System. Web открыта, и перейдите к классу System.Web.UI.WebControls.CheckBox, открыв метод RenderInputTag. Найдите условие, проверяющее свойство AutoPostBack:

(Щелкните, чтобы просмотреть изображение с полным размером)

Если автоматическая обратная передача включена для элемента управления CheckBox (с помощью свойства AutoPostBack true), то результирующий тег <input>, таким образом, подготавливается к просмотру с помощью скрипта обработки событий ASP.NET в его атрибуте onclick. Перехват отправки формы, затем, позволяет ASP.NET AJAX внедряться в страницу неагрессивно, помогая избежать возможных критических изменений, которые могут возникнуть при использовании замены строки, возможно, неточной. Кроме того, это позволяет любому пользовательскому элементу управления ASP.NET использовать возможности ASP.NET AJAX без дополнительного кода для поддержки его использования в контейнере UpdatePanel.

<triggers> функции соответствуют значениям, инициализированным в вызове PageRequestManager для _Упдатеконтролс (Обратите внимание, что библиотека клиентских сценариев ASP.NET AJAX использует соглашение о том, что методы, события и имена полей, начинающиеся с символа подчеркивания, помечаются как внутренние и не предназначены для использования вне самой библиотеки). С его помощью можно наблюдать, какие элементы управления должны вызывать обратные передачи AJAX.

Например, давайте добавим на страницу два дополнительных элемента управления, полагая одним элементом управления за пределами UpdatePanel, и покидает одно из них в UpdatePanel. Мы добавим элемент управления CheckBox в верхней UpdatePanel и разместите DropDownList с несколькими цветами, определенными в списке. Вот новая разметка:

Листинг 3. Новая разметка

<%@ Page Language="C#" AutoEventWireup="true"
 CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head id="Head1" runat="server">
 <title>Untitled Page</title>
 </head>
 <body>
 <form id="form1" runat="server">
 <asp:ScriptManager EnablePartialRendering="true"
 ID="ScriptManager1" runat="server"></asp:ScriptManager>
 <div>
 <asp:UpdatePanel ID="UpdatePanel1" runat="server"
 UpdateMode="Conditional">
 <ContentTemplate>
 <asp:Label ID="Label1" runat="server" /><br />
 <asp:Button ID="Button1" runat="server"
 Text="Update Both Panels" OnClick="Button1_Click" />
 <asp:Button ID="Button2" runat="server"
 Text="Update This Panel" OnClick="Button2_Click" />
 <asp:CheckBox ID="cbDate" runat="server"
 Text="Include Date" AutoPostBack="false"
 OnCheckedChanged="cbDate_CheckedChanged" />
 </ContentTemplate>
 </asp:UpdatePanel>
 <asp:UpdatePanel ID="UpdatePanel2" runat="server"
 UpdateMode="Conditional">
 <ContentTemplate>
 <asp:Label ID="Label2" runat="server"
 ForeColor="red" />
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="Button1" 
 EventName="Click" />
 <asp:AsyncPostBackTrigger ControlID="ddlColor" 
 EventName="SelectedIndexChanged" />
 </Triggers>
 </asp:UpdatePanel>
 <asp:DropDownList ID="ddlColor" runat="server"
 AutoPostBack="true"
 OnSelectedIndexChanged="ddlColor_SelectedIndexChanged">
 <asp:ListItem Selected="true" Value="Red" />
 <asp:ListItem Value="Blue" />
 <asp:ListItem Value="Green" />
 </asp:DropDownList>
 </div>
 </form>
 </body>
</html>

Вот новый код программной части:

Листинг 4. код поддержки

public partial class _Default : System.Web.UI.Page
{
    protected void Button1_Click(object sender, EventArgs e)
    {
        if (cbDate.Checked)
        {
            Label1.Text = DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss");
            Label2.Text = DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss");
        }
        else
        {
            Label1.Text = DateTime.Now.ToLongTimeString();
            Label2.Text = DateTime.Now.ToLongTimeString();
        }
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        if (cbDate.Checked)
        {
            Label1.Text = DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss");
        }
        else
        {
            Label1.Text = DateTime.Now.ToLongTimeString();
        }
    }
    protected void cbDate_CheckedChanged(object sender, EventArgs e)
    {
        cbDate.Font.Bold = cbDate.Checked;
    }
    protected void ddlColor_SelectedIndexChanged(object sender, EventArgs e)
    {
        Color c = Color.FromName(ddlColor.SelectedValue);
        Label2.ForeColor = c;
    }
}

Идея этой страницы заключается в том, что раскрывающийся список выбирает один из трех цветов для отображения второй метки, что флажок определяет, как он является полужирным, и указывает, отображаются ли в метках Дата и время. Этот флажок не должен вызывать обновление AJAX, но раскрывающийся список должен быть, даже если он не размещен в UpdatePanel.

(Щелкните, чтобы просмотреть изображение с полным размером)

Как видно на приведенном выше снимке экрана, кнопка, которая была нажата, является правой кнопкой. обновите эту панель, которая обновила время в верхней части независимо от самого нижнего времени. Дата также выключается между щелчками, так как дата отображается в нижней метке. Последний интерес — цвет нижней Метки: он был обновлен более поздней, чем текст метки, что показывает, что состояние элемента управления важно, и пользователи предполагают, что он сохраняется через обратную передачу AJAX. Однаковремя не обновлялось. Время было автоматически повторно заполнено с помощью сохраняемости поля __VIEWSTATE на странице, интерпретируемой средой выполнения ASP.NET при повторной отрисовке элемента управления на сервере. Серверный код AJAX ASP.NET не распознает, в каких методах элементы управления изменяют состояние. оно просто перезаполняется из состояния представления, а затем запускает соответствующие события.

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

Сводка

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

Чтобы снизить вероятность возникновения нагрузки на сервер, рекомендуется установить свойство ChildrenAsTriggers элемента UpdatePanel в значение false, а события будут включаться, а не включать по умолчанию. Это также предотвращает возникновение ненужных событий потенциально нежелательных эффектов, включая проверку и изменение полей ввода. Эти типы ошибок могут быть трудно изолировать, так как страница обновляется прозрачно для пользователя, и причина может быть не сразу очевидна.

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

Биография

Вадим павеза является старшим разработчиком приложений .NET по адресу Терралевер (www.Terralever.com), ведущей интерактивной маркетинговой компании в темпе, AZ. Он доступен по адресу robpaveza@gmail.com, а его блог находится по адресу http://geekswithblogs.net/robp/.

Скотт Cate работал с веб-технологиями Майкрософт с 1997 и является президентом myKB.com (www.myKB.com), где он специализируется на написании приложений ASP.NET на базе знаний, посвященных программным решениям. Скотт может связаться по электронной почте по адресу scott.cate@myKB.com или в блоге по адресу ScottCate.com