Общие сведения о частичном обновлении страниц с помощью технологии ASP.NET AJAX

По-видимому, наиболее заметной возможностью в расширениях ASP.NET AJAX Extensions является возможность выполнения частичных или добавочных обновлений страниц без осуществления полной обратной передачи на сервер, без изменения кода и с минимальными изменениями разметки. Это дает самые разнообразные преимущества — состояние программ мультимедиа (таких как Adobe Flash или Windows Media) остается неизменным, затраты на пропускную способность снижаются и клиент не сталкивается с мерцанием, которое обычно имеет место при обратной передаче.

Введение

Технология ASP.NET корпорации Майкрософт предоставляет доступ к объектно-ориентированной модели программирования с управлением событиями объединяет ее с преимуществами компилированного кода. Однако ее серверная модель обработки имеет несколько недостатков, связанных с данной технологией:

  • Для обновления страниц необходим круговой путь на сервер, что требует обновления страницы.
  • Круговые пути не сохраняют эффекты, создаваемые JavaScript или другой клиентской технологией (такой как Adobe Flash).
  • Во время обратной передачи браузеры, отличные от Microsoft Internet Explorer, не поддерживают автоматическое восстановление позиции прокрутки. И даже в Internet Explorer при обновлении страницы присутствует мерцание.
  • Обратные передачи могут использовать значительную часть пропускной способности в связи с ростом поля формы __VIEWSTATE, особенно при работе с элементами управления, такими как GridView, или повторителями.
  • Отсутствует унифицированная модель для доступа к веб-службам с помощью JavaScript или другой клиентской технологии.

Откройте для себя расширения ASP.NET AJAX корпорации Майкрософт. Асинхронные сценарии JavaScript и XML (AJAX) — это интегрированная платформа для предоставления добавочных обновлений страниц через кроссплатформенный JavaScript, состоящий из серверного кода, который включает в себя платформу Microsoft AJAX Framework, и компонента скриптов, называющегося библиотекой скриптов Microsoft AJAX Script Library. Расширения ASP.NET AJAX также обеспечивают кроссплатформенную поддержку доступа к веб-службам ASP.NET через JavaScript.

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

Данный документ составлен на основе бета-версии 2 продукта Visual Studio 2008 и .NET Framework 3.5, которая интегрирует расширения ASP.NET AJAX Extensions в библиотеку базовых классов (в которой они были ранее доступны в виде дополнительного компонента для ASP.NET 2.0). Кроме того, в данном документе предполагается, что вы используете Visual Studio 2008, а не экспресс-выпуск Visual Web Developer; некоторые из упомянутых здесь шаблонов проектов могут быть недоступны для пользователей экспресс-выпуска Visual Web Developer.

Частичные обновления страниц

По-видимому, наиболее заметной возможностью в расширениях ASP.NET AJAX Extensions является возможность выполнения частичных или добавочных обновлений страниц без осуществления полной обратной передачи на сервер, без изменения кода и с минимальными изменениями разметки. Это дает самые разнообразные преимущества — состояние программ мультимедиа (таких как Adobe Flash или Windows Media) остается неизменным, затраты на пропускную способность снижаются и клиент не сталкивается с мерцанием, которое обычно имеет место при обратной передаче.

Возможность интеграции частичной отрисовки страницы встраивается в ASP.NET с минимальными изменениями в проекте.

Обзор: интеграция частичной отрисовки в существующий проект

  1. В Microsoft Visual Studio 2008 создайте новый проект веб-сайта ASP.NET, выбрав Файл -> Создать -> Веб-узел и указав веб-сайт ASP.NET в диалоговом окне. Можно назначить ему любое имя и установить его в файловой системе или в службах IIS.
  2. Отображается пустая страница по умолчанию с базовой разметкой ASP.NET (серверная форма и директива @Page). Перетащите в элемент формы на странице метку Label1 и кнопку Button1. Для этих элементов можно установить любые свойства текста.
  3. В конструкторе дважды щелкните Button1 для создания обработчика событий кода программной части . В этом обработчике событий задайте для Label1.Text текст «Вы нажали кнопку!» .

    Пример кода 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">

       <div>

         <asp:Label ID="Label1" runat="server" Text="This is a label!"></asp:Label>

         <asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />

       </div>

      </form>

     </body>

    </html>

    Пример кода 2. Код программной части (неполный) в default.aspx.cs

    public partial class _Default : System.Web.UI.Page

    {

      protected void Button1_Click(object sender, EventArgs e)

      {

      Label1.Text = "Вы нажали кнопку!";

      }

    }

  4. Нажмите клавишу F5 для запуска веб-сайта. В Visual Studio отображается запрос на добавление файла web.config для включения режима отладки, дайте положительный ответ. При нажатии кнопки обратите внимание на то, что страница обновляется для изменения текста в метке и при перерисовке страницы возникает кратковременное мерцание.
  5. После закрытия окна браузера вернитесь в Visual Studio и перейдите на страницу разметки. Прокрутите вниз панель элементов Visual Studio и найдите вкладку «AJAX Extensions». (Если эта вкладка отсутствует из-за использования более старой версии расширений AJAX или Atlas, см. приведенный ниже обзор регистрации элементов панели элементов AJAX Extensions или установите текущую версию с помощью установщика Windows, который можно загрузить на веб-сайте).

    (Щелкните для просмотра изображения в полный размер)

    • Известная проблема: если установить программу Visual Studio 2008 на компьютер, на котором уже установлена программа Visual Studio 2005 с ASP.NET 2.0 AJAX Extensions, программа Visual Studio 2008 выполняет импорт элементов панели элементов AJAX Extensions. Чтобы проверить, имела ли такая ситуация место, посмотрите на подсказки для компонентов — там должна быть указана версия 3.5.0.0. Если там указана версия 2.0.0.0, то был выполнен импорт старых элементов панели элементов и необходимо вручную импортировать их с помощью диалогового окна «Выбор элементов панели элементов» в Visual Studio. Добавление элементов управления версии 2 через конструктор невозможно.
  6. Введите строку пробелов перед началом тега <asp:Label> и дважды щелкните элемент управления UpdatePanel на панели элементов. Обратите внимание на то, что в начало страницы включена новая директива @Register, указывающая на необходимость импорта элементов управления из пространства имен System.Web.UI с помощью префикса asp: .
  7. Перетащите закрывающий тег </asp:UpdatePanel> в положение после конца элемента Button, чтобы этот элемент имел правильный формат с обернутыми элементами управления Label и Button.
  8. После открывающего тега <asp:UpdatePanel> откройте новый тег. Обратите внимание на то, что IntelliSense отображает запрос с двумя параметрами. В данном случае создайте тег <ContentTemplate>. Обязательно оберните этот тег вокруг Label и Button для обеспечения правильного формата разметки.

    (Щелкните для просмотра изображения в полный размер)

  9. В любом месте внутри элемента <form> вставьте элемент управления ScriptManager, дважды щелкнув элемент ScriptManager на панели элементов.
  10. Измените тег <asp:ScriptManager>, чтобы он включал в себя атрибут EnablePartialRendering= true.

    Пример кода 3. Разметка для default.aspx с включенной частичной отрисовкой

    <%@ Page Language="C#" AutoEventWireup="true"

     CodeFile="Default.aspx.cs"

     Inherits="_Default" %>

    <%@ Register Assembly="System.Web.Extensions,

     Version=1.0.61025.0, Culture=neutral,

     PublicKeyToken=31bf3856ad364e35"

     Namespace="System.Web.UI" TagPrefix="asp" %>

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

          <ContentTemplate>

            <asp:Label ID="Label1" runat="server" Text="Это метка!"></asp:Label>

        <asp:Button ID="Button1" runat="server" Text="Нажмите меня" OnClick="Button1_Click" />

          </ContentTemplate>

        </asp:UpdatePanel>

       </div>

      </form>

     </body>

    </html>

  11. Откройте файл web.config. Обратите внимание на то, что программа Visual Studio автоматически добавила ссылку на компиляцию в System.Web.Extensions.dll.

    • Новые возможности Visual Studio 2008: в файл web.config, поставляемый вместе с шаблонами проектов веб-сайтов ASP.NET, автоматически добавляются все необходимые ссылки на ASP.NET AJAX Extensions, кроме того, он включает в себя закомментированные разделы со сведениями о конфигурации, которые можно раскомментировать для обеспечения доступа к дополнительным функциональным возможностям. В Visual Studio 2005 при наличии установленных расширений ASP.NET 2.0 AJAX Extensions имелись схожие шаблоны. Однако в Visual Studio 2008 по умолчанию действует отказ от расширений AJAX Extensions (то есть на них по умолчанию есть ссылки, но они могут быть удалены).

    (Щелкните для просмотра изображения в полный размер)

  12. Нажмите клавишу F5 для запуска веб-сайта. Обратите внимание на то, что для обеспечения поддержки частичной отрисовки не потребовались изменения исходного кода — была изменена только разметка.

При запуске веб-сайта становится видно, что теперь частичная отрисовка включена, поскольку при нажатии кнопки отсутствует мерцание и не происходит изменения позиции прокрутки страницы (в данном примере это нельзя показано). Если вы наблюдали за отображаемым источником страницы после нажатия кнопки, вы могли убедиться в отсутствии обратной передачи — текст исходной метки все еще входит в состав исходной разметки, а сама метка была изменена через JavaScript.

В состав Visual Studio 2008 не входит предварительно заданный шаблон для веб-сайта с поддержкой ASP.NET AJAX. Однако такой шаблон был доступен в Visual Studio 2005 при наличии установленных Visual Studio 2005 и расширений ASP.NET 2.0 AJAX Extensions. Следовательно настройка веб-сайта и начало работы с использования шаблона веб-сайта с поддержкой AJAX, скорее всего, будет еще проще, поскольку этот шаблон должен включать в себя полностью настроенный файл web.config (поддерживающий все расширения ASP.NET AJAX Extensions, включая доступ к веб-службам и сериализацию JSON — нотации объектов JavaScript), и по умолчанию включает в себя UpdatePanel и ContentTemplate на главной странице веб-форм. Включение частичной отрисовки с помощью этой страницы по умолчанию выполняется так же просто, как и перетаскивание элементов управления на страницу в приведенном ранее действии 10.

Элемент управления ScriptManager

Ссылка на элемент управления ScriptManager

Свойства с поддержкой разметки:

Имя свойства Тип Описание
AllowCustomErrors-Redirect Bool Указывает, следует ли использовать раздел настраиваемых ошибок файла web.config для обработки ошибок.
AsyncPostBackError-Message String Получает или задает сообщение об ошибке, отправляемое клиенту при возникновении ошибки.
AsyncPostBack-Timeout Int32 Получает или задает время по умолчанию, в течение которого клиент ожидает выполнения асинхронного запроса.
EnableScript-Globalization Bool Получает или задает сведения о том, включена ли глобализация скриптов.
EnableScript-Localization Bool Получает или задает сведения о том, включена ли локализация скриптов.
ScriptLoadTimeout Int32 Определяет время в секундах, доступное для загрузки скриптов в клиент.
ScriptMode Enum (Auto, Debug, Release, Inherit) Получает или задает сведения о том, следует ли отображать версии выпуска скриптов.
ScriptPath String Получает или задает корневой путь к расположению файлов скрипта, которые необходимо отправить клиенту.

Свойства только для кода:

Имя свойства Тип Описание
AuthenticationService AuthenticationService-Manager Получает сведения о прокси-сервере службы проверки подлинности ASP.NET, которые отправляются клиенту.
IsDebuggingEnabled Bool Получает сведения о том, включена ли отладка скриптов и кода.
IsInAsyncPostback Bool Получает сведения о том, находится ли страница в состоянии асинхронного запроса обратной передачи.
ProfileService ProfileService-Manager Получает сведения о прокси-сервере службы профилирования ASP.NET, которые отправляются клиенту.
Scripts Collection<Script-Reference> Получает коллекцию ссылок на скрипты, которая отправляется клиенту.
Services Collection<Service-Reference> Получает коллекцию ссылок на прокси-серверы веб-служб, которая отправляется клиенту.
SupportsPartialRendering Bool Получает сведения о том, поддерживает ли текущий клиент частичную отрисовку. Если данное свойство возвращает значение false, то все запросы страницы будут стандартными обратными передачами.

Общие методы кода:

Имя метода Тип Описание
SetFocus(string) Void Устанавливает фокус клиента на определенном элементе управления после выполнения запроса.

Потомки разметки:

Тег Описание
<AuthenticationService> Предоставляет сведения о прокси-сервере службе проверки подлинности ASP.NET.
<ProfileService> Предоставляет сведения о прокси-сервере службе профилирования ASP.NET.
<Scripts> Предоставляет дополнительные ссылки на скрипты.
<asp:ScriptReference> Обозначает определенную ссылку на скрипт.
<Service> Предоставляет дополнительные ссылки на веб-службы, для которых будут созданы прокси-классы.
<asp:ServiceReference> Обозначает определенную ссылку на веб-службу.

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

Предоставление альтернативных и дополнительных скриптов

Поскольку в состав Microsoft ASP.NET 2.0 AJAX Extensions входит весь код скриптов в виде ресурсов (в том числе и отладочный вариант), внедренных в сборки, на которые указывают ссылки, разработчики могут свободно переадресовывать ScriptManager в настраиваемые файлы скриптов, а также регистрировать новые необходимые скрипты.

Чтобы переопределить привязку по умолчанию для стандартных скриптов (например, тех, которые поддерживают пространство имен Sys.WebForms и пользовательскую систему типизации), можно зарегистрировать событие ResolveScriptReference из класса ScriptManager. При вызове этого метода обработчик событий имеет возможность изменить путь к соответствующему файлу скрипта; после этого диспетчер скриптов отправляет отличную или настроенную копию скриптов клиенту.

Кроме того, ссылки на скрипты (представленные классом ScriptReference) можно включать программным способом или с помощью разметки. Для этого либо программно измените коллекцию ScriptManager.Scripts, либо включите теги <asp:ScriptReference> в тег <Scripts>, который является дочерним элементом первого уровня элемента управления ScriptManager.

Обработка настраиваемых ошибок для элементов управления UpdatePanel

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

При использовании события AsyncPostBackError можно указать свойство AsyncPostBackErrorMessage, которое вызывает отображение окна оповещения после завершения обратного вызова.

Вместо использования ока оповещения по умолчанию можно также выполнить настройку на стороне клиента; например, может потребоваться отобразить настроенный элемент <div> вместо модального диалогового окна браузера по умолчанию. В этом случае обработку ошибки можно выполнить в клиентском скрипте.

Пример кода 5. Скрипт на стороне клиента для отображения настраиваемых ошибок

<script type= text/javascript >

 <!—

 Sys.WebForms.PageRequestManager.getInstance().add_EndRequest(Request_End);

 function Request_End(sender, args)

 {

 if (args.get_error() != undefined)

 { var errorMessage = ;

 if (args.get_response().get_statusCode() == 200 )

 {

 errorMessage = args.get_error().message;

 }

 Else

 {

 // проблема не в сервере...errorMessage= Произошла неизвестная ошибка... ;

 }

 // выполнение действий errorMessage.

 // теперь необходимо убедиться, что система оповещена об обработке ошибки.

 args.set_errorHandled(true);

 }

 }

 // -->

</script>

Достаточно просто — приведенный выше скрипт регистрирует обратный вызов с использованием клиентской среды выполнения AJAX на момент выполнения асинхронного запроса. После этого он выполняет проверку на наличие возникновения ошибки, при положительном результате обрабатывает сведения о ней, а затем сообщает среде выполнения, что эта ошибка была обработана в специальном скрипте.

Поддержка глобализации и локализации

Элемент управления ScriptManager обеспечивает всестороннюю поддержку для локализации строк скриптов и компонентов пользовательского интерфейса, однако эта тема выходит за рамки настоящего документа. Дополнительные сведения см. в документе «Globalization Support in ASP.NET AJAX Extensions» (Поддержка глобализации в ASP.NET AJAX Extensions).

Элемент управления UpdatePanel

Ссылка на элемент управления UpdatePanel

Свойства с поддержкой разметки:

Имя свойства Тип Описание
ChildrenAsTriggers bool Указывает, вызывают ли дочерние элементы управления автоматическое обновление при обратной передаче.
RenderMode enum (Block, Inline) Указывает способ визуального представления контента.
UpdateMode enum (Always, Conditional) Указывает, выполняется ли обновление UpdatePanel всегда во время частичной отрисовки или только при срабатывании триггера.

Свойства только для кода:

Имя свойства Тип Описание
IsInPartialRendering bool Получает сведения о том, поддерживает ли UpdatePanel частичную отрисовку для текущего запроса.
ContentTemplate ITemplate Получает шаблон разметки для запроса на обновление.
ContentTemplateContainer Control Получает программный шаблон для запроса на обновление.
Triggers UpdatePanel-
TriggerCollection
Получает список триггеров, сопоставленных с текущим элементом управления UpdatePanel.

Общие методы кода:

Имя метода Тип Описание
Update() Void Программно обновляет заданный элемент управления UpdatePanel. Позволяет серверному запросу активировать частичную отрисовку элемента управления UpdatePanel, который в остальное время неактивирован.

Потомки разметки:

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

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

Элемент управления UpdatePanel в основном работает с триггерами элементов управления — по умолчанию любой элемент управления, который содержится в ContentTemplate элемента UpdatePanel, создающем обратную передачу, регистрируется как триггер для UpdatePanel. Это значит, что UpdatePanel может работать с элементами управления с привязкой к данным по умолчанию (такими как GridView) и с пользовательскими элементами управления и их можно запрограммировать в скрипте.

По умолчанию при активации частичной отрисовки страницы все элементы управления UpdatePanel на странице обновляются независимо от того, определены ли в элементах управления UpdatePanel триггеры для такой операции. Например, если один UpdatePanel определяет элемент управления Button и выполняется щелчок этого элемента управления Button, по умолчанию обновляются все элементы управления UpdatePanel на странице. Причина этого заключается в том, что для свойства UpdateMode элемента управления UpdatePanel по умолчанию задано значение Always. Можно задать для свойства UpdateMode значение Conditional, чтобы обновление UpdatePanel выполнялось только при активации определенного триггера.

Замечания к пользовательским элементам управления

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

Один из способов выполнения этого требования при использовании пользовательских веб-элементов управления заключается в переопределении защищенного метода CreateChildControls() класса CompositeControl. Благодаря этому можно вставить UpdatePanel между дочерними элементами элемента управления и внешними компонентами, если страница поддерживает частичную отрисовку; в противном случае можно просто поместить дочерние элементы управления в экземпляр контейнера Control.

Рекомендации для UpdatePanel

Работа UpdatePanel похожа на работу черного ящика и заключается в обертывании обратных передач ASP.NET в контексте JavaScript XMLHttpRequest. Однако следует помнить о некоторых существенных особенностях его работы, которые оказывают влияние на поведение и скорость. Чтобы понять принцип работы UpdatePanel, чтобы можно было принимать обоснованные решения о необходимости его применения, следует изучить обмен AJAX. В следующем примере используется существующий сайт и браузер Mozilla Firefox с расширением Firebug (Firebug позволяет сохранять данные XMLHttpRequest).

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

(Щелкните для просмотра изображения в полный размер)

(Щелкните для просмотра изображения в полный размер)

В исходной итерации для данного приложения был построен элемент управления, который включал в себя все регистрационные данные пользователя, включая почтовый индекс, город и страну. Весь этот элемент управления был упакован в UpdatePanel и перенесен на веб-форму. Когда пользователь вводит почтовый индекс, UpdatePanel определяет это событие (соответствующее событие TextChanged серверного компонента с помощью задания триггеров или использования свойства ChildrenAsTriggers со значением true). AJAX публикует все поля в UpdatePanel, полученные FireBug (см. схему справа).

Как показано на снимке экрана, доставляются значения из каждого элемента управления в UpdatePanel (в данном случае они все пустые), а также поле ViewState. В общей сложности передается более 9 КБ данных, хотя для выполнения этого запроса фактически требовалось всего пять байтов данных. Размер ответа «раздут» еще больше: всего клиенту отправляется 57 КБ — просто для обновления текстового поля и раскрывающегося списка.

Интерес может  представлять способ обновления данного представления технологией ASP.NET AJAX. Часть ответа запроса на обновление UpdatePanel отображается слева на экране консоли Firebug; это специально составленная строка с разделением символами вертикальной черты, разбиваемая клиентским скриптом и затем собираемая на странице. В частности, ASP.NET AJAX задает свойство innerHTML клиентского элемента HTML, представляющего элемент UpdatePanel. При повторном создании модели DOM браузером возникает небольшая задержка, длительность которой зависит от объема обрабатываемой информации.

Повторное создание модели DOM приводит к возникновению дополнительных проблем:

(Щелкните для просмотра изображения в полный размер)

  • Если элемент HTML в фокусе находится в UpdatePanel, он теряет фокус. Пользователи, нажимающие клавишу TAB для выхода из текстового поля почтового индекса, ожидают, что будет выбрано текстовое поле города. Однако после обновления экрана элементом управления UpdatePanel форма уже не находится в фокусе, поэтому нажатие клавиши TAB приводит в выделению других элементов (например, ссылок).
  • Если используется любой тип специального скрипта на стороне клиента, который осуществляет доступ к элементам модели DOM, сохраненные функциями ссылки могут быть уничтожены после частичной обратной передачи.

Элементы UpdatePanel не предназначены для использования в качестве универсальных решений. Вместо этого они обеспечивают быстрое решение в определенных ситуациях, включая построение прототипов, небольшие обновления элементов управления, и предоставляют привычный интерфейс разработчикам ASP.NET, которые могут иметь достаточный опыт работы с объектной моделью .NET, но незначительный опыт работы с моделью DOM. Существует несколько альтернативных подходов, которые могут обеспечивать повышенную производительность в зависимости от сценария применения:

  • Используйте методы страницы и JSON (нотация объектов JavaScript), что позволяет разработчику вызывать статические методы на странице, как если бы выполнялся вызов веб-службы. Поскольку эти методы являются статическими, необходимость в состоянии отпадает; объект, вызывающий скрипт, предоставляет параметры, а результат возвращается в асинхронном режиме.
  • Если один элемент управления требуется использовать несколько раз в разных местах приложения, используйте веб-службу и JSON. Это не требует выполнения большого количества специальных операций и работает в асинхронном режиме.

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

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

  • Вкладывайте как можно меньше элементов управления UpdatePanel — и не только в модулях, но и между модулями кода. Например, наличие элемента управления UpdatePanel на странице, упаковывающей элемент управления, который также содержит элемент управления UpdatePanel, содержащий другой элемент управления с UpdatePanel является межмодульным вложением. Соблюдение этих рекомендаций помогает следить за тем, какие элементы должны быть обновлены, и предотвращает случайные обновления дочерних элементов управления UpdatePanel.
  • Сохраняйте для свойства Children As Triggers значение false и явным образом задавайте запускающие события. Использование коллекции <Triggers> представляет собой значительно более понятный способ обработки событий и может предотвратить неожиданное поведение, что облегчает выполнение задач обслуживания и принуждает разработчика указать явное согласие для события.
  • Используйте модули наименьшего размера для реализации функциональных возможностей. Как было замечено во время обсуждения службы почтового индекса, упаковка только абсолютного минимума снижает время взаимодействия с сервером, время обработки и объем данных при обмене между сервером и клиентом, что положительно влияет на производительность.

Элемент управления UpdateProgress

Ссылка на элемент управления UpdateProgress

Свойства с поддержкой разметки:

Имя свойства Тип Описание
AssociatedUpdate-PanelID String Задает идентификатор элемента управления UpdatePanel, о котором должен сообщить данный элемент управления UpdateProgress.
DisplayAfter Int Задает время ожидания в миллисекундах для отображения этого элемента управления после начала асинхронного запроса.
DynamicLayout bool Позволяет настроить использование динамического отображения хода выполнения операции.

Потомки разметки:

Тег Описание
<ProgressTemplate> Содержит набор шаблонов элементов управления для контента, который будет отображаться с этим элементом управления.

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

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

Выводы

Расширения Microsoft ASP.NET AJAX Extensions представляют собой сложные продукты, предназначенные для того, чтобы облегчить повышение доступности веб-контента и обеспечить расширенное взаимодействие с пользователем в веб-приложениях. Являясь частью расширений ASP.NET AJAX Extensions, элементы управления частичной отрисовки страницы, включая ScriptManager, UpdatePanel и UpdateProgress, являются наиболее заметными компонентами данного набора средств.

Компонент ScriptManager интегрирует подготовку к работе клиентской версии JavaScript для указанных расширений, а также обеспечивает совместную работу различных серверных и клиентских компонентов с минимальными затратами на разработку.

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

При использовании элемента управления UpdatePanel разработчики должны помнить о потенциальном влиянии на производительность. К возможным альтернативным способам относятся веб-службы и методы страницы, хотя при этом следует учитывать метод разработки приложения.

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

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

Биография

Скотт Кейт (Scott Cate) работает с веб-технологиями корпорации Майкрософт с 1997 года и занимает пост президента компании myKB.com (www.myKB.com), где в его обязанности входит написание приложений на базе ASP.NET, ориентированных на программные решения для баз знаний. Со Скоттом можно связаться по электронной почте (scott.cate@myKB.com) или через его блог (https://weblogs.asp.net/scottcate).