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

Серверные элементы управления (СЭУ) являются базовой частью архитектуры ASP.Net Web Forms. По существу, СЭУ – это классы библиотеки платформы .Net Framework, которые выполняют решение некоторых небольших стандартных задач и представляют визуальный интерфейс web-формы. Некоторые из этих классов являются достаточно простыми и непосредственно соответствуют некоторому HTML-тэгу (HTML-элементу управления). Другие СЭУ являются сложными и формируют набор HTML-тэгов и скрипт на языке JavaScript.

Серверные элементы управления должны обязательно располагаться внутри HTML-элемента form, имеющего атрибут runat-'server" (т. е. данный элемент является серверным HTML-элементом).

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

Все серверные элементы управления делятся на HTML-элементы управления и web-элементы управления (или web-ЭУ).

Серверные web-элементы управления

Наиболее часто используемыми серверными ЭУ являются серверные web-ЭУ. Они имеют большие возможности для создания пользовательского интерфейса и организации взаимодействия пользователей с web-формой. Всего в ASP.Net имеется более 50 таких элементов управления. Серверные элементы управления в шаблоне web-формы (файл *.aspx) задаются с помощью специальных серверных тэгов, имеющих в простом случае следующий вид:

<asp:[имя_эл-та] id= [имя] [атр1]=[знач1] [атр2]=[знач2] ... runat=“server” >

<asp:[имя_эл-та]

У всех серверных ЭУ имеется префикс "asp:", который указывает, что данный тэг является не HTML-тэгом, а обрабатывается на стороне web-сервера. Атрибуты ЭУ соответствуют свойствам и событиям объектов, которые для них создаются. Запись атрибутов должна соответствовать следующим основным требованиям:

  • • для каждого серверного ЭУ должны быть заданы атрибуты id = "имя'' и runat-"server";
  • • атрибуты разделяются пробелами, и порядок их следования произвольный;
  • • атрибуты, соответствующие событиям, имеют название "on[имя_события]", и их значением является название метода, выполняющего обработку данного события.

Например, описание серверного элемента Button (кнопка), включенного в шаблон формы, будет выглядеть следующим образом: <asp:Button id="Button1" text="Button" onclick="Button1_Click” runat-"server'' />

Как видно из этого примера, после префикса asp: следует тип элемента управления Button, который соответствует классу Button, описанному в

.NET Framework; значение атрибута id задает имя объекта Buttonl, с помощью которого к нему можно обращаться в программном коде; атрибута text используется для задания соответствующего свойства у объекта Buttonl, а с помощью атрибута onclick задается имя метода, выполняющего обработку события click (щелчок).

Все обработчики события для ЭУ должны иметь стандартную сигнатуру (такую же как и для Windows ЭУ). Например, обработчик событий для нажатия кнопки может иметь следующий вид:

protected void Button1_Click(object sender, EventArgs e) {

Labell.Text = "Добрый день " + TextBoxl.Text +

Label 1 .Visible = true:

}

Все серверные ЭУ, а также и класс Page, являются производными от базового класса Control из пространства имен System.Web.UI, поэтому все они наследуют его свойства и методы (табл. 4.3).

Таблица 4.3

Основные свойства и методы базового класса Control

Свойство

Описание

ID

Имя ЭУ, с помощью которого к нему можно обращаться

Page

Ссылка на объект Раде, который содержит данный ЭУ

Parent

Ссылка на родительский объект (Раде или Control), который содержит данный ЭУ

Visible

Логическая переменная, которая определяет, показывать ли данный ЭУ на форме; если значение false, то ЭУ неви́дим на данной странице

Controls

Коллекция ЭУ, расположенных на web-форме или в ЭУ. Элемент управления (например. Panel), содержащийся в данной коллекции, сам может включать свои дочерние ЭУ

BackColor

Получить или задать фоновый цвет

BorderColor

Получить или задать цвет рамки

BorderStyle

Одно из значений перечисления BorderStyle: Dashed. Dotted. Double. Groove. Ridge. Inset, Outset. Solid и None

BorderWidth

Получить или задать ширину границы

CssClass

Задает класс CSS-стиля, используемого ЭУ

Enabled

Получить или задать состояние ЭУ. Если false, то элемент неактивный и показывается серым цветом

Font

Возвращает объект с информацией о шрифте, используемом для ЭУ, показывающего текст

ForeColor

Получить или задать цвет ЭУ

Tooltip

Получить текстовое сообщение, которое отображается, когда пользователь проводит мышью над данным ЭУ

Height

Получить или задать высоту ЭУ

Width

Получить или задать ширину ЭУ

FindControl()

Поиск дочернего ЭУ с заданным именем в текущем ЭУ и во всех содержащихся в нем ЭУ. Если такой дочернин ЭУ будет найден, то возвращается ссылка общего типа, которую нужно преобразовать к требуемому типу

HasCon-

trols()

Проверка, имеет ли данный ЭУ дочерние ЭУ. Данный ЭУ должен быть контейнерным ЭУ, чтобы иметь дочерние ЭУ (например, гаким, как Panel)

DataBind()

Связывание ЭУ и всех его дочерних ЭУ с заданным источником данных

RenderControl()

Формирование HTML-кода для данного ЭУ на основе текущего состояния. Этот метод напрямую нс вызывается, а его вызывает объект Раде при создании HTML-кода всей страницы

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

У каждого серверного ЭУ имеется набор связанных с ним событий. При выполнении пользователем каких-то действий с соответствующим ему HTML-кодом, инициируются события. Все события серверных ЭУ делятся на два типа:

  • события-действия, которые вызывают немедленную обратную отправку запроса на web-сервер, например событие Click у ЭУ Button;
  • события-изменения, которые по умолчанию не вызывают немедленную обратную отправку запроса на web-сервер, примерами таких событий являются TextChanged (изменение текста в TextBox), CheckedChanged (изменения состояния элемента CheckBox) или SelectedlndexChanged (изменение выбранного пункта в элементе ListBox или ComboBox).

События-изменения не вызывают обратной отправки на web-ссрвер для немедленной обработки. Их обработка будет выполняться после того, как произойдет событие-действие (по умолчанию это нажатие кнопки типа submit). Однако при обработке событий на сервере вначале выполняется обработка событий-изменений (не в порядке их появления в браузере, а в порядке следования соответствующих ЭУ в шаблоне) и только после этого обрабатывается событие-действие.

Событие-изменение элемента управления можно сделать событием-действием. Для этого в описании данного ЭУ нужно задать атрибут

AutoPostBack-'true". В этом случае, при возникновении в браузере события-изменения, будет выполняться немедленная обратная отправка (это делается с помощью скрипта, который вызывает отправку данных формы на сервер). Например, если в описание ЭУ TextBox включить атрибут AutoPostBack-"true":

<asp:TextBox ID=”TextBox1'' runat-'server" AutoPostBack="True">

Иванов Петр </asp:TextBox>

то при изменении содержания данного элемента и переходе к другому ЭУ будет выполняться событие-действие, приводящее к обратной отправке запроса на сервер.

Классификация серверных web-элементов управлении

В ASP.Net имеется достаточно много серверных web-ЭУ. Невозможно быстро освоить все серверные ЭУ. В связи с этим важно понимать их классификацию и возможные области применения. Серверные web-ЭУ можно классифицировать по их форме и по выполняемым функциям.

По выполняемым функциям серверные web-элементы управления можно разделить на следующие группы:

  • стандартные элементы управления (группа Standard), предназначенные для создания базового интерфейса;
  • проверочные элементы управления (группа Validation), позволяющие выполнять проверку вводимых пользователями данных на стороне клиента и сервера;
  • элементы управления для выполнения навигации (группа Navigation) по web-приложению, позволяющие организовывать переходы пользователей между web-формами приложения для решения различных задач;
  • элементы управления для работы с данными (группа Data), позволяющие показывать и организовывать работу пользователей с базами данных;
  • элементы управления поддержки безопасности работы пользователей (группа Login) с web-приложснисм, позволяющие выполнять аутентификацию и авторизацию пользователей.

Каждый web-элемент управления в результате обработки web- формы формирует HTML-код, который включается в ответ пользователю, а также он имеет набор свойств и событий.

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

По форме все серверные ЭУ можно разделить на простые и составные. Составные ЭУ могут включать подэлементы, которые описывают используемые данные и шаблон их отображения. Примером составных ЭУ являются списочные ЭУ (list contros), которые показывают заданный список элементов данных или набор элементов из источника данных (записей) с использованием для каждого из них фиксированного шаблона. Все списочные ЭУ наследуются от базового класса ListControl и предоставляют фиксированный, встроенный шаблон отображения элементов данных. Списочные ЭУ могут включать подэлементы asp:Listltem, которые содержат одно значение списка.

К списочным ЭУ относятся:

  • • ListBox – показывает список элементов, из которых пользователь может выбрать один или несколько;
  • • DropDownList – выпадающий список элементов (combo box);
  • • CheckBoxList – список флажков, у которых можно задать состояние "выбран/не выбран";
  • • RadioButtonList – список альтернатив, из которого пользователь может выбра ть одно значение;
  • • BulletedList – маркированный список элементов.

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

<asp:BulletedList runat-"server" bulletstyle="Square''>

<asp:Listltem>Раз</asp:Listltem>

<asp:Listltem>Два</asp:Listltem>

<asp:Listltem>Три</asp:Listltem>

</asp: BulletedList>

Далее в пособии будут рассматриваться и другие составные ЭУ, в особенности при пояснении работы с данными, например GridView и ListView.

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

Описание некоторых стандартных web-ЭУ приведено в табл. 4.4.

Таблица 4.4

Основные классы стандартных web-ЭУ

Тэг серверного ЭУ

Сформированным

HTML-код

Основные свойства и события

<asp:Button>

"input type="submit'7> или

"input type="button7>

Text, CausesValidation, PostBackUrl, ValidationGroup; событие: Click

<asp:CheckBox>

"input

type="checkbox7>

AutoPostBack, Checked, Text, TextAlign: событие: CheckedChanged

<asp:Filellpload>

<input type="file">

FileBytes, FileContent, FileName, HasFile, PostedFile; метод: SaveAsQ

<asp:lmage>

<img/>

AlternateText, ImageAlign, ImageUrl

<asp:lmageButton>

<input type="image"/>

CausesValidation, ValidationGroup; событие Click

<asp:lmageMap>

<map>

HotSpotMode, HotSpots (коллекция), AlternateText, ImageAlign, ImageUrl

<asp:HiddenField>

<input type-'hidden">

Value

<asp:HyperLink>

<a>...</a>

ImageUrl, NavigateUrl, Target, Text

<asp:Label>

<span>...</span>

Text, AssociatedControllD

<asp:LinkButton>

<a><img/></a>

Text, CausesValidation, Validation- Group: событие Click

<asp:Panel>

<div>...</div>

BacklmageUrl, DefaultButton, GroupingText, HorizontalAlign, Scrollbars, Wrap

<asp:RadioButton>

<input type="radio"/>

AutoPostBack, Checked, GroupName, Text, TextAlign: событие CheckedChanged

<asp:Panel>

<div>...</div>

BacklmageUri, DefaultButton, GroupingText, HorizontalAlign, Scrollbars, Wrap

<asp:RadioButton>

"input type="radio'7>

AutoPostBack, Checked, GroupName, Text, TextAlign; событие CheckedChanged

<asp:TextBox>

"input type="text"/> или "textarea> ..."/textarea>

AutoPostBack, Columns, MaxLength, Readonly, Rows, Text, TextMode, Wrap; событие TextChanged

 
< Пред   СОДЕРЖАНИЕ     След >