5.5. Серверные элементы управления

Важным элементом технологии ASP.NET являются серверные элементы управления (server controls). Серверный элемент управления – это некий класс, объект которого агрегирован в страницу, то есть является полем класса-страницы. При выполнении страницы серверный элемент, как правило, транслируется в HTML-элемент управления.

Библиотека серверных элементов насчитывает порядка сотни классов. Условно все элементы можно разделить на следующие группы:

1. Серверные HTML-элементы – базирующиеся на сервере эквиваленты обычных HTML-элементов. Имеют те же атрибуты, что и обычные HTML-элементы.

2. Элементы управления Web Controls – набор элементов, равнозначный обычным HTML-элементам формы <form>. Имеют расширенный набор свойств и событий, облегчающий создание страницы.

3. Проверочные элементы управления – набор специальных элементов для проверки корректности значений, вводимых в другие элементы на странице. Выполняют проверку на стороне клиента, на стороне сервера или в обоих местах.

4. Списковые элементы управления – обеспечивают различные способы построения списков. Помимо этого, списковые элементы могут быть связаны с данными, хранящимися как в локальных структурах, так и в базах данных.

5. Развитые элементы управления ASP.NET – создают сложные, специфичные для задач выходные данные (например, календарь или меняющийся баннер).

6. Мобильные элементы управления – используются при построении приложений ASP.NET для мобильных платформ.

Для всех серверных элементов управления справедливы следующие замечания. Настройку таких элементов можно выполнять программно в методах страницы. Как правило, при работе с визуальными элементами используется IDE, облегчающее настройку. В частности, для элементов и страницы имеется окно свойств и событий. Важно понимать, что значения свойств элементов транслируются в описании страницы в соответствующие атрибуты. Например, следующий фрагмент страницы показывает, что у элемента <asp:Button> (кнопка) заданы свойства ID (идентификатор элемента, имя поля в классе страницы), Text (надпись на кнопке), OnClick (имя метода-обработчика события):

<asp:Button ID="B1" OnClick="B1_Click" runat="server" Text="Send" />

При задании серверного элемента на странице используется соответствующий тэг с обязательным атрибутом runat="server".

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

<asp:Label id="Label1" runat="server">

No Name

</asp:Label>

Рассмотрим набор серверных HTML-элементов. Они представлены классами из пространства имен System.Web.UI.HtmlControls. Базовым классом для всех серверных HTML-элементов является класс HtmlControl. Основные элементы данного класса перечислены в таблице 40.

Таблица 40

Элементы класса System.Web.UI.HtmlControls

Имя элемента	Описание
Attributes	Возвращает коллекцию пар имя-значение для всех атрибутов в файле .aspx для элемента управления. Может использоваться для чтения и установки нестандартных атрибутов
Controls	Объект типа ControlCollection. Содержит ссылки на элементы управления, являющиеся «дочерними»1 для данного
Disabled	Булево значение; показывает, отключен ли элемент
EnableViewState	Булево значение, которое управляет поддержкой сохранения состояния в элементе и его «потомках». По умолчанию – сохранение состояния включено (true)
ID	Свойство задает строку-идентификатор элемента управления (имя поля в классе-странице)
Page	Ссылка на объект Page, содержащий элемент управления
Parent	Ссылка на родительский элемент в страничной иерархии
Style	Коллекция свойств CSS, которые будут добавлены к тэгу элемента при отображении. Позволяет настраивать внешний вид элемента
TagName	Строка, имя HTML-тега, который соответствует элементу
Visible	Булево значение; показывает, виден ли элемент на странице
DataBind()	Метод выполняет связывание данных для элемента управления и всех его потомков
FindControl()	Метод позволяет найти элемент управления в коллекции элементов-потомков данного
HasControls()	Метод возвращает true, если элемент управления имеет потомков
DataBinding	Данное событие происходит при связывании данных

Класс HtmlContainerControl – это второй базовый класс для серверных HTML-элементов. Он используется как предок теми элементами, которые должны иметь закрывающий тэг (то есть обязательно образуют секцию в описании страницы). Данный класс наследуется от класса HtmlControl и имеет два полезных свойства:

• InnerHtml – строка с HTML-содержимым и текстом, заключенным между открывающим и закрывающим тэгом элемента;

• InnerText – строка только с текстовым содержимым элемента.

Далее приведена таблица, содержащая краткое описание серверных HTML-элементов.

Таблица 41

Серверные HTML-элементы

Имя элемента	Описание	Специфичные свойства и события
HtmlAnchor	Ссылка на страницу или часть страницы	Href, Target, Title, Name, OnServerClick
HtmlImage	Изображение на странице с настраиваемыми параметрами	Align, Alt, Border, Height, Src, Width
HtmlForm	Обрамляющая форма для других элементов управления	Name, Enctype, Method, Target
HtmlButton	Кнопка-контейнер (не поддерживается браузерами Opera и Navigator)	CausesValidation, OnServerClick
HtmlInputButton	Кнопка на форме	Name, Type, Value, CausesValidation, OnServerClick
HtmlInputText	Текстовое поле	MaxLength, Name, Size, Type, Value, OnServerChange
HtmlInputCheckBox	Переключатель-флаг	Checked, Name, Type, Value, OnServerChange
HtmlInputRadioButton	Один из группы взаимно исключающих переключателей	Checked, Name, Type, Value, OnServerChange
HtmlInputImage	Изображение на странице, которое допускает щелчок (как кнопка Submit)	Align, Alt, Border, Name, Src, Type, Value, CausesValidation, OnServerClick
HtmlInputFile	Реализует возможность копирования файлов на сервер	Accept, MaxLength, Name, PostedFile, Size, Type, Value
HtmlInputHidden	Невидимое поле на странице (для передачи служебных значений)	Name, Type, Value, OnServerChange
HtmlTextArea	Текст, состоящий из нескольких строк	Cols, Name, Rows, Value, OnServerChange
HtmlSelect	Списковый элемент управления	Multiple, SelectedIndex, Size, Value, DataSource, DataTextField, DataValueField Items (коллекция), OnServerChange
HtmlTable	Таблица	Align, BgColor, Border, BorderColor, CellPadding, CellSpacing, Height, NoWrap, Width Rows (коллекция)
HtmlTableRow	Строка таблицы	Align, BgColor, Border, BorderColor, Height, VAlign Cells (коллекция)
HtmlTableCell	Ячейка таблицы	Align, BgColor, Border, BorderColor, ColSpan, Height, NoWrap, RowSpan, VAlign, Width

Обсудим некоторые свойства и события элементов. Если булево свойство CausesValidation установлено в true, то при щелчке на элементе управления выполняется проверка страницы (о проверочных элементах будет рассказано ниже). Элементы управления HtmlAnchor, HtmlButton, HtmlInputButton, HtmlInputImage генерируют событие OnServerClick, которое происходит при нажатии на элементе. Обработчик данного события выполняется на сервере и получает два параметра. Первый – ссылка на объект, породивший событие, откуда можно получить ID источника события. Второй – объект типа EventArgs с дополнительной информацией о событии. Элементы HtmlInputText, HtmlInputCheckBox, HtmlInputRadioButton, HtmlInputHidden и HtmlSelect генерируют событие OnServerChange. Событие порождается, когда страница передается на сервер, для каждого элемента, чье значение изменилось с момента отправки клиенту страницы.

Рассмотрим пример страницы с некоторыми серверными HTML-элементами. Страница демонстрирует настройку отдельных свойств элементов, а также наличие обработчиков событий.

<%@ Page Language="C#" %>

<script runat="server">

void Page_Load(object sender, EventArgs e) {

if (!IsPostBack) Radio1.Checked = true;

}

void Submit1_Click(object sender, EventArgs e) {

DIV1.InnerHtml += "Name is " + Text1.Value + "<br />";

}

void Radio1_Change(object sender, EventArgs e) {

if (Radio1.Checked)

DIV1.InnerHtml += "Have an ID" + "<br />";

else DIV1.InnerHtml += "Dont have an ID" + "<br />";

}

</script>

<html>

<body>

<form id="form1" runat="server">

<div>

Your name:

<input id="Text1" runat="server" type="text" />

<br /><br />

Password:

<input id="Pass1" runat="server" type="password" />

<br /><br />

Have an ID?

<input id="Radio1" runat="server" type="radio"

onserverchange="Radio1_Change" />

Yes

<input id="Radio2" runat="server" type="radio"

onserverchange="Radio1_Change" />

No

<br /><br />

<input id="Submit1" type="submit" value="Submit!"

onserverclick="Submit1_Click" runat="server" />

<br /><br />

</div>

</form>

</body>

</html>

Вид страницы в браузере после заполнения полей и нажатия кнопки Submit показан на рисунке 17.

Рис. 17. Страница с серверными HTML-элементами в браузере