Аккордеон с использованием ASP.NET AJAX

Технология AJAX позволяет значительно расшить возможности платформы ASP.NET.

Рассмотрим реализацию средствами ASP.NET AJAX сворачиваемого элемента или по-другому аккордеона.

Аккордеоны имеют широкое применение в веб интерфейсах. Это и выпадающие меню, и разнообразные раскрывающиеся панели, и спойлеры и т.д. Без них сложно себе представить любой современный сайт.

Перед тем как приступить к созданию аккордеона, нужно скачать и установить дополнительный набор компонентов «AJAX Control Toolkit» от DevExpress (ссылка в конце статьи). Этот набор имеет бесплатную версию, которая, тем не менее, содержит достаточно богатый арсенал средств для разработки. В том числе, необходимые для создания визуальных эффектов «расширители» (Extender).

Для аккордеона нам потребуется расширитель CollapsiblePanelExtender. В качестве примера, добавим его к элементу Panel.

Весь процесс добавления осуществляется в визуальном редакторе. Вначале кликаем по ссылке в контекстном меню (см.скриншот).

Добавление расширителя

После этого в появившемся окне выбираем CollapsiblePanelExtender и нажимаем «Ok».

Добавление CollapsiblePanelExtender

Расширитель добавлен, и теперь необходимо его настроить. Настройки доступны как из программного кода, так и из панели свойств элемента для которого добавлен данный конкретный расширитель.

Для работы аккордеона в обязательном порядке настраиваются два свойства:

  • CollapseControlId – id элемента сворачивающего аккордеон;
  • ExpandControlId – id элемента разворачивающего аккордеон.

Часто сворачивание и разворачивание осуществляет один и тот же элемент. Но, даже в этом случае необходимо задать оба свойства.

Из необязательных свойств при настройке работы аккордеона чаще всего используются:

  • AutoCollapse (bool) – автоматическое сворачивание аккордеона (по умолчанию false);
  • AutoExpand(bool) – автоматическое разворачивание аккордеона (по умолчанию false);
  • Collapsed (bool) – свёрнут ли аккордеон по умолчанию (по умолчанию false);
  • ExpandDirection (AjaxControlToolkit.CollapsiblePanelExpandDirection) – направления сворачивания/разворачивания. Может принимать два значения Vertical (по умолчанию) и Horizontal;
  • CollapsedSize (int32) – размер аккордеона в свёрнутом состоянии в пикселах;
  • ExpandedSize (int32) – размер аккордеона в развёрнутом состоянии в пикселах;

Последние два свойства имеют значение по умолчанию -1. Это означает, что при свёртывании аккордеон станет полностью невидимым, а при развёртывании он займёт всё пространство доступное ему в соответствии с разметкой.

Ниже приведён пример аккордеона реализованного на основе элемента Panel. В свёрнутом виде аккордеон имеет размер 60 пикселов. Для управления аккордеоном служит элемент Button.

Аккордеон в свёрнутом виде:

Свёрнутый аккордеон

Он же в развёрнутом виде:

РазвёрнутыйАккордеон

Разметка аккордеона:

 Важно отметить, что все настройки были выполнены в визуальном редакторе. То есть аккордеон был создан без единой строки программного кода. Таким образом, ASP.NET AJAX позволяет не только упростить, но и значительно ускорить процесс разработки.
Ссылки
  1. Официальная страница «AJAX Control Toolkit» на сайте DevExpress

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *