Проф. В.К.Толстых, www.tolstykh.com Применение ASP.NET AJAX Extensions Asynchronous JavaScript And XML (Асинхронный JavaScript и XML) Основано на существующих. - презентация

1 проф. В.К.Толстых, Применение ASP.NET AJAX Extensions Asynchronous JavaScript And XML (Асинхронный JavaScript и XML) Основано на существующих технологиях – JavaScript, DOM браузера, CSS и XMLHttpRequest Document Object Model используется в браузерах начиная с версии HTML 4.0 Из цикла лекций «Технологии разработки Internet-приложений» для студентов 4-го курса кафедры Компьютерных технологий физического факультета Донецкого национального университета

2 Пользователь Сервер 1) Запрос страницы с Веб-формой 2) Получение страницы 3) Заполнение и отправка данных формы 4) Получение страницы - результатов обработки Классическая модель Web-приложения

3 Модель Web-приложения с использованием AJAX ПользовательПользовательСерверСервер 1) Запрос страницы с Веб-формой 2) Получение страницы 3) AJAX: Запрос некоторых данных (не всей формы) у сервера и обновление соответствующих DOM элементов HTML-страницы в браузере без перезагрузки всей страницы 3) AJAX: Запрос некоторых данных (не всей формы) у сервера и обновление соответствующих DOM элементов HTML-страницы в браузере без перезагрузки всей страницы

4 Обновление страницы при использовании AJAX 1. Пользователь вводит данные; 2. При помощи JavaScript отправляется запрос на сервер, содержащий необходимую информацию о действиях пользователя; 3. Сервер отправляет необходимые данные клиенту (простой текст, HTML- код или.NET-классы, сериализованные* в JavaScript объекты); 4. На клиенте текст, HTML-код вставляется в соответствующий DOM- элемент страницы, который теперь по-новому отображается в браузере. Если от сервера пришли сериализованные объекты, они десериализуются и на их основе генерируются новые деревья элементов DOM; 5. Пользователь может вновь модифицировать данные или добавить новые, которые затем снова могут быть отправлены на сервер. Таким образом, полной перезагрузки страницы не происходит. * - Сериализация процесс перевода какой-либо структуры данных в последовательность битов.

5 Преимущества Экономия трафика при работе с Web-приложением, поскольку благодаря вместо загрузки всей страницы достаточно загрузить небольшую изменившуюся часть; Уменьшение нагрузки на сервер; Ускорение реакции интерфейса; Пользователь видит результат своих действий быстрее, поскольку загружается только изменившаяся часть.Недостатки Динамически создаваемые страницы не регистрируются браузером в истории посещения страниц, поэтому не работает кнопка «Назад»; Динамически загружаемое содержимое недоступно поисковикам; Старые методы учёта статистики подключений к сайтам становятся неактуальными;

6 Для того, чтобы начать работу с технологией AJAX в Visual Studio 2005/2008 необходимо установить: 1. Microsoft ASP.NET 2.0 AJAX Extensions 2. Microsoft ASP.NET 2.0 AJAX Templates for Visual Studio 2008 Создание AJAX сайта в Visual Studio После установки библиотеки необходимо создать новый Web проект, выбрав шаблон «ASP.NET AJAX-Enabled Site»

7 Серверные элементы управления UpdatePanel Update- Progress Update- Progress Timer ScriptManager ScriptManager- Proxy ScriptManager- Proxy Менеджер сценариев Частичное обновление страниц Организует работу серверной инфраструктуры AJAX на текущей странице Позволяет добавлять AJAX технологии на страницы, которые управляются Master Page или другими родительскими страницами, уже содержащими ScriptManager

8 ScriptManager ScriptManager – менеджер сценариев, организует работу большей части серверной инфраструктуры AJAX. ScriptManager реагирует на события в жизненном цикле страницы ASP.NET и использует эти события для координации работы всех элементов управления, параметров и кода ASP.NET AJAX. Любая.aspx страница может содержать только один элемент ScriptManager UpdatePanel UpdatePanel – элемент управления, представляющий собой особенную панель, которая позволяет обновлять выбранный регион страницы без её полной перезагрузки. При этом можно использовать элементы управления из стандартного набора ASP.NET, а так же и практически любые другие – обычно достаточно просто поместить их внутрь UpdatePanel, чтобы они начали работать без полной перезагрузки страницы

9 Свойства ScriptManager … …

10 UpdatePanel .

11 Триггеры Триггер панели UpdatePanel определяет событие, приводящее к обновлению элемента UpdatePanel при работе страницы в режиме частичного обновления. Ajax поддерживает 2 типа триггеров: AsyncPostBackTrigger – приводит к обновлению элемента управления UpdatePanel во время асинхронного обратного вызова. Триггеры могут указывать на элементы управления вне UpdatePanel или выше по иерархии элементов управления в родительском элементе управления. Если элемент управления, являющийся контейнером именования, используется как триггер, все его дочерние элементы управления, вызывающие обратные вызовы, ведут себя как триггеры. PostBackTrigger – вызывает выполнение регулярных обратных вызовов элементами управления на которые сделаны ссылки внутри элемента управления UpdatePanel. Эти триггеры должны быть дочерними объектами затрагиваемого UpdatePanel и не должны явно описываться как триггеры. Т. е., по умолчанию, все дочерние элементы UpdatePanel, генерирующие обратные вызовы, являются синхронными PostBackTrigger.

12 Триггеры (пример)... В данном случае обновление панели произойдет при нажатии на кнопку Button1, которая не находится внутри элемента UpdatePanel. Если бы кнопка Button1 находилась внутри UpdatePanel, то элемент в UpdatePanel добавлять не надо.

13 Timer Timer реализуется как серверный элемент, но в действительности он создает на стороне клиента таймер, выполняющий возврат данных с регулярными интервалами. Элемент Timer чаще всего используется в сочетании с UpdatePanel для обновления панели с заданной периодичностью. В следующем фрагменте определяется таймер, который инициирует ответное обращение каждую секунду: Обновление UpdatePanel через секунду

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

15 UpdateProgress (пример) АнимированныйGIF Показать через 0.5 секунды

16 Отмена обновления (пример) Идет загрузка... function cancelUpdate() { var obj = Sys.WebForms.PageRequestManager.getInstance(); if (obj.get_isInAsyncPostBack()) obj.abortPostBack(); }

17 Пример на сервере ДонНУ Panel UpdatePanel UpdateProgress Timer Image Label Красным отмечены компоненты из набора AJAX Extensions, остальные – из стандартного набора компонент Показать пример

18 Дизайн страницы в Visual Studio

19 Коды.aspx страницы в Visual Studio

20 Коды C# страницы в Visual Studio