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="http://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>
Table
Таблицы в HTML очень распространены, так как они позволяют позиционировать элементы на странице. Серверный элемент управления задается тегами <asp:Table ID="Table1" runat="server"></asp:Table>. Мощь ASP .NET проявляется при динамическом создании таблицы. Этот элемент управления в ASP .NET используется реже, так как элемент DataGrid позволяет получить те же результаты, имея к тому же привязку к данным.
Свойство Rows таблицы является контейнером строк — элементов TableRow, а они, в свою очередь, имеют свойство Cell — коллекцию элементов TableCell. Сам TableCell — контейнер любых элементов управления. Их нельзя вставлять в таблицу иначе, чем в один из элементов TableCell. Текст в ячейку можно записать через свойство Cell.Text или вставкой элемента Literal.
Строки таблицы могут быть также типа TableHeaderRow и TableFooterRow. Такие строки всегда отображаются на мобильных устройствах с небольшим экраном, даже если таблица большая и для ее просмотра нужна прокрутка. Ячейки таблицы могут быть типа TableHeaderCell — наследника TableCell. Текст в них отображается выделенным полужирным шрифтом и центрирован.
В ASP .NET 2.0 у элемента появилась возможность задавать заголовки с помощью свойства Caption. Местоположение заголовка определяется свойством CaptionAlign. При значении Bottom он будет находится под таблицей. При остальных значениях заголовок находится где ему положено — наверху, Left и Right просто выравнивают у левого или правого края.
Таблицы являются абсолютно необходимым элементом, используемым для отображения данных на странице, т. к. достаточно много информации бывает представлено в виде таблиц; кроме того, с помощью таблиц возможно осуществлять разметку страницы и позиционирование элементов.
Все таблицы можно условно разделить на две группы: предназначенные для создания и отображения простых динамических таблиц и списков и предназначенные для создания сложных таблиц и списков, содержащих другие элементы управления. Обычно сложные таблицы и списки бывают связаны с источниками данных.
Использование Panel
Элемент управления Panel используется для группирования элементов управления. При этом он выступает в качестве контейнера, способного вмещать в себя различные другие элементы управления, и тем самым дает возможность манипулировать ими как единым целым. Например, возможно скрытие или показ элемента Panel со всеми входящими в него элементами путем задания значения свойства Visible равным true или false.
При размещении внутри Panel элементов для ввода текста и кнопок можно определить кнопку, используемую по умолчанию. Это означает, что при вводе текста в элементы управления, размещенные внутри Panel, пользователь имеет возможность нажать кнопку Enter, что будет равносильно щелчку левой кнопки мыши по кнопке, указанной в свойстве DefaultButton элемента Panel. Это позволяет создавать более эффективные пользовательские формы для ввода данных.
Panel облегчает размещение динамически создаваемых элементов управления на форме. И, наконец, с помощью этого элемента управления становится возможным создание областей в рамках страницы, обладающих собственными свойствами поведения и внешнего вида. Это выражается в следующем:
С помощью Panel можно создать область, содержащую полосы прокрутки. Для этого достаточно установить соответствующее значение свойства ScrollBars, а также установить необходимые значения свойств Height и Width.
С помощью Panel можно создать область группы с заголовком. Для этого необходимо ввести в свойство GroupingText строку заголовка группы. Пример изображения группы, получаемой в этом случае, приведен на рис. 5.35.
Рис. 5.35. Пример изображения группы элементов
Следует отметить, что при установке свойства GroupingText становится невозможным использование полос прокрутки.
С помощью Panel можно создать область страницы, имеющую отдельно заданные свойства, такие как цвет фона, рамка и т. д.
В следующем примере создается простейшая форма авторизации пользователя на сайте. При вводе имени пользователя и пароля, а также щелчке по кнопке "Войти" (либо нажатии Enter), введенные данные сравниваются с хранящимися в коде программы. В случае, если данные совпадают, панель, содержащая элементы управления, скрывается, а вместо нее выводится приветственное сообщение. Исходный код страницы выглядит следующим образом:
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
<br />
<br />
<asp:panel ID="Panel1" runat="server" height="118px"
width="215px" DefaultButton="btn_Enter">
<asp:Label ID="Label2" runat="server" Text=
"Имя "></asp:Label>
<asp:TextBox ID="tb_Name" runat="server"></asp:TextBox><br />
<br />
<asp:Label ID="Label3" runat="server" Text="Пароль">
</asp:Label>
<asp:TextBox ID="tb_Password" runat="server" TextMode=
"Password"></asp:TextBox><br />
<br />
<asp:Button ID="btn_Enter" runat="server" OnClick=
"btn_Enter_Click" Text="Войти" /></asp:panel>
</div>
</form>
</body>
Исходный код процедуры нажатия на кнопку, осуществляющий проверку введенных данных, представлен ниже.
protected void btn_Enter_Click(object sender, EventArgs e)
{
if (tb_Name.Text == "user" && tb_Password.Text == "12345")
{
Panel1.Visible = false;
Label1.Text = tb_Name.Text + " успешно вошел в систему.";
}
else
{
Label1.Text = "Неверное имя или пароль";
Label1.ForeColor = System.Drawing.Color.Red;
tb_Name.Text = "";
}
}