Спонсор: Microsoft
Опубликован: 30.01.2013 | Доступ: свободный | Студентов: 1198 / 140 | Длительность: 17:23:00
Теги: .net, ajax, asp, www, интранет
Лекция 12:

Создание интерактивных приложений на основе AJAX

< Лекция 11 || Лекция 12: 123

Библиотека Microsoft ASP.NET AJAX

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

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

Библиотека ASP.NET AJAX включает набор программных компонент для создания AJAX-приложений. Эти компоненты являются элементами управления ASP.NET, которые включаются в состав страницы. К таким элементам управления относятся:

  • ScriptManager;
  • ScriptManagerProxy;
  • Timer;
  • UpdatePanel;
  • UpdateProgress.

Создание AJAX-приложения начинается с размещения на странице объекта ScriptManager. Этот объект позволяет подключить к странице все необходимые клиентские сценарии, которые будут использоваться приложением для взаимодействия с сервером. В общем случае объект ScriptManager не требует какой-то дополнительной настройки.


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

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

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


Также необходимо задать обработчик для кнопки Button1. В нашем случае этот обработчик будет задавать поле Text элемента управления TextBox1.


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

В созданном выше приложении производится обработка AJAX-запроса, однако пользователь не уведомляется о том, что в данный момент производится взаимодействие с сервером. Для того, чтобы в момент обмена информацией с сервером в рамках AJAX-взаимодействия выводить уведомление пользователю следует воспользоваться элементом управления UpdateProgress. Такой элемент управления связывается с элементом UpdatePanel и информирует пользователя о взаимодействии с сервером.

Для размещения элемента управления UpdateProgress используется следующий несложный код разметки.


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

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


В нашем примере, обработчик события срабатывания таймера на сервере будет устанавливать текст в поле ввода, равным текущему времени веб-сервера.


После создания такого приложения, время, которое содержится в поле ввода, будет обновляться каждую секунду.

Аналогичным образом строятся приложения на базе ASP.NET AJAX, содержащие более сложную логику.

Краткие итоги

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

< Лекция 11 || Лекция 12: 123
Марина Воробьева
Марина Воробьева
Виктория Ткаченко
Виктория Ткаченко

Проигрыватель не работает. После нажатия кнопки Play ничего не происходит.

Андрей Коробейников
Андрей Коробейников
Россия, Новосибирск, Сибирский государственный университет телекоммуникаций и информатики, 1999
Вадим Трунов
Вадим Трунов
Россия