ГГУ им. Ф. Скорины

http://www.gsu.by

Разработка Web-приложений ASP .NET с использованием
Visual Studio .NET

5. Лекция: Принципы разработки
пользовательского интерфейса интернет-приложения: версия для печати
и PDA
Рассматриваются вопросы создания
пользовательского интерфейса интернет-приложения. Рассматриваются
принципы позиционирования элементов пользовательского интерфейса,
перечисляются основные интерфейсные элементы, используемые в
ASP.NET. Рассматриваются принципы использования основных
интерфейсных элементов для вывода информации на Web-страницу, а
также организации ввода данных. Описываются возможности применения
каскадных таблиц стилей для оформления внешнего вида элемента
управления и всей страницы. Приводятся примеры динамического
управления содержимым страницы с использованием элементов
программирования, рассматриваются простейшие примеры осуществления
привязки элементов управления к данным. Рассматриваются базовые
принципы организации проверки вводимых данных.

Цель лекции: изучить принципы построения
пользовательского интерфейса, рассмотреть вопросы использования
основных серверных элементов управления, применяемых для создания
Web-приложений, рассмотреть вопросы организации ввода данных от
пользователя и их проверки.

Вопросы построения пользовательского
интерфейса являются одними из самых важных в процессе
разработки приложения. В случае разработки Web-приложения они
являются особенно актуальными, т. к. процесс создания пользовательского интерфейса здесь имеет ряд
существенных отличий от традиционных Windows-приложений. Данная
лекция предназначена для изучения основ построения интерфейса
Web-приложения.

При построении Web-приложения необходимо учитывать тот
факт, что его интерфейс отображается в окне браузера и,
следовательно, ограничен его возможностями. Кроме того, как
известно, браузер способен отображать страницу, описанную с помощью
языка HTML. На сегодняшний день использование HTML без CSS является
неэффективным, т.к. CSS способна значительно расширить базовые
возможности HTML, связанные с позиционированием элементов внутри
страницы, поэтому при рассмотрении дальнейших примеров
предполагается, что читатель владеет базовыми знаниями CSS.

Разработку пользовательского
интерфейса Web-приложения можно производить как с помощью
редактирования исходного кода страницы, так и с использованием
встроенного в Visual Studio визуального редактора. Наиболее
эффективным способом является применение комбинированного метода,
при котором в некоторых режимах редактирования целесообразно
пользоваться визуальными средствами, в других же случаях -
средствами редактирования исходного кода. Переключение этих режимов
можно осуществлять с помощью кнопок Design и Source, как было
показано на рис.
2.7.

Основной сложностью при разработке пользовательского интерфейса Web-приложения
является позиционирование его элементов. Существует четыре основных
режима размещения элементов управления Web-страницы.

Абсолютное позиционирование (absolutely positioned) позволяет
располагать элементы в точности там, куда их помещает разработчик.
При этом элементы управления имеют абсолютное положение на
странице.

Относительное позиционирование (relatively positioned) очень
похоже на абсолютное с той разницей, что позиция элемента задается
относительно элемента, имеющего статическое расположение на
странице.

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

Без заданного атрибута позиционирования (no positioning
attribute) - здесь редактором удаляется любая информация
относительно положения элемента управления. При этом используется
статическое позиционирование.

Чтобы задать способ позиционирования элементов,
необходимо открыть окно свойств Visual Studio с помощью пунктов меню
Tools Options, в открывшемся окне Options выбрать
раздел HTML Designer CSS Positioning. В открывшемся окне свойств,
изображенном на рис.
5.1, нужно выбрать соответствующий режим позиционирования.

Рис. 5.1.  Окно свойств
среды Visual Studio 2005

Статическое позиционирование рекомендуется использовать
в случае, когда расположенный на странице текст чередуется с
элементами управления.

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

<asp:Button ID="Button1" runat="server" Style="z-index: 100;
left: 436px; position: absolute;top: 187px" Text="Button" />
<asp:Button ID="Button2" runat="server" Style="left: 245px;
position: relative; top: 266px" Text="Button" />
<asp:Button ID="Button3" runat="server" Style="position: static"
Text="Button" />

Для элемента Button1
использовалось абсолютное позиционирование, для Button2 - относительное, Button3 - статическое.

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

Доступ ко всем элементам управления, в том числе и к
HTML-элементам, осуществляется посредством панели инструментов
Toolbox, которая состоит из нескольких разделов. Выбрав
соответствующий раздел, Вы получаете доступ к его элементам
управления. На рис.
5.2 представлен раздел HTML панели инструментов Toolbox.

Рис. 5.2.  Раздел HTML
окна панели инструментов

Серверных элементов управления гораздо больше, они
расположены в разделе Standart панели инструментов Toolbox (рис.
5.3).

Рис. 5.3.  Раздел
Standard панели инструментов

Если сгруппировать HTML и серверные элементы управления
по видам задач программирования, можно получить следующую таблицу [2]:

Задача

HTML-элементы

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

Отображение текста

Input
(Text), Textarea

Label,
TextBox, Literal

Отображение таблиц

Table

Table,
DataGrid

Выбор значения из списка

Select

DropDownList, ListBox, DataList,
Repeater

Исполнение команд

Input
(Button), Input (Reset), Input (Submit)

Button,
LinkButton, ImageButton

Установка значений

Input
(CheckBox), Input (Radio)

CheckBox,
CheckBoxList, RadioButton, RadioButtonList

Отображение графики

Image

Image,
ImageButton

Работа с датами

-

Calendar

Демонстрация рекламных
изображений

-

AdRotator

Отображение горизонтальной
линии

Horizontal
Rule

Literal

Получение файлов от клиентов

Input
(File)

FileUpload

Сохранение введенных на
странице данных

Input
(Hidden)

ViewState

Проверка вводимых данных

Страничные сценарии

RequiredFildValidator, RangeValidator,
RegularExpression Validator, CompareValidator,
CustomValudator,
ValidationSummary

Работа с текстом

Одной из наиболее часто возникающих задач при создании
Web-приложения является работа с текстом. Для этого существует
несколько различных способов, начиная от уже известного Response.Write("Текст") и заканчивая
использованием элемента Label или TextBox с установленным в True значением свойства ReadOnly.

Таблицы являются абсолютно необходимым элементом,
используемым для отображения данных на странице, т. к. достаточно
много информации бывает представлено в виде таблиц; кроме того, с
помощью таблиц возможно осуществлять разметку страницы и
позиционирование элементов.

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

Рассмотрим работу с серверным элементом управления Table. Так как он относится к разряду
серверных элементов, им возможно управлять в коде приложения,
добавляя и удаляя строки и столбцы, а также изменяя их содержимое.
Эти же операции можно проделать и в процесс разработки с
использованием стандартных средств визуального редактирования Visual
Studio. Для добавления элементов (столбцов и строк) к элементу Table в процессе разработки необходимо
выполнить следующие операции:

Добавить элемент Table на
страницу.

В панели Properties выбрать пункт
Rows и нажать кнопку .

В открывшемся окне TableRow Collection
Editor добавить новую строку, нажав на кнопку Add (рис.
5.4).

Рис. 5.4.  Окно
редактирования элементов строки таблицы

В свойствах строки при необходимости добавить столбцы, выбрав
пункт Cells.

Отредактировать свойства строк и столбцов, установив
необходимые параметры.

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

Номер

Наименование

Цена

1

Бумага писчая

50

2

Картон

70

3

Бумага офисная

100

необходимо установить значения свойств объекта Table, как показано ниже. После того, как
таблица добавлена на страницу, а в нее добавлены три строки, в
каждую из которых добавлено по три столбца, а в свойства Text
каждого столбца введены значения, как показано в примере, таблица в
окне браузера будет выглядеть следующим образом (рис.
5.5):

Рис. 5.5.  Результат
отображения таблицы в окне браузера

Как видно, у данной таблицы отсутствуют как внешние, так
и внутренние рамки, разделяющие ячейки. Создание рамок будет
происходить в несколько этапов.

Для создания рамки, обрамляющей всю таблицу, необходимо
установить значения для следующих свойств всей таблицы:

BorderColor=Black
BorderStyle=Solid
BorderWidth=1

В результате таблица приобретает контур, представляющий
собой сплошную линию черного цвета толщиной один пиксель (рис.
5.6).

Рис. 5.6.  Отображение
контура таблицы

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

GridLines=Both
CellPadding=1
CellSpacing=0

Открыть окно TableRow Collection Editor, затем открыть
окно установки свойств ячеек строки и для каждой ячейки установить
следующие свойства:

BorderColor=Black
BorderStyle=Solid
BorderWidth=1

В результате будет получена следующая таблица (рис.
5.7рис. 5.7):

Рис. 5.7.  Отображение
границ таблицы

Как видно, процедура установки необходимых свойств
таблицы достаточно трудоемка. Для упрощения этого процесса можно
воспользоваться возможностями каскадных таблиц
стилей CSS. В качестве примера создадим таблицу, аналогичную
ранее созданной. Для этого поместим на страницу серверный элемент
управления table и заполним его ячейки
данными. Результат будет выглядеть следующим образом (рис.
5.8):

Рис. 5.8.  Размещение на
странице серверного элемента Table

Создадим новую таблицу стилей и добавим ее к данной
Web-странице. Для этого выполним команду главного меню Website Add New Item и в открывшемся окне выберем Style
Sheet (рис.
5.9).

Рис. 5.9.  Окно
добавления к сайту таблицы стилей

После нажатия на кнопку Add Visual Studio создаст новый
файл StyleSheet.css в каталоге
Web-приложения и откроет редактор его содержимого, а также
дополнительное окно, отображающее иерархию создаваемых стилей (рис.
5.10).

Рис. 5.10.
Редактирование содержимого таблицы стилей

Видно, что в качестве заготовки создан лишь один стиль
для тела HTML-документа. Теперь мы по своему усмотрению можем
добавлять стили для различных элементов документа. Хотя файл .css представляет собой обычный текстовый
файл, Visual Studio предоставляет средства визуального создания и
редактирования стилей.

Как известно, существует три основных способа описания
стилей:

Стили самих HTML-элементов (таких как <p>, <body>,
<table> и т. д.).

Стили HTML-элементов, которым присвоены имена классов.

Стили элементов, которым присвоены идентификаторы
(ID).

Внутри Web-страницы может существовать несколько
элементов с одинаковыми именами классов, но идентификаторы всегда
являются уникальными.

Создадим новый класс, внутри которого опишем оформление
таблицы. Для этого щелкнем правой кнопкой в области окна редактора
документа стиля и в контекстном меню выберем пункт Add Style Rule,
как показано на рис.
5.11.

Рис. 5.11.  Создание
нового элемента таблицы стилей

В открывшемся окне необходимо установить переключатель
Class name, т. к. мы создаем стиль на основе класса, и ввести имя
класса, в данном случае mytable (рис.
5.12).

Рис. 5.12.  Окно
добавления нового элемента таблицы стилей

Затем необходимо нажать кнопку
для включения созданного класса в иерархию стилей и нажать OK.

Рис. 5.13.  Добавление
нового элемента таблицы стилей

Внутри созданного стиля класса щелкнуть правой кнопкой
мыши и в открывшемся контекстном меню выбрать пункт Build Style (рис.
5.14). При этом открывается окно Style Builder, с помощью
которого можно задавать значения практически любым доступным
свойствам данного элемента.

Рис. 5.14.
Редактирование стиля

В нашем примере необходимо задать значения для
следующих свойств.

В разделе Edges указать параметры для контуров таблицы,
как показано на рис.
5.15.

Рис. 5.15.  Значения
параметров раздела Edges класса mytable

В разделе Other указать значения для размещения ячеек
друг относительно друга, как показано на рис.
5.16.

Рис. 5.16.  Значения
параметров раздела Other класса mytable

В результате проделанных действий в редактируемый стиль
mytable будут добавлены следующие
параметры (рис.
5.17).

Рис. 5.17.  Результат
добавления параметров класса mytable

Для применения созданного стиля к таблице необходимо в
свойстве CssClass таблицы указать имя
класса стиля, который необходимо применить. В данном случае это
mytable. После того как эти манипуляции
будут проделаны, таблица будет выглядеть следующим образом (рис.
5.18).

Рис. 5.18.  Результат
отображения таблицы после применения к ней созданного стиля

Видно, что данный стиль был применен только к рамке
таблицы. Для настройки ячеек таблицы необходимо создать отдельный
стиль. Вообще, для каждой ячейки таблицы возможно создавать
отдельное оформление - для этого необходимо создать отдельный стиль
для каждой группы ячеек, имеющих одинаковые параметры оформления,
либо произвести настройки оформления непосредственно в самой
таблице. На практике чаще всего ячейки таблицы оформляются одинаково
за исключением ячеек заголовка таблицы, поэтому необходимо создать
стиль, который можно было бы легко применить ко всем ячейкам таблицы
примера. Для этого нужно вспомнить, как в языке HTML описываются
таблицы. Несмотря на то, что мы используем серверный элемент
управления, в конечном счете он будет представлен в виде стандартных
тегов языка HTML, в котором для описания строк используется тег
<tr>, для описания обычных ячеек в
рамках строки - <td>, ячеек строки
заголовка - <th>. Исходя из этого,
создадим стиль для обычных ячеек таблицы. Для этого необходимо
выполнить следующие операции:

Щелкнуть правой кнопкой внутри окна редактора стилей, в
открывшемся контекстном меню выбрать пункт Add Style Rule.

В окне Add Style Rule выбрать переключатель Class name и
ввести имя уже существующего класса mytable, после чего добавить его к иерархии
стилей.

Выбрать переключатель Element и в
активизировавшемся выпадающем списке выбрать тэг, отвечающий за
описание обычных ячеек - <td>,
после чего добавить его к иерархии стилей, как показано на рис.
5.19. Нажать OK.

Рис. 5.19.  Добавление
тега к существующему элементу

В результате этой операции в файл стиля будет
добавлен стиль

.mytable TD
{
}.

Щелкнуть правой кнопкой мыши внутри только что созданного
стиля и выбрать пункт Build Style.

В окне Style Builder установить параметры Borders в разделе
Edges аналогично параметрам, установленным ранее для класса mytable.

В результате проделанных действий будет получена
таблица, внешний вид которой аналогичен предыдущей. Более того,
теперь для каждой вновь создаваемой таблицы можно настроить такое же
оформление, просто указав в ее свойстве CssClass значение mytable. При необходимости что-то поменять в
оформлении таблицы необходимо изменить соответствующие настройки
стилей.

Аналогичным образом, добавив соответствующий стиль для
строки заголовка таблицы и установив свойство TableSection=TableHeader первой строки
таблицы, получим результат, изображенный на рис.
5.20.

Рис. 5.20.  Внешний вид
таблицы после применения стиля для заголовка

Добавленный стиль выглядит следующим образом:

.mytable THEAD
{
font-weight: bold;
color: white;
font-family: Arial;
background-color: black;
}

Иногда возникает необходимость изменять содержимое
таблицы на основе производимых пользователем действий. В этом случае
обойтись статическими элементами, вводимыми в таблицу на этапе
разработки приложения, невозможно. Решить данную задачу можно,
воспользовавшись механизмом добавления элементов в таблицу во время
выполнения. Здесь следует отметить, что элемент управления Table не сохраняет те элементы, которые
добавляются в него во время выполнения приложения. Это приводит к
тому, что таблицу необходимо заново создавать на основе данных,
сохраненных в переменной состояния.

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

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void btn_Add_Click(object sender, EventArgs e)
{
//Записать текст в состояние отображения страницы
ViewState.Add(ViewState.Count.ToString(), tb_TableRow.Text);
CreateTable();
}
private void CreateTable()
{
//массив слов
string[] arrWords;
//строка, состоящая из значений ячеек строки таблицы
string strWords;
TableRow newRow;
TableCell newCell;
//цикл для каждого элемента ViewState
for (int i = 0; i < ViewState.Count;i++)
{
//символ - разделитель значений полей таблицы
char[] c ={','};
//создать новую строку
newRow = new TableRow();
//извлечь из ViewState очередной элемент
strWords = ViewState[i.ToString()].ToString();
//преобразовать строку в массив, используя разделитель
arrWords = strWords.Split(c);
//цикл для каждого элемента массива слов
for (int j = 0; j <= arrWords.GetUpperBound(0); j++)
{
//создать новую ячейку таблицы
newCell = new TableCell();
//установить текст в созданную ячейку
newCell.Text = arrWords[j];
//добавить ячейку к набору ячеек строки таблицы
newRow.Cells.Add(newCell);
}
//добавить строку к таблице
t_Table1.Rows.Add(newRow);
}

}
}

Результат работы кода страницы представлен на рис.
5.21.

Рис. 5.21.  Окно
динамического добавления строк таблицы

Одними из наиболее широко распространенных элементов
управления являются "Список" и "Выпадающий список". Содержимое этих
элементов управления может быть добавлено как на этапе разработки
приложения, так и на этапе выполнения.

Для добавления содержимого к элементам управления
"Список" (listbox) и "Выпадающий список"
(dropdownlist) необходимо выполнить
одинаковые действия. Рассмотрим пример.

Добавим на созданную ранее страницу элементы управления
"Список" (ID=lb_goods) и "Выпадающий
список" (ID=ddl_goods). Добавим к
созданным элементам управления две строки: "порошок стиральный" и
"отбеливатель". Для этого необходимо выполнить следующие
действия:

Выделить элемент управления, открыть меню как показано на рис.
5.22, с помощью щелчка левой кнопки мыши, выполнить команду
Edit Items...

Рис. 5.22.  Меню
редактирования элементов ListBox

В открывшемся окне ListItem Collection Editor добавить два
новых элемента путем нажатия на кнопку Add (рис.
5.23).

Рис. 5.23.  Окно
редактора элементов объекта ListBox

Ввести в свойство Text
создаваемых элементов добавляемые строки.

Свойство Text элемента
управления содержит текст, который соответствует элементу,
добавленному в список и отображаемому в окне, свойство Value - значение этого элемента. По умолчанию
значения этих свойств равны, однако они могут быть изменены при
необходимости.

Проделав аналогичные операции для элемента управления
DropDownList, получим следующий
результат (рис.
5.24):

Рис. 5.24.  Результат
добавления элементов объекта ListBox и DropDownList

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

//Добавить элемент в ListBox
lb_goods.Items.Add(tb_TableRow.Text);
//Добавить элемент в DropDownList
ddl_goods.Items.Add(tb_TableRow.Text);

В результате введенные в текстовое поле элементы после
нажатия на кнопку "Добавить" добавляются не только в таблицу, но и в
списки, как показано на рис.
5.25.

Рис. 5.25.  Результат
динамического добавления элементов к спискам ListBox и DropDownList

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

В качестве примера добавим два элемента Label на страницу. Свойства ID элементов
установим равными lbl_ListBoxSelectedItem и lbl_DropDownListSelectedItem. Добавим также
кнопку ID=btn_ShowSelectedItems, как
показано на рис.
5.26.

Рис. 5.26.  Добавление
новых элементов на страницу в режиме дизайна

При нажатии на кнопку "Отобразить выбранные элементы" в
элементах lbl_ListBoxSelectedItem и
lbl_DropDownListSelectedItem должны
отобразиться выбранные в данный момент элементы.

Добавим обработчик события нажатия на кнопку
"Отобразить выбранные элементы". Исходный код процедуры представлен
ниже.

protected void btn_ShowSelectedItems_Click(object sender,
EventArgs e)
{
if (lb_goods.SelectedItem != null)
lbl_ListBoxSelectedItem.Text = "В элементе ListBox выбран
элемент " + lb_goods.SelectedItem.Text;
else
lbl_ListBoxSelectedItem.Text = "В элементе ListBox ничего
не выбрано";

if (ddl_goods.SelectedItem!=null)
lbl_DropDownListSelectedItem.Text = "В элементе DropDownList
выбран элемент " + ddl_goods.SelectedItem.Text;
else
lbl_DropDownListSelectedItem.Text = "В элементе
DropDownList ничего не выбрано";
}

Как видно, обращение к текущему элементу списков
происходит посредством свойства SelectedItem, предоставляющего доступ к
объекту - элементу списка. Если необходимо получить доступ к
свойству Text текущего элемента списка,
к нему возможно обратиться следующим образом: ddlgoods.SelectedItem.Text.

Результаты работы данной страницы представлены на рис.
5.27.

Рис. 5.27.  Результат
выполнения кода отображения текущего элемента списка

В реальных приложениях часто возникает необходимость
привязки значений элемента управления к какому-либо источнику
данных. Таким источником могут быть таблицы базы данных, массивы,
свойства объектов или выражения, объединяющие несколько элементов.
Рассмотрим привязку значений элемента управления DropDownList к
данным, хранящимся в строковом массиве. Привязки элементов
управления к другим источникам данных более подробно рассматриваются
в лекции
10 "Использование баз данных в приложениях ASP.NET".

Для привязки элемента управления DropDownList к данным, хранящимся в строковом
массиве, сначала необходимо создать сам массив, а также вызвать
метод DataBind(), который осуществит
привязку элемента управления к источнику данных. При вызове метода
DataBind() для всей страницы будет
осуществлена привязка всех элементов управления, расположенных на
странице, к источникам данных. Метод DataBind() проверяет все выражения на странице
и заменяет их соответствующими значениями, взятыми из указанного
источника данных. Если не вызвать этот метод, выражение привязки не
заполнит элемент управления - он просто будет отброшен в момент
преобразования страницы в HTML.

public string[] listData ={"доска","кирпич","бетон","песок"};
protected void Page_Load(object sender, EventArgs e)
{
Page.DataBind();
}

Для указания источника данных необходимо
отредактировать исходный код страницы, добавив определение источника
данных к элементу ddl_goods, как
показано в следующем фрагменте кода:

<asp:DropDownList ID="ddl_goods" runat="server"
DataSource='<%#listData %>' Width="185px">
<asp:ListItem>порошок стиральный</asp:ListItem>
<asp:ListItem>отбеливатель</asp:ListItem>
</asp:DropDownList>

Здесь было использовано выражение привязки данных, которое
располагается между ограничителями <%# %>. В качестве
выражения привязки данных не допускается использование программного
кода, это может быть значение свойства, переменная-член или функция
либо любое другое выражение, которое может быть вычислено во время
выполнения.

В данном случае, в качестве выражения привязки данных
указана переменная listData, являющаяся
именем созданного ранее массива строк. Теперь в момент запуска
приложения элемент DropDownList будет
заполнен значениями элементов массива.

ASP.NET предоставляет много других полезных элементов
управления, реализующих самые различные задачи. Рассмотрим самые
основные из них, использование которых необходимо практически в
каждом Web-приложении. Остальные будут рассматриваться в следующих
частях данного курса.

Использование элементов CheckBox, CheckBoxList, RadioButton,
RadioButtonList и BulletedList

В ряде случаев необходимо принимать от пользователя
булевые значения, для этих целей применяются элементы CheckBox, CheckBoxList, RadioButton и RadioButtonList. Элементы CheckBox и RadioButton отличаются тем, что CheckBox позволяет устанавливать значения
одного или нескольких флажков одновременно, в то время как RadioButton - только одно значение. Окончание
List говорит о том, что данный элемент
управления представляет собой целый набор флажков, объединенных в
группу. Группы флажков легче привязывать к источникам данных,
поэтому их целесообразнее использовать в случае, если флажки должны
отображать данные, находящиеся в БД, либо если с помощью них данные
должны вводиться в базу данных, либо если флажки логически связаны
между собой.

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

protected void Button1_Click(object sender, EventArgs e)
{
Response.Write("Флажок установлен в значение
"+CheckBox1.Checked.ToString());
}

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

Для получения и установки значений элементов управления
RadioButtonList и CheckBoxList необходимо последовательно
опрашивать все элементы управления списка, проверяя их значения. Для
этого очень удобно использовать цикл For
Each.

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

protected void Button1_Click(object sender, EventArgs e)
{
foreach (ListItem l in CheckBoxList1.Items)
{
if (l.Selected)
Response.Write("выбран " + l.Text + "<br/>");
}
}

Следует обратить внимание на тот факт, что элемент
управления CheckBoxList, как и RadioButtonList, содержит элементы управления
ListControl, а не CheckBox или RadioButton, как можно было бы
предположить.

Аналогичным образом производятся проверки и для
элемента RadioButtonList.

BulletedList является
аналогом HTML-элементов, предназначенных для организации
упорядоченных и неупорядоченных списков с помощью тегов <ul> и <ol> соответственно, однако позволяет
обращаться к списку программно. Для установки элементов,
отображаемых в списке, необходимо ввести их с помощью средств,
аналогичных рассмотренным ранее для CheckBoxList и RadioButtonList.

Особенностью BulletedList
является возможность настройки внешнего вида и типа элементов
списка. Основными свойствами этого элемента управления являются
следующие.

BulletedStyle

Позволяет задавать тип списка:
numbered - нумерованный, loweralpha - маленькие латинские буквы,
upperalpha - большие латинские
буквы, lowerroman - маленькие
римские цифры, upperroman -
большие римские цифры, disc, circle,
square - символы маркеров.

BulletedStyleImageUrl

Устанавливает изображение,
расположенное слева от каждого элемента списка. Для установки
изображения необходимо установить BulletedStyle= CustomImage.

FirstBulletNumber

Устанавливает значение для
первого элемента списка, относительно которого в дальнейшем
будет продолжена нумерация.

DisplayMode

Устанавливает тип элемента
списка (Text, HyperLink,
LinkButton).

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

protected void BulletedList1_Click(object sender,
BulletedListEventArgs e)
{
Response.Write("Вы щелкнули по элементу списка
"+BulletedList1.Items[e.Index].ToString());
}

Использование Image, ImageMap, ImageButton

Отображение графики на Web-странице является абсолютно
необходимым условием. ASP.NET предоставляет несколько возможностей
отображения графики.

Как фон, заполняющий всю страницу. Для этого можно
воспользоваться свойством Васkground Web-формы. Можно также
использовать свойство BackImageUrl
элемента Panel.

На переднем плане. Для этого используется элемент управления
Image.

На кнопке, способной реагировать на действия пользователя. Для
этого используется элемент управления ImageButton.

С помощью карты изображений, реализуемой посредством элемента
управления ImageMap.

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

В следующем примере при нажатии на соответствующую
кнопку отображается изображение обезьяны, лося либо кошки (рис.
5.28).

protected void btn_Monkey_Click(object sender, EventArgs e)
{
Image1.ImageUrl = "~//Images//monkey.jpg";
}

protected void btn_Elk_Click(object sender, EventArgs e)
{
Image1.ImageUrl = "~//Images//elk.jpg";
}

protected void btn_Cat_Click(object sender, EventArgs e)
{
Image1.ImageUrl = "~//Images//cat.jpg";
}

Рис. 5.28.  Смена
выводимого на экран изображения при нажатии на соответствующую
кнопку

Элемент управления ImageButton имеет встроенную возможность
реагирования на события, совершаемые пользователем. При этом в
обработчик события "щелчок левой кнопкой мыши" отправляется
специальный объект ImageClickEventArgs,
предоставляющий свойства X и Y, которые определяют место
изображения, где был совершен щелчок. Используя эти свойства, можно
создать карту изображения. Ниже показан код, который отображает
координаты точки, где был произведен щелчок мыши, а также
определяет, в пределах какой фигуры он был произведен. Результат
показан на рис.
5.29.

protected void ImageButton1_Click(object sender,
ImageClickEventArgs e)
{
string strClickFigure="";
if (!(e.X <= 380 && e.X >= 20 && e.Y <= 380 && e.Y >= 20))
strClickFigure = "рамка";
if (e.X>=60 && e.X<=210 && e.Y>=60 && e.Y<=210)
strClickFigure="квадрат";
if ((e.Y>=495-e.X) && (e.Y>=e.X-45) && e.Y<=332)
strClickFigure="треугольник";
Label1.Text = "Вы щелкнули в точке Х="+e.X.ToString()+";
Y="+e.Y.ToString()+" это "+strClickFigure;
}

Рис. 5.29.  Пример
использования элемента ImageButton

Элемент управления ImageMap
представляет собой графическую карту,
определенную на серверной стороне. С его помощью можно создать
отдельные области с уникальными именами. Преимущество такого подхода
заключается в том, что во время движения курсора над определенной в
карте областью он изменяет свой вид на "указующий перст". При этом,
если с данным регионом сопоставлена гиперссылка, пользователь видит
ее в строке состояния браузера. Использование ImageMap очень удобно для детальных
изображений с небольшими активными участками.

Для использования элемента управления ImageMap необходимо определить области, на
нахождение внутри которых должна реагировать карта. Добавление
областей осуществляется путем добавления объектов HotSpot в коллекцию ImageMap. Существует три типа областей HotSpot: CircleHotSpot - определяющая окружность, RectangleHotSpot - прямоугольник, PolygonHotSpot - многоугольник (полигон). Для
задания областей необходимо добавить в коллекцию HotSpots соответствующий элемент и указать его
координаты. Кроме того, возможно указание следующих дополнительных
параметров:

AlternateText

Всплывающая подсказка,
появляющаяся на экране в тот момент, когда указатель мыши
находится над данным HotSpot.

HotSpotMode

Режим реагирования HotSpot на щелчок мыши. Возможны
следующие значения: NotSet - режим
не указан; Navigate -
перенаправление запроса на другую страницу, URL которой задан
в свойстве NavigateUrl. Аналогично
щелчку по гиперссылке; PostBack -
инициирование отправки страницы на сервер (postback). В
программном коде серверной стороны возможно идентифицировать
HotSpot, который инициировал эту
отправку по значению свойства PostBackValue; Inactive - отключение данного
участка.

NavigateUrl

URL, на который будет
осуществлен переход при щелчке по HotSpot с установленным свойством HotSpotMode=Navigate.

PostBackValue

Значение, передаваемое серверу
при отсылке страницы в результате щелчка по HotSpot.

Target

Окно, в котором будет открыта
страница при осуществлении перехода.

В качестве примера создадим с помощью ImageMap карту изображения, аналогичную
предыдущей, созданной с использованием ImageButton. Для этого используем тот же
рисунок, что и ранее, однако области определим посредством задания
HotSpots. В примере необходимо создать
три области - рамка, квадрат и треугольник. Самая простая область -
это квадрат, для ее задания достаточно добавить HotSpot типа Rectangle и определить свойства так, как
показано на рис.
5.30.

Рис. 5.30.  Окно задания
свойств областей элемента ImageMap

В примере необходимо добиться того, чтобы при щелчке по
квадрату и прямоугольнику осуществлялся вывод информации о том, где
именно был произведен щелчок, а при щелчке по рамке - производился
переход на страницу поисковой системы Яндекс.

Для того чтобы приложение могло отслеживать, где именно
был произведен щелчок мыши, необходимо инициировать отправку
страницы на сервер. Для этого в качестве значения свойства HotSpotMode установлено PostBack. Для идентификации HotSpot установлено значение PostBackValue=квадрат. Аналогичные настройки
произведем и для HotSpot "треугольник"
(рис.
5.31).

Рис. 5.31.  Окно задания
свойств для области "треугольник" элемента ImageMap

Разница в том, что для описания треугольника не
подходят предопределенные HotSpot
Rectangle и Circle, поэтому
необходимо использовать PolygonHotSpot.
Его особенностью является то, что координаты вершин многоугольника
задаются в свойстве Coordinates через
запятую.

Для описания рамки ее целесообразно разбить на две
части. Первая часть будет состоять из верхней и правой частей,
вторая - нижней и левой. Это объясняется тем, что в ImageMap невозможно исключить (вычесть) одну
область из другой. В результате будет получено три HotSpot области, как показано на рис.
5.32.

Рис. 5.32.  Окно описания
области «рамка» элемента ImageMap

Исходный код элемента ImageMap будет выглядеть следующим
образом:

<asp:ImageMap ID="ImageMap1" runat="server" Height="400px"
ImageUrl="~/Images/figure.gif"
OnClick="ImageMap1_Click" Width="400px">
<asp:RectangleHotSpot AlternateText="квадрат" Bottom="60"
HotSpotMode="PostBack"
Left="60" PostBackValue="квадрат" Right="210" Target=
"_blank" Top="210" />
<asp:PolygonHotSpot AlternateText="треугольник" Coordinates=
"270,225,375,332,165,331"
HotSpotMode="PostBack" PostBackValue="треугольник" />
<asp:PolygonHotSpot AlternateText="рамка"
Coordinates="0,0,400,0,400,400,380,380,380,20,20,20"
HotSpotMode="Navigate" NavigateUrl="http://www.yandex.ru"
Target="_blank" />
<asp:PolygonHotSpot AlternateText="рамка" Coordinates=
"0,0, 0,400,400,400,380,380,20,380,20,20"
HotSpotMode="Navigate" NavigateUrl="http://www.yandex.ru"
Target="_blank" />
</asp:ImageMap>

В результате работа элемента управления будет
практически аналогична предыдущему примеру, однако его использование
в данном случае гораздо более просто и удобно.

Как уже было сказано, в настоящее время доступны только
три типа геометрических фигур - окружность, прямоугольник,
многоугольник. Иногда их бывает недостаточно, например, было бы
полезно иметь возможность определения области в виде эллипса.
Дополнительные области возможно определять самостоятельно, создавая
свои классы на основе класса HotSpot.
Более подробную информацию о том, как это реализуется, можно
получить в [1].

Использование Literal и HiddenField

Элемент управления Literal
представляет собой один из способов вывода информации на экран.
Literal можно использовать в качестве
контейнера для размещения HTML-элементов на странице. Чаще всего его
используют для динамического добавления текста. Схожие возможности
по добавлению текста предоставляет элемент Label, Literal
отличается от него тем, что не добавляет дополнительных
HTML-элементов к тексту. Label,
например, размещает текст внутри тега <span>, Panel - внутри <div> и т. д. Размещение элементов
внутри тегов создает возможность для поддержки ими стилей оформления, Literal же не имеет такой возможности.
Рекомендуется задействовать элемент Literal в том случае, когда необходимо
размещать текст на странице без применения дополнительной разметки,
либо в том случае, когда существует HTML-текст (например, хранящийся
в файле или базе данных), содержащий форматирование с использованием
тегов, и его необходимо вывести на экран.

Самым важным свойством элемента управления Literal является Mode. Существуют три значения этого
свойства:

Transform

Любая разметка, добавляемая к
элементу управления, преобразуется таким образом, чтобы
максимально удовлетворять особенностям протокола браузера,
запрашивающего страницу.

PassThrough

Добавляемая к элементу
управления разметка передается браузеру как есть, без
каких-либо модификаций.

Encode

Добавляемая к элементу
управления разметка декодируется с использованием метода
HtmlEncode, преобразующего HTML-представление страницы в
текст.

Рассмотрим, как при использовании следующего примера
элемента Literal могут быть получены
различные результаты.

При использовании значения Mode=PassThrough, как показано в следующем
фрагменте исходного кода

private string s = "<input id='Button1' type='button'
value='кнопка' /><br/><table border='1' cellpadding='1'
cellspacing='0'><tr><td>номер</td><td>наименование</td><td>
кол-во</td></tr><tr><td>1</td><td>Краска</td><td>10</td>
</tr><tr><td>2</td><td>Кисточка</td><td>50</td></tr></table>";
protected void Page_Load(object sender, EventArgs e)
{
Literal1.Mode = LiteralMode.PassThrough;
Literal1.Text = s;
}

будет получен результат, изображенный на рис.
5.33.

Рис. 5.33.  Использование
Literal для отображения информации в режиме PassThrough

А при использовании режима Encode - следующий:

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

Рис. 5.34.  Использование
Literal для отображения информации в режиме Encode

У элемента HiddenField
существует лишь одно свойство, заслуживающее внимания. Это Value, посредством которого ему и
присваивается значение.

При использовании элемента управления HiddenField необходимо помнить о безопасности,
т. к., несмотря на то, что информация, хранящаяся в данном элементе,
не отображается на экране, ее легко можно увидеть, просмотрев
исходный код страницы. Более того, пользователь может изменить
данную информацию перед инициированием postback и отправкой ее на сервер. Поэтому не
рекомендуется хранить какие-либо конфиденциальные данные, а также
данные, критичные для выполнения приложения на сервере, в данном
элементе управления.

Использование 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>
&nbsp; &nbsp;&nbsp;
<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> &nbsp;
</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 = "";
}
}

Использование LinkButton

Элемент управления LinkButton представляет собой кнопку, которая
выглядит как гиперссылка, но имеет поведение кнопки. Этот элемент
управления внедряет в HTML-код страницы элементы JavaScript,
необходимые для обработки событий кнопки, поэтому необходимо, чтобы
клиентский браузер поддерживал JavaScript.

LinkButton может быть двух
разновидностей: командная кнопка и кнопка перенаправления. Кнопка
перенаправления не содержит сопоставленного с ней обработчика
события и просто инициирует событие postback. Командная кнопка ведет себя как
обычная кнопка и может иметь несколько обработчиков событий,
сопоставленных с ней. Как и обычная кнопка, она может реагировать на
щелчок левой кнопки мыши с помощью события LinkButton_Click, кроме того, возможна
обработка события LinkButton_Command. В
качестве аргументов обработчику события Command передаются значения свойств CommandName и CommandArgument. С помощью этого события
становится возможным определение того, какая из нескольких
расположенных на странице кнопок была нажата.

В следующем примере на странице размещены два элемента
LinkButton.

<asp:LinkButton ID="LinkButton1" runat="server" CommandName=
"Открыть" CommandArgument="c:\1.txt" OnCommand=
"LinkButton_Command"> Открыть </asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" CommandArgument=
"http://www.yandex.ru" CommandName="Перейти" OnCommand=
"LinkButton_Command"> Перейти</asp:LinkButton>

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

protected void LinkButton_Command(object sender, CommandEventArgs e)
{
Response.Write("Команда: " + e.CommandName + ", параметр: " +
e.CommandArgument);
}

Проверка вводимых данных

Подавляющее большинство страниц Web-приложений
используется для ввода пользователем данных, которые затем могут
сохраняться во вспомогательных файлах, базе данных и т. п. Одним из
важнейших этапов получения данных от пользователя является их
проверка, необходимая для того, чтобы исключить бесполезную,
неинформативную либо противоречивую информацию.

Критерии проверки могут быть самыми разными, начиная с
того, вводились ли данные вообще, и заканчивая проверкой типа
данных.

В идеале проверка вводимых данных должна осуществляться
на стороне клиента, т. к. в этом случае он может сразу же, еще до
отправки данных на сервер, получить уведомление о содержащихся
ошибках. Однако, независимо от того, осуществлялась ли проверка
вводимых данных на стороне клиента, необходимо осуществлять проверку
и на стороне сервера.

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

В ASP.NET реализован целый ряд элементов управления,
предназначенных для проверки вводимых данных, - так называемых
верификаторов. Эти элементы можно привязать к любому элементу
управления вводом. После привязки верификатор выполняет
автоматическую клиентскую и серверную проверку вводимых данных. Если
данные, вводимые в элемент ввода данных, не удовлетворяют условию
верификатора, последний препятствует отправке страницы на
сервер.

Всего в ASP.NET 2.0 существует шесть элементов
управления, предназначенных для осуществления проверки вводимых
данных.

RequiredFieldValidator

Контролирует наличие введенных
данных в элемент управления.

RangeValidator

Проверяет, находятся ли
значения элемента управления в пределах заданного
диапазона.

RegularExpressionValidator

Определяет соответствие
значения данного элемента управления определенному регулярному
выражению.

CompareValidator

Сравнивает значение текущего
элемента управления с константой или значением другого
элемента управления.

CustomValidator

Выполняет заданную операцию
проверки достоверности на стороне клиента либо на стороне
сервера для реализации собственной логики проверки вводимых
данных.

ValidationSummary

Отображает информацию на
странице либо во всплывающем окне с сообщениями об ошибках для
каждого элемента управления, проверка которого завершилась
ошибкой.

Допускается использование нескольких элементов
управления проверкой ввода данных, связанных с одним элементом ввода
данных.

С помощью верификаторов возможно проверить данные,
вводимые в такие элементы управления, как TextBox, ListBox, DropDownList, RadioButtonList,
HtmlInputText, HtmlTextArea, HtmlSelect.

При использовании валидаторов возможно применение автоматической
проверки страницы при ее отправке на сервер или же вручную в коде.
Наиболее распространен первый подход, при котором пользователь видит
обычную страницу с элементами ввода данных, заполняет их и
инициирует отправку страницы на сервер. Если отправка инициируется
нажатием на кнопку (что бывает в большинстве случаев), проверка
введенных данных зависит от значения свойства CausesValidation кнопки.

Если свойство - CausesValidation=false, элементы управления
проверкой вводимых данных просто игнорируются, а страница
отправляется на сервер. При этом все обработчики событий будут
исполнены.

Если свойство - CausesValidation=true, осуществляется
автоматическая проверка каждого элемента управления,
расположенного на странице. Если при проверке элемента управления
возникает ошибка, ASP.NET возвращает страницу с сообщениями об
ошибке в зависимости от настроек верификаторов. При этом
обработчик события нажатия на кнопке, инициировавшей отправку
страницы на сервер, может выполниться, но может и не выполниться.
Для проверки этого необходимо осуществить проверку достоверности
страницы.

Проверка вводимых данных осуществляется при щелчке
пользователя на определенных кнопках; например, при возникновении
события изменения значения текущего элемента списка такого не
происходит. Тем не менее верификаторы добавляют код для проверки
вводимых данных на стороне клиента. В этом случае практически вся
проверка может осуществляться на стороне клиента, что для клиента
будет выглядеть идентично результатам проверки данных на стороне
сервера. Однако при успешной проверке данных на стороне клиента на
стороне сервера подобная проверка будет осуществлена повторно.

Все валидаторы образованы от
класса BaseValidator и имеют следующие
основные общие для всех свойства:

ControlToValidate

Содержит идентификатор элемента
управления ввода данных, подлежащего проверке.

Display

Определяет способ отображения
сообщения об ошибке. Значение static означает, что при создании
страницы будет заранее подсчитано и зарезервировано место на
странице, необходимое для отображения сообщения об ошибке.
Значение dynamic позволяет
изменять страницу в процессе выполнения, добавляя сообщение об
ошибке при необходимости.

Enabled

Определяет состояние
валидатора. При значении false
элемент является отключенным и не осуществляет проверку
вводимых данных.

EnableClientScript

Определяет, будет ли
выполняться проверка вводимых данных на стороне клиента.

ErrorMessage

ErrorMessage Содержит строку
ошибки, которая будет отображаться в итоговой информации об
ошибках элемента ValidationSummary.

Text

Содержит строку текста ошибки,
отображаемой валидатором в случае возникновения ошибки.

IsValid

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

SetFocusOnError

Позволяет установить фокус
ввода на тот элемент управления, который вызвал ошибку при
проверке вводимых данных. Для включения этого режима
необходимо установить значение свойства равным true.

ValidationGroup

Определяет группу, в которую
возможно объединить несколько валидаторов для выполнения
независимой проверки.

Самым простым валидатором
является RequiredFieldValidator. Он
предназначен для проверки того, введены ли данные в связанное с ним
поле или нет. Это значит, что если в соответствующем текстовом поле
ввода не будет символов, отличных от пробелов, возникнет ошибка
ввода.

В качестве демонстрации работы данного валидатора создадим следующую страницу (рис.
5.36):

Рис. 5.36.  Пример
страницы, содержащей RequiredFieldValidator

Исходный код этой страницы выглядит таким образом:

<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Имя"></asp:Label>
<asp:TextBox ID="tb_Name" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
runat="server" ErrorMessage="Необходимо ввести имя пользователя"
ControlToValidate="tb_Name">*</asp:RequiredFieldValidator><br />
<br />
<asp:Button ID="btn_OK" runat="server" Text="OK" Width="89px" />
</div>
</form>
</body>

Результат выполнения данной страницы изображен на рис.
5.37.

Рис. 5.37.  Отображение
страницы, содержащей валидатор, в окне браузера

Если при нажатии на кнопку OK поле ввода имени
пользователя будет пустым, рядом с полем ввода появится символ
красной звездочки. Нетрудно заметить, что при этом обратная отсылка
данных на сервер не производится. Можно изменить текст, который
будет выводиться при возникновении ошибки. Для этого достаточно
изменить строку свойства Text валидатора.

Элемент управления RangeValidator используется для проверки
попадания введенного значения в диапазон значений валидатора. Основными свойствами данного валидатора являются MinimumValue, MaximumValue и Туре. Первые два определяют диапазон
допустимых значений, type - тип данных,
вводимых в элемент управления.

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

<asp:Label ID="Label2" runat="server" Text="Возраст (от 18
до 70)"></asp:Label>
<asp:TextBox ID="tb_Age" runat="server"></asp:TextBox>
<asp:RangeValidator ID="RangeValidator1" runat="server"
ControlToValidate="tb_Age"
ErrorMessage="Возраст должен быть между 18 и 70 годами"
MaximumValue="70" MinimumValue="18"
Type="Integer">*
</asp:RangeValidator>

Валидатор CompareValidator сравнивает значение в одном
элементе управления с фиксированным значением либо со значением в
другом элементе управления. Основными свойствами данного валидатора являются ValueToCompare и ControlToCompare: первое из них задает элемент
управления, значение которого должно контролироваться, второе -
элемент управления, со значением которого будет сравниваться
значение элемента управления, указанного в ValueToCompare. Кроме того, свойство Operator определяет тип операции
сравнения.

В следующем примере приведен фрагмент страницы,
добавленный к предыдущей, в котором осуществляется проверка
правильности введенного пароля - необходимо, чтобы введенные пароли
совпадали.

<asp:Label ID="Label3" runat="server" Text="Пароль"></asp:Label>
<asp:TextBox ID="tb_Password1" runat="server" TextMode="Password">
</asp:TextBox>
<asp:Label ID="Label4" runat="server" Text="Пароль
(повторно)"></asp:Label>
<asp:TextBox ID="tb_Password2" runat="server" TextMode="Password">
</asp:TextBox>
<asp:CompareValidator ID="CompareValidator1" runat="server"
ControlToCompare="tb_Password1" ControlToValidate="tb_Password2"
ErrorMessage="Введенные пароли не совпадают">*
</asp:CompareValidator>

Стоит отметить, что у валидаторов существует возможность
использования графических объектов вместо текста, выводимых на экран
в случае возникновения ошибки. Так, в данном примере возможно
использование изображения вместо символа "*". Для этого необходимо
ввести в свойство Text валидатора тег <img>, с указанием графического файла,
который необходимо отображать в случае возникновения ошибки, как
показано в примере ниже.

<asp:CompareValidator ID="CompareValidator1" runat="server"
ControlToCompare="tb_Password1" ControlToValidate="tb_Password2"
ErrorMessage="Введенные пароли не совпадают">
<img src="Images/Warning.png" /></asp:CompareValidator>

Результат показан на рис.
5.38.

Рис. 5.38.  Использование
графических объектов совместно с валидаторами

Валидатор RegularExpressionValidator позволяет сравнить
вводимый текст с шаблоном, определенным в регулярном выражении,
которое устанавливается в свойстве ValidationExpression. Регулярные выражения
позволяют определять правила, задающие количество символов и их
положение в строке. Наиболее часто используемые конструкции для
регулярных выражений перечислены ниже.

Escape-последовательности символов, применяемые в
регулярных выражениях, приведены далее.

Обычные
символы

Все символы кроме .$^{[( )*+?\
соответствуют своему стандартному значению.

\b

Соответствует символу "возврат
на одну позицию" (backspace).

\t

Соответствует табуляции
(tab).

\r

Соответствует переводу строки
(return).

\v

Соответствует вертикальной
табуляции.

\f

Соответствует переводу
страницы.

\n

Соответствует новой
строке.

\e

Соответствует символу
"escape".

\

Если следующий за знаком "\"
символ не распознается как escape-последовательность, то вся
эта последовательность принимается эквивалентной самому
символу. Например \+ соответствует
+.

Классы символов, определяющие множество символов,
представлены ниже.

.

Соответствует любому символу за
исключением \n.

[aeiou]

Соответствует каждому
отдельному символу, входящему в множество.

[^aeiou]

Соответствует каждому
отдельному символу, не входящему в множество.

[0-9a-fA-F]

Соответствует любому символу,
приведенному в заданных диапазонах (0-9; a-f; A-F).

\p{имя}

Соответствует любому символу,
который входит в именованный набор символов, заданный с
помощью {имя}. Примерами именованных последовательностей
символов являются Ll, Nd, Z, IsGreek,
IsBoxDrawing.

\P{имя}

Соответствует любому символу,
который не входит в именованный набор символов, заданный с
помощью {имя}.

\w

Соответствует любому
алфавитно-цифровому символу из слова, то есть любому
алфавитно-цифровому символу или символу подчеркивания.

\W

Соответствует любому символу,
не являющемуся алфавитно-цифровым либо символом
подчеркивания.

\s

Соответствует любому символу
разделителя (пробел, перевод страницы, табуляция, перевод
строки, новая строка и т. д.).

\S

Соответствует любому
непробельному символу.

\d

Соответствует любому
десятичному символу.

\D

Соответствует любому
недесятичному символу.

Квантификаторы, задающие шаблоны совпадений,
перечислены ниже.

*

Ноль или более совпадений

+

Одно или более совпадений

?

Ноль или одно совпадение

{n}

n
совпадений

{n,}

n
или более совпадений

{n,m}

Количество совпадений от n до m

За более подробной информацией о регулярных выражениях
можно обратиться к справочной системе MSDN, произведя поиск по
ключевым словам "Regular Expression".

Ниже приведена таблица, содержащая примеры шаблонов
наиболее популярных регулярных выражений. На сайте http://regexlib.com/
можно найти гораздо больше примеров регулярных выражений.

\S+@\S+\.\S+

Адрес электронной почты
(наличие знака @, точки и непробельных символов).

\w+

Пароль (любая
последовательность словесных символов).

\w{4,10}

Пароль, минимальная длина
которого должна составлять 4 символа, максимальная - 10.

[a-zA-Z]\w{3,9}

Пароль, длина которого должна
быть в пределах от 4 до 10 символов, но при этом первый символ
должен быть в диапазоне букв a-z либо A-Z.

[a-zA-Z]\w*\d+\w*

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

\S{4,10}

Строка, содержащая от 4 до 10
непробельных символов (в отличие от \w{4,10} допускаются спецсимволы, такие,
например, как звездочки, амперсанды и т. п.)

\d{3}-\d{2}-\d{4}

Последовательность групп из
трех, двух, а затем четырех цифр, разделенных дефисами.

^\d{5}$

Число, состоящее из пяти
знаков.

^(\d{5})|(\d{5}-\d{4}$

Число, состоящее из пяти
знаков, либо число состоящее из пяти и еще четырех знаков,
разделенных тире.

^(\d{5}(-\d{4})?$

Более эффективный аналог
предыдущего примера. Символ ?
используется для указания того факта, что четыре знака,
отделенные с помощью тире, являются необязательными.

^[+-]?\d+(\.\d+)?$

Любое действительное знаковое
число.

^[+-]?\d*\.?\d*$

Аналогично предыдущему, но
этому шаблону также может соответствовать пустая строка.

^(20|21|22|23|[01]\d)[0-5]\d$

Соответствует любому значению
времени в формате 24 часов.

/\*.*\*/

Соответствует содержимому
комментария в стиле языка C /* ...
*/

В качестве примера добавим в предыдущую страницу поле
для ввода адреса электронной почты, а также валидатор, проверяющий корректность его
формата. Исходный код фрагмента страницы, содержащего элементы для
ввода e-mail, а также валидатор приведены
ниже.

<asp:Label ID="Label5" runat="server" Text="e-mail"></asp:Label>
<asp:TextBox ID="tb_Email" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1"
runat="server" ControlToValidate="tb_Email" ErrorMessage="e-mail
неверного формата" ValidationExpression="\S+@\S+\.\S+">*
</asp:RegularExpressionValidator>

Элемент управления CustomValidator позволяет выполнять
пользовательские процедуры проверки достоверности на стороне клиента
и сервера. Это целесообразно в случае, когда возможности описанных
выше валидаторов оказываются
недостаточными.

CustomValidator можно
связать с элементом управления, предназначенным для ввода текста,
как и в случае с другими валидаторами.
Если проверка вводимых данных завершается неудачей, свойство Page.IsValid устанавливается в значение false (то же самое происходит и при проверке с
помощью другого валидатора).

Проверка вводимых данных с помощью CustomValidator происходит в специально
создаваемых процедурах, которые могут быть реализованы на стороне
клиента и на стороне сервера. При этом данные процедуры имеют
одинаковое определение - они должны принимать два параметра: ссылку
на элемент управления проверкой достоверности и целевой объект,
содержащий проверяемое значение, которое доступно через свойство
Value, а также свойство IsValid, с помощью которого возможно
определить значение результата проверки.

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

Сначала необходимо добавить те элементы управления,
которые будут использоваться для ввода данных, а также элемент CustomValidator. Исходный код этих элементов
показан ниже.

<asp:Label ID="Label6" runat="server" Text=
"Зарплата (кратна 10)"></asp:Label>
<asp:TextBox ID="tb_Salary" runat="server"></asp:TextBox>
<asp:CustomValidator ID="CustomValidator1" runat="server"
ErrorMessage="размер зарплаты должен быть кратным 10"
ClientValidationFunction="SalaryCheck"
ControlToValidate="tb_Salary">*</asp:CustomValidator>

В качестве значений свойств ClientValidationFunction и ControlToValidate установлены соответственно
значения SalaryCheck и tb_Salary. Первое соответствует имени функции,
осуществляющей проверку вводимых данных, второе - ID элемента
управления, осуществляющего ввод данных.

Функция SalaryCheck может
быть написана на языке JavaScript следующим образом:

<script language="javascript">
function SalaryCheck(vc,control)
{
control.IsValid=(control.Value%10==0);
}
</script>

При успешной проверке функцией SalaryCheck вводимых данных страница
отправляется на сервер, и там запускается событие ServerValidate элемента CustomValidator. Это событие можно обработать,
реализовав исходный код на языке C# или VB.NET. Серверная обработка
вводимых данных должна осуществляться всегда, независимо от
существования проверок на стороне клиента.

Для реализации серверной обработки вводимых данных о
зарплате в рассматриваемом примере необходимо добавить обработчик
события ServerValidate элемента CustomValidator. Ниже приведен возможный код
такого обработчика.

protected void CustomValidator1_ServerValidate(object source,
ServerValidateEventArgs args)
{
try
{
args.IsValid = int.Parse(args.Value) % 10 == 0;
}
catch
{
args.IsValid = false;
}
}

Для отображения итоговой информации о результатах всех
проверок вводимой информации необходимо использовать элемент
управления ValidationSummary. Он выводит
значение ErrorMessage каждого валидатора, для которого эта проверка
завершилась неудачей. Итоговая информация может отображаться либо на
странице, либо в отдельном окне. Для указания данного режима
необходимо установить свойства ShowMessageBox и ShowSummary. При значении свойства ShowMessageBox=true сообщение выводится в
отдельном окне, если же значение свойства ShowSummary=true - на странице. При
отображении итоговой информации на странице возможно установить
некоторые дополнительные параметры с помощью свойства DisplayMode, а также задать заголовок для
итоговой информации с помощью свойства HeaderText. Пример использования элемента
управления ValidationSummary на основе
созданной ранее страницы приведен ниже.

Исходный код элемента ValidationSummary выглядит следующим
образом:

<asp:ValidationSummary ID="ValidationSummary" runat="server"
DisplayMode="List" HeaderText="В результате заполнения полей воз-
никли следующие ошибки:" />

В результате использования данного элемента ошибки на
странице выводятся, как показано на рис.
5.39.

Рис. 5.39.  Пример
использования элемента управления Validation Summary

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

Это можно продемонстрировать на следующем примере.
Добавим на страницу четыре флажка, с помощью которых будем изменять
текущие свойства валидаторов, отвечающие
за проверку вводимых данных. Результат показан на рис.
5.40.

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

Для работы данного примера необходимо создать
обработчик события изменения значения флажка и ввести в него
следующий код:

{
foreach (BaseValidator v in Page.Validators)
{
v.Enabled = cb_EnableValidators.Checked;
v.EnableClientScript = cb_ClientValidation.Checked;
}
ValidationSummary.ShowSummary = cb_ShowSummary.Checked;
ValidationSummary.ShowMessageBox = cb_ShowMessageBox.Checked;
}

При реализации механизмов проверки вводимых данных
возможно создать пользовательскую проверку. Для этого необходимо
установить значение свойства CausesValidation кнопки, инициирующей метод
postback равным false, затем создать обработчик события
нажатия на эту кнопку, внутри которого и реализовать алгоритм
проверки вводимых данных. Для того чтобы инициировать проверку
введенных данных с помощью присутствующих на странице валидаторов, необходимо вызвать метод Validate() страницы. Данный метод
устанавливает свойство IsValid страницы
на основе данных валидаторов. По значению
данного метода можно судить о существовании ошибок на странице.

В качестве примера создадим пользовательскую проверку
вводимых данных на странице. Для этого установим свойство CausesValidation кнопки OK равным false. В обработчике события нажатия этой
кнопки необходимо ввести следующий код:

protected void btn_OK_Click(object sender, EventArgs e)
{
this.Validate();
if (!this.IsValid)
{
string msg = "<b>В результате заполнения полей возникли
следующие ошибки:</b><br/>";
//Перебор валидаторов
TextBox tb;
foreach (BaseValidator bv in this.Validators)
{
if (!bv.IsValid)
{
msg += bv.ErrorMessage + "<br/>";
tb = (TextBox)this.FindControl(bv.ControlToValidate);
msg += "Ошибка ввода в следующем значении:";
msg += tb.Text+"<br/>";
tb.BackColor = System.Drawing.Color.Pink;
}
}
lbl_Error.Text = msg;
}
}

При вводе данных и нажатии на кнопку OK будет выполнена
проверка, в результате которой будет сформирована строка сообщения
об ошибках с указанием расшифровки ошибки, а также значения поля
ввода, которое привело к возникновению этой ошибки. Кроме того, поле
ввода, содержащее ошибку, будет выделено розовым цветом.

Пример результатов этой проверки приведен на рис.
5.41.

Рис. 5.41.  Выделение
цветом полей ввода, содержащих ошибку валидации

Группировка элементов проверки ввода данных

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

В ASP.NET такое возможно благодаря группам проверки. Для создания группы
проверки вводимых данных необходимо поместить элементы ввода и
кнопку в одну группу проверки данных. Для этого необходимо
установить одинаковое значение свойства ValidationGroup всех элементов управления,
входящих в эту группу. В качестве значения свойства ValidationGroup используется строка, например
Login, Registration и т. п.

Например, на следующей странице присутствуют две группы
элементов управления для ввода данных, для которых реализована своя
логика проверки. Первая группа, объединяющая созданные ранее
элементы управления, предназначена для регистрации пользователя и
называется registration. Вторая -
предназначена для авторизации и называется authorisation. В результате для каждой группы
выполняется своя логика проверки вводимых данных.

Рис. 5.42.  Пример
страницы, содержащей несколько групп элементов управления и
валидаторов

Комбинирование верификаторов

Очень часто необходимо осуществлять несколько проверок
вводимых данных. Сделать это можно различными способами, в том числе
и за счет создания пользовательской логики проверки вводимых данных.
Однако большинство задач могут быть решены путем комбинирования
верификаторов.

Для интерпретации сообщений об ошибках, генерируемых
при использовании нескольких верификаторов с одним элементом
управления, необходимо понимать правила проверки вводимых данных,
принятые в ASP.NET. Так, все верификаторы за исключением RequiredFieldValidator приравнивают отсутствие
введенного значения к вводу правильного значения. Таким образом, при
отсутствии введенных данных генерируются одни сообщения (это
проверяет RequireFieldValidator) и
другие, если введенное значение находится вне допустимого диапазона
или имеет неверный формат.

Для добавления еще одного верификатора и связывания его
с текущим полем ввода необходимо добавить его на страницу и
установить для него свойства Text,
ErrorMessage, ControlToValidate, ValidationGroup.

Краткие итоги

Вопросы построения пользовательского интерфейса являются одними из
самых важных при создании Web-приложения. Процесс создания
интерфейса отличается от аналогичного процесса при разработке
традиционных Windows-приложений.

При создании пользовательского
интерфейса Web-приложения необходимо использовать каскадные таблицы стилей для повышения его
эффективности и гибкости.

Создание пользовательского
интерфейса Web-приложения можно производить как путем
редактирования исходного кода страницы, так и с использованием
встроенного в Visual Studio визуального редактора, однако наиболее
эффективным способом является применение комбинированного метода,
при котором в некоторых режимах редактирование осуществляется
визуальными средствами, а в других - с помощью редактирования
исходного кода.

Основной проблемой при разработке пользовательского интерфейса Web-приложения
является позиционирование его элементов. Существует 4 режима
размещения элементов управления Web-страницы: абсолютное
позиционирование, относительное позиционирование, статическое
позиционирование, без заданного режима позиционирования.

В состав ASP.NET входит множество различных элементов
управления, предназначенных для решения задач организации интерфейса
пользователя любой сложности. Одной из основных задач при разработке
Web-приложения является организация работы с текстовой информацией.
Для этого существуют такие элементы, как Label,
TextBox, Table и другие, предоставляющие разработчику большой
выбор возможностей организации обработки, вывода на страницу и ввода
текстовой информации. При создании пользовательского интерфейса Web-приложения
необходимо использовать каскадные таблицы
стилей. Visual Studio содержит визуальный редактор стилей,
значительно облегчающий их создание.

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

В ASP.NET существует возможность простой организации и
применения карты изображения, для чего можно использовать элемент
ImageMap. При необходимости вывода на
экран информации, содержащей форматирование с использованием тегов
HTML, необходимо применять элемент Literal.

Важной составляющей любого ввода данных является
проверка вводимых данных. Такая проверка должна осуществляться как
на клиентском компьютере, так и на сервере. Клиентская проверка
осуществляется за счет использования программного кода, написанного
на языке JavaScript. В ASP.NET реализован удобный механизм
организации такой проверки за счет применения верификаторов -
специальных элементов управления, размещаемых на Web-странице и
позволяющих осуществлять как клиентскую, так и серверную проверку
вводимых данных.

© gsu.by