Главная страница Случайная страница
Разделы сайта
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
ListBox
|
|
Если у тега < select> указать атрибут SIZE, больший 1 (значение по умолчанию), то получим простой невыпадающий список. Ему соответствует < asp: ListBox>.
Элемент управления позволяет выбрать несколько пунктов списка одновременно. Для этого надо установить его свойство SelectionMode:
SelectionMode=" multiple"Свойство Rows устанавливает количество элементов, которые видны в листе. Если элементов больше, то появляется полоса прокрутки.
Свойство Items возвращает коллекцию элементов ListItem, которые находятся в списке. Оно позволяет определить выбранные пункты.
Представьте, что мы разрабатываем сайт туристического агентства. Посетителю предоставляется возможность выбрать несколько городов для своего маршрута из имеющегося списка. Смотрим код:
< %@ Page Language=" C#" %> < script runat=" server" > void Page_Load() { string msgCitiesList = " "; if (Page.IsPostBack) foreach (ListItem it in cities.Items) if (it.Selected) { msgCitiesList = msgCitiesList + it.Text + " < br /> "; } if (msgCitiesList! = " ") { Message.Text = " Вы выбрали следующие города: < br /> " + msgCitiesList; } else { Message.Text = " "; } } < /script> < html xmlns=" https://www.w3.org/1999/xhtml" > < head> < title> Пример ListBox< /title> < /head> < body> Какие города вы хотите включить в свой маршрут? < br /> < form id=" Form1" runat=" server" > < asp: ListBox ID=" cities" runat=" server" SelectionMode=" multiple" > < asp: ListItem> Лондон< /asp: ListItem> < asp: ListItem> Мадрид< /asp: ListItem> < asp: ListItem> Париж< /asp: ListItem> < asp: ListItem> Рига< /asp: ListItem> < /asp: ListBox> < br /> < input type=" Submit" > < p> < asp: Label ID=" Message" runat=" server" /> < br /> < /form> < /body> < /html>Событие SelectedIndexChanged имеется и тут, как и у всех классов-наследников от абстрактного класса ListControl.
Panel
Часто бывает нужно вставить элемент управления в точно определенное место страницы. Например, объединим два предыдущих примера:
< %@ Page Language=" C#" %> < %@ import Namespace=" System.Drawing" %> < script runat=" server" > void Page_Load() { Label ShopNews = new Label(); ShopNews.Text = " Новости торговой площадки"; ShopNews.Font.Size=20; ShopNews.ForeColor=Color.Red; ShopNews.BackColor=Color.LightGray; ShopNews.BorderWidth=4; ShopNews.BorderStyle=BorderStyle.Groove; ShopNews.Height=50; ShopNews.Width=500; frmDemo.Controls.Add(ShopNews); if (Page.IsPostBack) lblMessage.Text = " Вы выбрали " + Category.SelectedItem.Value; } < /script> < html xmlns=" https://www.w3.org/1999/xhtml" > < head> < title> Выбор категории товаров< /title> < /head> < body> < br/> < form id=" frmDemo" runat=" server" > Выберите категорию товаров< br /> < asp: DropDownList id=" Category" runat=" server" > < asp: ListItem> Компьютеры < /asp: ListItem > < asp: ListItem > Принтеры< /asp: ListItem > < asp: ListItem > Комплектующие < /asp: ListItem > < asp: ListItem Selected=" true" > Мониторы < /asp: ListItem > < asp: ListItem > Компакт-диски< /asp: ListItem > < /asp: DropDownList > < br/> < input type=" Submit" value=" Выбрать" > < br/> < br/> < asp: Label id=" lblMessage" runat=" server" /> < /form> < /body> < /html>
Рис. 3.2.
Эта страница работает не так, как нам хотелось. Текст оказался после выпадающего списка, хотя логичней было бы, чтобы текст шел в начале. В HTML для этого используют элемент разметки < DIV> — стандартный контейнер. Его аналог в ASP.NET:
— < asp: Panel>.Чтобы заставить метку отображаться перед списком, необходимо поместить перед DropDownList объект Panel:
< asp: Panel ID=" Panel1" runat=" server" > < /asp: Panel> < br />после чего вызывать метод Controls.Add(...) от этого объекта:
Panel1.Controls.Add(ShopNews);
Рис. 3.3.
Свойство HorizontalAlign элемента Panel полезно, если нужно установить выравнивание содержащихся в нем элементов управления. Поменяем код в предыдущем примере:
< asp: Panel ID=" Panel1" runat=" server" HorizontalAlign=" Center" width=500 />Текст теперь размещается в центре метки.
Булевское свойство Wrap элемента Panel заставляет переносить текст на новую строку, если оно установлено, или расширять раздел, когда текст не помещается в одну строку, если оно не установлено.
Если в программе установить свойство Visible панели в False, можно сделать невидимыми все элементы, которые в нем находятся. Стили, установленные в панели, наследуются всеми вложенными элементами.
Новая возможность в ASP.NET 2.0 — задавать для Panel полосы прокрутки, как бы имитируя встроенное в страницу окно. Это делается с помощью свойства ScrollBars. Он может принимать следующие значения: None, Both, Vertical, Horizontal, Auto. Если вы установите его в Auto, полосы прокрутки появятся, когда содержимое панели не умещается в ее видимые размеры:
< asp: Panel ID=" Panel1" runat=" server" Height=" 140px" Width=" 494px" ScrollBars=" Auto" HorizontalAlign=" Left" > < /asp: Panel> protected void Page_Load(object sender, EventArgs e) { for(int i=0; i< 100; i++) { Literal l=new Literal(); l.Text = " Мой дядя самых честных правил, < br> Когда не в шутку занемог< br> < br> "; this.Panel1.Controls.Add(l); } }Реализуется такая возможность с помощью атрибута css overflow:
< div id=" Panel1" style=" height: 140px; width: 494px; overflow: auto; text-align: left; " >так что подобного поведения можно было добиться, просто изменив стиль. Но ведь не все из нас знают так хорошо css, чтобы иметь понятие об overflow.
Ставить свойство ScrollBars в Vertical или Horizontal я вам не рекомендую. Генерируется overflow-x, а это не работает в браузере Opera 9.0. overflow не поддерживается IE 6.0.
Вертикальную полосу прокрутки можно установить и слева. Для этого поменяйте свойство Direction в RightToLeft.
Для Panel можно задать фоновую картинку с помощью свойства BackImageUrl.
Заключение
Серверные элементы управления предоставляют в распоряжение программиста свойства, методы и события. При их помощи мы можем абстрагироваться от деталей HTML-кода и работать со страницей и ее элементами как с объектами.
