Советы и приемы при работе с ListView - Повышение удобства пользователя с помощью средств расширения
ОГЛАВЛЕНИЕ
Повышение удобства пользователя с помощью средств расширения
Откровенно говоря, интерфейс пользователя, выдаваемый кодом на рис. 4, выглядит не слишком привлекательно. Поскольку здесь создается иерархическое представление данных, панель развертывания/свертывания была бы особенно удачным решением по улучшению обслуживания пользователей. Набор элементов управления ASP.NET AJAX Control Toolkit предоставляет готовое средство расширения, которое, если его применить к серверному элементу управления Panel («Панель»), может сделать информацию, связанную с каждым клиентом и заказом, раскрывающейся.
Используйте элемент управления CollapsiblePanelExtender для определения панели, которую сценарий будет развертывать и свертывать, в дереве управления страницы. Незачем и упоминать, что разработчику страниц здесь не нужно писать ни строчки кода на JavaScript. Весь сценарий, необходимый для развертывания и свертывания панели, вводится расширяющим элементом управления без дополнительных сообщений. Взглянем на свойства, которые может понадобиться установить на средстве расширения:
<act:CollapsiblePanelExtender runat="server" ID="CollapsiblePanel1"
TargetControlID="panelCustomerDetails"
Collapsed="true"
ScrollContents="true"
SuppressPostback="true"
ExpandedSize="250px"
ImageControlID="Image1"
ExpandedImage="~/images/collapse.jpg"
CollapsedImage="~/images/expand.jpg"
ExpandControlID="Image1"
CollapseControlID="Image1">
</act:CollapsiblePanelExtender>
Для поддержки средства расширения свертывающейся панели в код, показанный на рис. 4, необходимо ввести небольшие изменения. В частности, необходимо исправить панель с именем panelCustomerInfo для добавления кнопки, используемой для развертывания и свертывания дочернего представления. Вот один из способов переписки разметки панели:
<asp:Panel ID="panelCustomerInfo" runat="server">
<div class="customerInfo">
<div style="float: left;"><%# Eval("CompanyName") %></div>
<div style="float: right; vertical-align: middle;">
<asp:ImageButton ID="Image1" runat="server"
ImageUrl="~/images/expand.jpg"
AlternateText="(Show Orders...)"/>
</div>
</div>
</asp:Panel>
Кнопка визуализируется с использованием выровненного по правому краю изображения в той же строке, что и имя пользователя. Свойство TargetControlID на средстве расширения ссылается на панель в странице, которая будет свертываться и развертываться. Это панель, физически содержащая заказы и сведения о них. Как можно увидеть на рис. 4, это панель с именем panelCustomerDetails.
Атрибуты ExpandControlID и CollapseControlID указывают идентификаторы элементов, которые при нажатии свертывают и развертывают целевую панель. Если планируется использовать различные изображения для отображения состояния панели, необходимо также указать идентификатор элемента управления изображения. Эта информация принадлежит атрибуту ImageControlID. ImageControlID связан с двумя другими свойствами, CollapsedImage и ExpandedImage, содержащими URL-адреса изображений.
Свойство ExpandedSize устанавливает максимальную высоту в пикселях, допустимую для развернутой панели. По умолчанию содержимое, выходящее за пределы этой высоты, просто обрезается. Однако, если установить свойство ScrollContents на true, будет добавлена вертикальная полоса прокрутки, позволяющая пользователям прокручивать все содержимое.
Наконец, логическое (Boolean) свойство Collapsed (Свернуто) позволяет установить первоначальное состояние панели, а SuppressPostback указывает, должна ли операция развертывания панели проводиться полностью на стороне клиента. Когда SuppressPostback имеет значение true («истина»), обратные передачи не используются для свертывания или развертывания панели. Это значит, что обновления отображенных данных невозможны. Для относительно статичных данных, которые изменяются редко, это очевидный лучший выбор из возможных, поскольку он уменьшает мелькание страниц и сетевой трафик. Однако, если необходимо отображать данные в элементе управления более динамично, мелькание все же можно свести к минимуму, используя элемент управления UpdatePanel. На рис. 5 показан получающийся интерфейс пользователя трехуровневого представления данных.
Figure 5 Data View with Three Levels (Щелкните изображение, чтобы увеличить его)