Списковые элементы управления

197

Списковыми элементами управления называются специализированные веб-элементы управления, которые генерируют окна списков, раскрывающиеся списки и другие элементы управления, и могут либо привязываться к источнику данных (например, к базе данных или жестко закодированной коллекции значений), либо заполняться элементами программно. Большинство списковых элементов управления позволяет пользователю выбирать один или более элементов, но элемент управления BulletedList является исключением: он отображает статический маркированный или нумерованный список.

Все списковые элементы управления перечислены ниже:

Списковые элементы управления ASP.NET
Элемент управления Описание
<asp:DropDownList> Раскрывающийся список, заполненный коллекцией объектов <asp:ListItem>. В HTML трансформируется в дескриптор <select> с атрибутом size="1"
<asp:ListBox> Окно списка, заполненное коллекцией объектов <asp:Listltem>. В HTML трансформируется в дескриптор <select> с атрибутом size="x", где х — количество видимых элементов
<asp:CheckBoxList> Элементы этого списка трансформируются во флажки, выровненные в таблице с одним или несколькими столбцами
<asp:RadioButtonList> То же, что и <asp:CheckBoxList>, но элементы трансформируются в переключатели
<asp:BulletedList> Статический маркированный или нумерованный список. В HTML он трансформируется в набор дескрипторов <ul> или <ol>. Этот элемент управления можно также использовать для создания списка гиперссылок

Все списковые элементы управления поддерживают те же базовые свойства и методы, что и другие веб-элементы управления. Вдобавок они наследуются от класса ListControl, который (помимо всего прочего) предоставляет свойства, описанные в таблице ниже. Списковые элементы управления могут заполняться данными как автоматически из какого-то источника данных, так и программным или декларативным образом.

Свойства класса ListControl
Свойство Описание
AutoPostBack Если равно true, форма автоматически отправляется обратно, когда пользователь изменяет текущий выбор
Items Возвращает коллекцию элементов ListItem (элементы также можно добавлять декларативно с помощью дескриптора <asp:ListItem>)
SelectedIndex Возвращает или устанавливает индекс выбранного элемента. В случае списков с возможностью выбора нескольких элементов вместо этого свойства следует просматривать в цикле коллекцию Items и проверять свойство Selected каждого хранящегося в ней элемента ListItem
SelectedItem Возвращает ссылку на первый выбранный ListItem. В случае списков с возможностью выбора нескольких элементов вместо этого свойства следует просматривать в цикле коллекцию Items и проверять свойство Selected каждого хранящегося в ней элемента ListItem.
DataSource Это свойство можно установить в объект, содержащий информацию, которую необходимо отобразить (например, DataSet, DataTable или коллекция). При вызове DataBind() список будет заполнен на основе этого объекта
DataMember Используется в сочетании с привязкой данных, когда источник данных содержит несколько таблиц (например, когда источником является DataSet). DataMember идентифицирует таблицу, с которой будет проводиться работа
DataTextField Используется в сочетании с привязкой данных, чтобы указать на то, какое свойство или поле источника данных должно применяться для текста каждого элемента списка
DataValueField Используется в сочетании с привязкой данных, чтобы указать на то, какое свойство или поле источника данных должно применяться для атрибута Value каждого элемента списка (который не отображается, но может быть прочитан программно для ссылки на него в будущем)
DataTextFormatString Устанавливает строку форматирования, используемую для преобразования текста элемента списка (в соответствии со свойством DataTextField)

Более того, класс элемента управления ListControl также определяет событие SelectedIndexChanged, запускающееся при изменении пользователем текущего выбора.

Событие SelectedIndexChanged и свойства SelectedIndex и SelectedItem к элементу управления BulletedList не используются.

Списковые элементы управления с возможностью выбора

К числу списковых элементов управления с возможностью выбора относятся DropDownList, ListBox, CheckBoxList и RadioButtonList, т.е. все списковые элементы управления кроме BulletedList. Они позволяют пользователям выбирать один или более содержащихся в них элементов. Проверить, какие элементы были выбраны, можно при обратной отправке страницы.

По умолчанию RadioButtonList и CheckBoxList визуализируются в множество переключателей и флажков, соответственно. Но оба этих класса предоставляют еще и несколько дополнительных свойств, которые позволяют управлять компоновкой таких повторяющихся элементов. Все эти свойства перечислены ниже:

Дополнительные свойства RadioButtonList и CheckBoxList
Свойство Описание
RepeatLayout Это перечисление указывает, как должны визуализироваться флажки или переключатели — в виде таблицы (Table), внутристрочно (Flow), в элементе <ul> (UnorderedList) или в элементе <ol> (OrderedList)
RepeatDirection Указывает, как должен визуализироваться список элементов управления — горизонтально или вертикально
RepeatColumn Устанавливает количество столбцов в случае, если для свойства RepeatLayout указано значение Table
CellPadding, CellSpacing, TextAlign Если свойство RepeatLayout установлено в Table, эти свойства конфигурируют интервалы и выравнивание ячеек таблицы

Ниже показан пример страницы, объявляющей экземпляр каждого спискового элемента управления с возможностью выбора:

<div>
            <asp:ListBox runat="server" ID="Listbox1" SelectionMode="Multiple" Rows="5">
                <asp:ListItem Selected="true">Option 1</asp:ListItem>
                <asp:ListItem>Option 2</asp:ListItem>
            </asp:ListBox>
            <br />
            <br />
            <asp:DropDownList runat="server" ID="DropdownList1">
                <asp:ListItem Selected="true">Option 1</asp:ListItem>
                <asp:ListItem>Option 2</asp:ListItem>
            </asp:DropDownList>
            <br />
            <br />
            <asp:CheckBoxList runat="server" ID="CheckboxList1" RepeatColumns="3">
                <asp:ListItem Selected="true">Option 1</asp:ListItem>
                <asp:ListItem>Option 2</asp:ListItem>
            </asp:CheckBoxList>
            <br />
            <asp:RadioButtonList runat="server" ID="RadiobuttonList1"
                RepeatDirection="Horizontal" RepeatColumns="2">
                <asp:ListItem Selected="true">Option 1</asp:ListItem>
                <asp:ListItem>Option 2</asp:ListItem>
            </asp:RadioButtonList>
            <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
</div>

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

protected void Page_Load(object sender, EventArgs e)
{
        if (!Page.IsPostBack)
        {
            for (int i = 3; i <= 5; i++)
            {
                Listbox1.Items.Add("Option " + i.ToString());
                DropdownList1.Items.Add("Option " + i.ToString());
                CheckboxList1.Items.Add("Option " + i.ToString());
                RadiobuttonList1.Items.Add("Option " + i.ToString());
            }
        }
}

Наконец, в результате щелчка на кнопке Submit выбранные элементы каждого списка отображаются на странице. Для элементов управления с одиночным выбором (DropDownList и RadioButtonList) потребуется получить доступ к свойству SelectedItem. Для других элементов, допускающих множественный выбор, следует циклически пройти по всем элементам коллекции Items и проверить, установлено ли свойство ListItem.Selected в true. Ниже показан код, решающий обе эти задачи:

protected void Button1_Click(object sender, System.EventArgs e)
{
        Response.Write("<b>Выбранные элементы в Listbox1:</b><br/>");
        foreach (ListItem li in Listbox1.Items)
        {
            if (li.Selected) Response.Write("- " + li.Text + "<br/>");
        }

        Response.Write("<b>Выбранный элемент в DropdownList1:</b><br/>");
        Response.Write("- " + DropdownList1.SelectedItem.Text + "<br/>");

        Response.Write("<b>Выбранные элементы в CheckboxList1:</b><br/>");
        foreach (ListItem li in CheckboxList1.Items)
        {
            if (li.Selected) Response.Write("- " + li.Text + "<br/>");
        }

        Response.Write("<b>Выбранный элемент в RadiobuttonList1:</b><br/>");
        Response.Write("- " + RadiobuttonList1.SelectedItem.Text + "<br/><br/><br/>");
}

Чтобы протестировать эту страницу, загрузите ее, выберите один или несколько элементов в каждом списке и щелкните на кнопке Submit. Должно получиться примерно то, что показано на рисунке:

Проверка выбранных элементов в списковых элементах управления

Чтобы отключить какой-то элемент в списке RadioButtonList или CheckBoxList, необходимо установить его свойство ListItem.Enabled в false. Этот элемент все равно будет отображаться на странице, но в затененном и недоступном для выбора виде. В случае элементов управления ListBox и DropDownList свойство ListItem.Enabled игнорируется.

Элемент управления BulletedList

Элемент управления BulletedList является серверным эквивалентом элемента <ul> (неупорядоченный список) или <ol> (упорядоченный список). Как и для всех списковых элементов управления, для него с помощью свойства Items должна устанавливаться коллекция отображаемых элементов. Вдобавок для настройки способа отображения этих элементов можно использовать свойства, перечисленные ниже:

BulletStyle

Определяет тип списка. Допустимыми значениями являются Numbered (1, 2, 3), LowerAlpha (a, b, с) и UpperAlpha (А, В, С), LowerRoman (i, ii, iii) и UpperRoman (I, II, III), а также символы маркеров Disc, Circle, Square и CustomImage (в этом случае потребуется установить свойство BulletImageUrl)

BulletImageUrl

Если BulletStyle установлено в CustomImage, это свойство указывает на изображение, расположенное слева от каждого элемента и трактуемое как маркер

FirstBulletNumber

В упорядоченном списке (с использованием стилей Numbered, LowerAlpha, UpperAlpha, LowerRoman или UpperRoman) этим свойством устанавливается первое значение. Например, при установке FirstBulletNumber в 3 список может выглядеть как 3, 4, 5 (для Numbered) или С, D, Е (для UpperAlpha)

DisplayMode

Определяет, как должен визуализироваться текст каждого элемента: как текст (значение Text, принятое по умолчанию) или как гиперссылка (значение LinkButton или HyperLink). Разница между LinkButton и HyperLink состоит в способе интерпретации щелчков.

Когда используется значение LinkButton, элемент управления BulletedList генерирует событие Click, на которое можно реагировать на сервере для выполнения навигации. Когда применяется значение HyperLink, события Click элемент управления BullettedList не генерирует, вместо этого он трактует текст каждого элемента в списке как относительный или абсолютный URL-адрес, и визуализирует все элементы в виде обычных гиперссылок. Когда пользователь щелкает на каком-то из этих элементов, браузер пытается перейти по этому URL-адресу

Если свойство DisplayMode установлено в LinkButton, можно реагировать на событие Click для определения, на каком элементе был совершен щелчок. Ниже приведен пример:

<div>
            Bullet styles:<br />
            <br />
            <asp:BulletedList BulletStyle="Numbered" DisplayMode="LinkButton" ID="BulletedList1"
                OnClick="BulletedList1_Click" runat="server">
            </asp:BulletedList>
</div>
protected void Page_Load(object sender, EventArgs e)
{
        if (!Page.IsPostBack)
        {
            foreach (string style in Enum.GetNames(typeof(BulletStyle)))
            {
                BulletedList1.Items.Add(style);
            }
        }
}

protected void BulletedList1_Click(object sender, BulletedListEventArgs e)
{
        string styleName = BulletedList1.Items[e.Index].Text;
        BulletStyle style = (BulletStyle)Enum.Parse(typeof(BulletStyle), styleName);
        BulletedList1.BulletStyle = style;
}

На следующем рисунке показаны различные значения BulletStyle. Щелчок на любом из них приводит к соответствующему обновлению списка:

Различные стили BulletedList
Пройди тесты
Лучший чат для C# программистов