LAV_ СИТспец_маг2014-15 / Модуль1_2013-14 / Web-приложения ASP_NET
.doc
Рассматриваются вопросы создания пользовательского интерфейса интернет-приложения. Рассматриваются принципы позиционирования элементов пользовательского интерфейса, перечисляются основные интерфейсные элементы, используемые в ASP.NET. Рассматриваются принципы использования основных интерфейсных элементов для вывода информации на Web-страницу, а также организации ввода данных. Описываются возможности применения каскадных таблиц стилей для оформления внешнего вида элемента управления и всей страницы. Приводятся примеры динамического управления содержимым страницы с использованием элементов программирования, рассматриваются простейшие примеры осуществления привязки элементов управления к данным. Рассматриваются базовые принципы организации проверки вводимых данных. |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Цель лекции: изучить принципы построения пользовательского интерфейса, рассмотреть вопросы использования основных серверных элементов управления, применяемых для создания Web-приложений, рассмотреть вопросы организации ввода данных от пользователя и их проверки. Вопросы построения пользовательского интерфейса являются одними из самых важных в процессе разработки приложения. В случае разработки Web-приложения они являются особенно актуальными, т. к. процесс создания пользовательского интерфейса здесь имеет ряд существенных отличий от традиционных Windows-приложений. Данная лекция предназначена для изучения основ построения интерфейса Web-приложения. При построении Web-приложения необходимо учитывать тот факт, что его интерфейс отображается в окне браузера и, следовательно, ограничен его возможностями. Кроме того, как известно, браузер способен отображать страницу, описанную с помощью языка HTML. На сегодняшний день использование HTML без CSS является неэффективным, т.к. CSS способна значительно расширить базовые возможности HTML, связанные с позиционированием элементов внутри страницы, поэтому при рассмотрении дальнейших примеров предполагается, что читатель владеет базовыми знаниями CSS. Разработку пользовательского интерфейса Web-приложения можно производить как с помощью редактирования исходного кода страницы, так и с использованием встроенного в Visual Studio визуального редактора. Наиболее эффективным способом является применение комбинированного метода, при котором в некоторых режимах редактирования целесообразно пользоваться визуальными средствами, в других же случаях - средствами редактирования исходного кода. Переключение этих режимов можно осуществлять с помощью кнопок Design и Source, как было показано на рис. 2.7. Основной сложностью при разработке пользовательского интерфейса Web-приложения является позиционирование его элементов. Существует четыре основных режима размещения элементов управления Web-страницы.
Чтобы
задать способ позиционирования
элементов, необходимо открыть окно
свойств Visual Studio с помощью пунктов меню
Tools
Рис. 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]:
Работа с текстом Одной из наиболее часто возникающих задач при создании Web-приложения является работа с текстом. Для этого существует несколько различных способов, начиная от уже известного Response.Write("Текст") и заканчивая использованием элемента Label или TextBox с установленным в True значением свойства ReadOnly. Таблицы являются абсолютно необходимым элементом, используемым для отображения данных на странице, т. к. достаточно много информации бывает представлено в виде таблиц; кроме того, с помощью таблиц возможно осуществлять разметку страницы и позиционирование элементов. Все таблицы можно условно разделить на две группы: предназначенные для создания и отображения простых динамических таблиц и списков и предназначенные для создания сложных таблиц и списков, содержащих другие элементы управления. Обычно сложные таблицы и списки бывают связаны с источниками данных. Рассмотрим работу с серверным элементом управления Table. Так как он относится к разряду серверных элементов, им возможно управлять в коде приложения, добавляя и удаляя строки и столбцы, а также изменяя их содержимое. Эти же операции можно проделать и в процесс разработки с использованием стандартных средств визуального редактирования Visual Studio. Для добавления элементов (столбцов и строк) к элементу Table в процессе разработки необходимо выполнить следующие операции:
Рис. 5.4. Окно редактирования элементов строки таблицы
Например, для создания таблицы следующего вида:
необходимо установить значения свойств объекта 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
Рис. 5.9. Окно добавления к сайту таблицы стилей После нажатия на кнопку Add Visual Studio создаст новый файл StyleSheet.css в каталоге Web-приложения и откроет редактор его содержимого, а также дополнительное окно, отображающее иерархию создаваемых стилей (рис. 5.10).
Рис. 5.10. Редактирование содержимого таблицы стилей Видно, что в качестве заготовки создан лишь один стиль для тела HTML-документа. Теперь мы по своему усмотрению можем добавлять стили для различных элементов документа. Хотя файл .css представляет собой обычный текстовый файл, Visual Studio предоставляет средства визуального создания и редактирования стилей. Как известно, существует три основных способа описания стилей:
Внутри Web-страницы может существовать несколько элементов с одинаковыми именами классов, но идентификаторы всегда являются уникальными. Создадим новый класс, внутри которого опишем оформление таблицы. Для этого щелкнем правой кнопкой в области окна редактора документа стиля и в контекстном меню выберем пункт Add Style Rule, как показано на рис. 5.11.
Рис. 5.11. Создание нового элемента таблицы стилей В открывшемся окне необходимо установить переключатель Class name, т. к. мы создаем стиль на основе класса, и ввести имя класса, в данном случае mytable (рис. 5.12).
Рис. 5.12. Окно добавления нового элемента таблицы стилей
Затем
необходимо нажать кнопку
Рис. 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>. Исходя из этого, создадим стиль для обычных ячеек таблицы. Для этого необходимо выполнить следующие операции:
ис. 5.19. Добавление тега к существующему элементу В результате этой операции в файл стиля будет добавлен стиль .mytable TD { }.
В результате проделанных действий будет получена таблица, внешний вид которой аналогичен предыдущей. Более того, теперь для каждой вновь создаваемой таблицы можно настроить такое же оформление, просто указав в ее свойстве 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. Меню редактирования элементов ListBox
Рис. 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 является возможность настройки внешнего вида и типа элементов списка. Основными свойствами этого элемента управления являются следующие.
При использовании LinkButton в качестве элемента списка становится возможным программное определение того элемента, по которому был произведен щелчок пользователем, как показано в следующем примере: protected void BulletedList1_Click(object sender, BulletedListEventArgs e) { Response.Write("Вы щелкнули по элементу списка "+BulletedList1.Items[e.Index].ToString()); } Использование Image, ImageMap, ImageButton Отображение графики на Web-странице является абсолютно необходимым условием. ASP.NET предоставляет несколько возможностей отображения графики.
Элемент управления 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 соответствующий элемент и указать его координаты. Кроме того, возможно указание следующих дополнительных параметров:
В качестве примера создадим с помощью 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. Существуют три значения этого свойства:
Рассмотрим, как при использовании следующего примера элемента 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 облегчает размещение динамически создаваемых элементов управления на форме. И, наконец, с помощью этого элемента управления становится возможным создание областей в рамках страницы, обладающих собственными свойствами поведения и внешнего вида. Это выражается в следующем:
Рис. 5.35. Пример изображения группы элементов Следует отметить, что при установке свойства GroupingText становится невозможным использование полос прокрутки.
В следующем примере создается простейшая форма авторизации пользователя на сайте. При вводе имени пользователя и пароля, а также щелчке по кнопке "Войти" (либо нажатии Enter), введенные данные сравниваются с хранящимися в коде программы. В случае, если данные совпадают, панель, содержащая элементы управления, скрывается, а вместо нее выводится приветственное сообщение. Исходный код страницы выглядит следующим образом: <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Text=""></asp:Label> <br /> <br /> <asp:panel ID="Panel1" runat="server" height="118px" width="215px" DefaultButton="btn_Enter"> <asp:Label ID="Label2" runat="server" Text= "Имя "></asp:Label>
<asp:TextBox ID="tb_Name" runat="server"></asp:TextBox><br /> <br /> <asp:Label ID="Label3" runat="server" Text="Пароль"> </asp:Label> <asp:TextBox ID="tb_Password" runat="server" TextMode= "Password"></asp:TextBox><br /> <br /> <asp:Button ID="btn_Enter" runat="server" OnClick= "btn_Enter_Click" Text="Войти" /></asp:panel> </div> </form> </body> Исходный код процедуры нажатия на кнопку, осуществляющий проверку введенных данных, представлен ниже. protected void btn_Enter_Click(object sender, EventArgs e) { if (tb_Name.Text == "user" && tb_Password.Text == "12345") { Panel1.Visible = false; Label1.Text = tb_Name.Text + " успешно вошел в систему."; } else { Label1.Text = "Неверное имя или пароль"; Label1.ForeColor = System.Drawing.Color.Red; tb_Name.Text = ""; } } Использование 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 существует шесть элементов управления, предназначенных для осуществления проверки вводимых данных.
Допускается использование нескольких элементов управления проверкой ввода данных, связанных с одним элементом ввода данных. С помощью верификаторов возможно проверить данные, вводимые в такие элементы управления, как TextBox, ListBox, DropDownList, RadioButtonList, HtmlInputText, HtmlTextArea, HtmlSelect. При использовании валидаторов возможно применение автоматической проверки страницы при ее отправке не сервер или же вручную в коде. Наиболее распространен первый подход, при котором пользователь видит обычную страницу с элементами ввода данных, заполняет их и инициирует отправку страницы на сервер. Если отправка инициируется нажатием на кнопку (что бывает в большинстве случаев), проверка введенных данных зависит от значения свойства CausesValidation кнопки.
Проверка вводимых данных осуществляется при щелчке пользователя на определенных кнопках; например, при возникновении события изменения значения текущего элемента списка такого не происходит. Тем не менее верификаторы добавляют код для проверки вводимых данных на стороне клиента. В этом случае практически вся проверка может осуществляться на стороне клиента, что для клиента будет выглядеть идентично результатам проверки данных на стороне сервера. Однако при успешной проверке данных на стороне клиента на стороне сервера подобная проверка будет осуществлена повторно. Все валидаторы образованы от класса BaseValidator и имеют следующие основные общие для всех свойства:
Самым простым валидатором является 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-последовательности символов, применяемые в регулярных выражениях, приведены далее.
Классы символов, определяющие множество символов, представлены ниже.
Квантификаторы, задающие шаблоны совпадений, перечислены ниже.
За более подробной информацией о регулярных выражениях можно обратиться к справочной системе MSDN, произведя поиск по ключевым словам "Regular Expression". Ниже приведена таблица, содержащая примеры шаблонов наиболее популярных регулярных выражений. На сайте http://regexlib.com/ можно найти гораздо больше примеров регулярных выражений.
В качестве примера добавим в предыдущую страницу поле для ввода адреса электронной почты, а также валидатор, проверяющий корректность его формата. Исходный код фрагмента страницы, содержащего элементы для ввода 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-странице и позволяющих осуществлять как клиентскую, так и серверную проверку вводимых данных. |
Options,
в открывшемся
окне Options выбрать
раздел HTML Designer
CSS
Positioning. В открывшемся окне свойств,
изображенном на рис.
5.1, нужно выбрать соответствующий
режим позиционирования.
.
Add
New Item и в открывшемся окне выберем
Style Sheet (рис.
5.9).
для
включения созданного класса в иерархию
стилей и нажать OK.
