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

Довольно часто на страницах сайта можно встретить блоки (например, баннеры, случайные опросы или что-то ещё), содержимое которых не зависит от содержимого остальной части страницы и, теоретически, может быть отображено не сразу, а загружено при помощи AJAX.

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

Пример 1

Создадим на сайте пользовательский элемент управления Time.ascx, который будет отображать текущее время после двухсекундной задержки.

Разместим его на странице Default.aspx и запустим пример.

После двухсекундной задержки я увидел следующие результаты:

09:04:28
09:04:30

Очевидно, что элемент управления Time.ascx своим присутствием на странице замедляет её работу. Попробуем сделать так, чтобы этот он загружался при помощи AJAX.

Пример 2

Создадим на сайте второй пользовательский элемент управления AjaxTime.ascx, который будет работать аналогично элементу управления Time.ascx с одним единственным отличием - он будет унаследован не от класса UserControl, а от класса AjaxUserControl.

Также разместим его на странице Default.aspx.

Создание класса AjaxUserControl

Сам класс AjaxUserControl не должен содержать никакого функционала. Всё что нам потребуется, это унаследовать его от базового класса UserControl и назначить ему сборщик элемента управления AjaxUserControlBuilder при помощи соответствующего атрибута.

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

Разметка, которую будет генерировать элемент управления AjaxUserControlLoader будет содержать контейнер (div) в который при помощи AJAX будет загружаться нужный элемент управления и скрипт, который будет выполнять эту загрузку.

Следующим шагом будет создание сборщика элементов управления AjaxUserControlBuilder.

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

Как я уже говорил выше сборщик элементов управления AjaxUserControlBuilder необходим для того, чтобы заменить элемент управления, объявленный в разметке, на элемент управления AjaxUserControlLoader.

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

Финальным шагом необходимо создать обработчик запросов AjaxUserControlHandler который будет возвращать разметку пользовательских элементов управления в ответ на AJAX-запросы.

Этот обработчик необходимо зарегистрировать в файле Web.config по адресу AjaxUserControl.axd в разделах system.web/httpHandlers или system.webServer/handlers.

После запуска примера, первое что я увидел:

10:59:19

А через две секунды, когда загрузился элемент управления AjaxTime.ascx:

10:59:19
10:59:21

Цель достигнута.

Скачать демо (ASP.NET 4.0, Web Site)