Технология AJAX позволяет значительно расшить возможности платформы ASP.NET.
Рассмотрим реализацию средствами ASP.NET AJAX сворачиваемого элемента или по-другому аккордеона.
Аккордеоны имеют широкое применение в веб интерфейсах. Это и выпадающие меню, и разнообразные раскрывающиеся панели, и спойлеры и т.д. Без них сложно себе представить любой современный сайт.
Перед тем как приступить к созданию аккордеона, нужно скачать и установить дополнительный набор компонентов «AJAX Control Toolkit» от DevExpress (ссылка в конце статьи). Этот набор имеет бесплатную версию, которая, тем не менее, содержит достаточно богатый арсенал средств для разработки. В том числе, необходимые для создания визуальных эффектов «расширители» (Extender).
Для аккордеона нам потребуется расширитель CollapsiblePanelExtender. В качестве примера, добавим его к элементу Panel.
Весь процесс добавления осуществляется в визуальном редакторе. Вначале кликаем по ссылке в контекстном меню (см.скриншот).
После этого в появившемся окне выбираем CollapsiblePanelExtender и нажимаем «Ok».
Расширитель добавлен, и теперь необходимо его настроить. Настройки доступны как из программного кода, так и из панели свойств элемента для которого добавлен данный конкретный расширитель.
Для работы аккордеона в обязательном порядке настраиваются два свойства:
- 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.
Разметка аккордеона:
<div> <asp:Button ID="VerticalAccordeonButton" runat="server" Text="Вертикальный аккордеон" /> <asp:Panel ID="Panel1" runat="server" BackColor="#99FF99"> <h2>Заголовок вертикального аккордеона</h2> <p>Текст аккордеона</p> <p>Текст аккордеона</p> </asp:Panel> <ajaxToolkit:CollapsiblePanelExtender ID="Panel1_CollapsiblePanelExtender" runat="server" BehaviorID="Panel1_CollapsiblePanelExtender" CollapseControlID="VerticalAccordeonButton" Collapsed="True" CollapsedSize="60" ExpandControlID="VerticalAccordeonButton" TargetControlID="Panel1" /> </div>