Лабораторная работа: Веб-формы ASP.NET.
Цель работы: Знакомство со средствами автоматизации разработки веб-приложений в
ASP.NET в виде серверных элементов управления WebForm.
Изучите теоретический материал и выполните задания.
1.Порядок выполнения лабораторной работы
1.1 Веб-формы
Веб-формы — это объекты веб-приложения, определяющие его пользовательский
интерфейс. В целом веб – формы аналогичны Windows – формам. Однако, в отличие от
Windows-приложений, веб-приложения работают на сервере, обмениваясь данными с
клиентами через Интернет. Поэтому в Visual Studio создание проекта веб – приложения и
управление его файлами существенно отличается от создания проектов для Windowsприложений.
Давайте создадим наш первый проект ASP.NET и рассмотрим принципы разработки вебформ. В главном меню выберем пункт Файл→Создать→ Веб-сайт (File | New | Web Site) (Рис.
1) и в открывшемся диалоговом окне Новый Веб-сайт (New Web Site) выберем шаблон Пустой
веб-сайт ASP.NET (Empty Web Site) (рис. 2) и расположение веб-сайта Файловая система
(File System) . Создав каталог для сайта с именем WebSite, нажмем кнопку «OK».
Рисунок 1
1
Рисунок 2
Новый веб-сайт, созданный средой Visual Studio, не содержит веб-страниц, в нем есть
только файл конфигурации web.config.
Теперь добавим веб-форму к созданному сайту: Веб-сайт→Добавить новый элемент
(рис. 3. ) и в открывшемся диалоговом окне выберем Веб-форма (рис. 4).
Рисунок 3
2
Рисунок 4
Оставим ей имя по умолчанию (Default.aspx) и нажмем кнопку «Добавить».
Если дважды щелкнуть мышью на файле Default.aspx, откроется дизайнер веб форм. Он имеет в нижней части три закладки: Конструктор (Design), Разделитель (Split) и
исходный код (Source) (рис. 5).
Рисунок 5
Переключимся на закладку Исходный код и рассмотрим код для пустой формы,
сгенерированный средой разработки.
В ASP.NET все элементы управления помещены в отдельном дескрипторе <form>.
Этот дескриптор помечен атрибутом runat="server", который позволяет ему работать на
сервере. ASP.NET не допускает создание веб - форм, содержащих более одного серверного
дескриптора <form>. Код пустой веб - формы представлен в листинге 1.
Листинг 1. Код пустой формы Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
3
Помимо файла Default.aspx, среда разработки создает файл C#-кода Default.aspx.cs,
код которого приведен в листинге 2. (Файл→ Открыть →Файл…)
Листинг 2. Файл Default.aspx.cs
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Web;
System.Web.UI;
System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
Обработчик события загрузки веб-страницы Page_Load() в листинге 2 может быть
использован для добавления любого необходимого в момент загрузки страницы кода. По мере
добавления новых обработчиков событий этот класс будет наполняться кодом. Обратите
внимание, что здесь нет кода, который связывает обработчик событий со страницей − это
делает исполняющая система ASP.NET. Такое поведение устанавливается атрибутом
AutoEventWireUp=true (см. листинг 1) — присваивание ему значения false потребовало
бы ассоциировать обработчики с событиями вручную.
Внутри дескриптора <form> на веб - странице можно размещать дескрипторы для
различных элементов управления: кнопок, текстовых полей, окон списков и переключателей.
При отправке введенных на форме данных на сервер браузер извлекает текущие значения
каждого элемента управления и формирует из них длинную строку. Затем эта строка
отправляется странице, указанной в дескрипторе <form>, например, с использованием НTTРоперации POST. Данные со страницы всегда отправляются в виде последовательности
пар имя-значение, разделенных знаком амперсанда &. Каждая пара имя-значение
отделяется знаком равенства =.
Среда выполнения ASP.NET позволяет извлекать значение элемента управления формы и
сохраняет его в коллекции Form объекта Request. В ASP.NET можно искать значения по
имени в коллекции Form, например, так:
string firstName = Request.Form["FirstName"];
Когда страница отправляется обратно на сервер, она также извлекает значения, заполняет
коллекцию Form и конфигурирует соответствующие объекты элементов управления. Это
означает, что для извлечения информации можно также использовать следующий намного
более содержательный синтаксис:
string firstName = txtFirstName.Text;
Данный код также обладает преимуществом безопасности типов. В результате
разработчики веб - страниц оказываются изолированными от индивидуальных особенностей
синтаксиса HTML.
1.2 Серверные элементы управления
Серверные элементы управления ASP.NET являются неотъемлемой частью архитектуры
ASP.NET. По сути, серверные элементы управления представляют собой классы в среде .NET
Framework, представляющие визуальные элементы веб-формы. Некоторые из этих классов
являются относительно простыми и отображаются на определенные HTML-дескрипторы.
Другие элементы управления намного более абстрактны и реализуют более сложное
представление нескольких элементов HTML.
4
ASP.NET предлагает множество серверных элементов
управления, которые делятся на несколько категорий.
Все серверные элементы управления наследуются от
базового класса
Control из
пространства
имен
System.Web.UI.
Далее перечислены
наиболее часто
используемые методы класса Control.
ClientID —
идентификатор
элемента,
который
является уникальным именем, созданным ASP.NET при
создании экземпляра страницы.
Controls — коллекция дочерних элементов управления
страницы.
EnableViewState — указывает на то, должен ли элемент
управления поддерживать свое состояние с помощью
обратных отсылок своей родительской страницы.
ID — идентификатор элемента управления. Это имя,
с помощью которого вы можете получить доступ к элементу
управления из программного кода.
PageParent — возвращает ссылку на объект
родительской страницы.
Visible — определяет видимость элемента управления.
DataBind() —
связывает элемент управления с
источником данных.
FindControl() — ищет дочерний элемент управления с
определенным именем в текущем элементе управления и всех
содержащихся в нем элементах. Если дочерний элемент
найден, метод возвращает ссылку на общий тип Control,
который затем можно привести к соответствующему типу.
Рисунок 6
HasControls() — указывает на наличие у элемента управления дочерних элементов
управления. Для того чтобы содержать дочерние элементы, элемент управления должен быть
дескриптором контейнера, например, <div>.
RenderControl() — записывает вывод HTML для элемента управления на основании его
текущего состояния. Этот метод не вызывается напрямую, его вызывает ASP.NET при
генерации страницы.
1.3 Элементы управления HTML
По умолчанию такие элементы управления в ASP.NET файлах рассматриваются как текст.
Для их программирования требуется добавление атрибута runat="server" в соответствующий
HTML элемент. Кроме того, все серверные элементы управления HTML должны быть
размещены внутри области действия тэга <form>, также имеющего атрибут runat="server".
Серверные элементы управления HTML определены в пространстве имен
System.Web.UI.HtmlControls. Они разбиты на отдельные категории на основании того,
являются
ли
они элементами управления
вводом и
унаследованы от класса
HtmlInputControl или могут содержать другие элементы управления и являются
производными от класса HtmlContainerControl. На рис. 7 показана иерархия наследования.
5
Рис. 7. Серверные элементы управления HTML
Класс Control мы уже рассмотрели в предыдущем разделе. Все серверные элементы
управления HTML являются производными от базового класса HtmlControl, наследующего
от класса Control. Основные свойства, определяемые в классе HtmlControl:
Attributes — коллекция атрибутов дескриптора элемента управления;
Disabled — состояние доступности элемента управления;
Style — коллекция атрибутов CSS, применяемых к элементу управления. На вебстранице свойство Style устанавливается как список атрибутов style:, разделенных точками с
запятой;
TagName — имя дескриптора элемента управления.
Элементы управления вводом HTML допускают взаимодействие с пользователем. Сюда
входят знакомые графические элементы управления — флажки, текстовые поля, кнопки и окна
со списком. Все эти элементы управления используют тег <input>.
Элементы управления вводом HTML наследуются от класса HtmlInputControl,
который добавляет новые свойства к элементам управления:
Type —
предоставляет тип HtmlInputControl. Например, если это свойство установлено в text (текст), HtmllnputControl является текстовым полем для ввода данных;
Value — предоставляет либо устанавливает значение, связанное с элементом
управления вводом. Значение, связанное с элементом управления, зависит от типа
элемента управления. Например, в текстовом поле это свойство хранит текст, введенный
в элементе управления. Для кнопок оно определяет текст кнопки.
Указание атрибута runat="server" позволяет ASP.NET обрабатывать их и транслировать
в экземпляры соответствующего класса .NET.
Серверные элементы управления HTML реализуют модель нечастых событий,
включающую только два возможных события:
ServerClick() — это событие, реагирующее на щелчок мышью на элементе
управления, обрабатываемое на стороне сервера. Событие ServerClick() предоставляется
большинством кнопок;
ServerChange() — это событие генерируется при внесении изменений в элемент ввода
текста или при выборе пользователем опции в элементах-списках. Это событие не происходит
до обратной отсылки страницы (например, после щелчка пользователя на кнопке Submit). При
отправке страницы на сервер для всех измененных элементов управления генерируется
событие ServerСhange, за которым следует соответствующее событие ServerClick.
6
Классы серверных элементов управления HTML
В таблице ниже перечислены все доступные серверные элементы управления HTML и
специфичные свойства и события, которые каждый элемент добавляет к базовому классу. Как
упоминалось ранее, объявление серверных элементов управления HTML на странице дает тот
же эффект, что и указание атрибута runat="server" в обычных статических HTMLдескрипторах. Именно этот атрибут позволяет ASP.NET обрабатывать их и транслировать в
экземпляры соответствующего класса .NET. По этой причине серверные элементы управления
HTML являются хорошим выбором при преобразовании существующей HTML- или ASPстраницы в веб-форму ASP.NET.
Объявление
дескриптора
<а runat="server">
Классы серверных элементов управления HTML
Класс .NET
Специфичные члены
<button runat="server">
HtmlAnchor
Управление HTML элементом <a>
HtmlButton
Управление HTML элементом <button>
<form runat="server">
HtmlForm
Управление HTML элементом <form>
<img runat="server">
HtmlImage
Управление HTML элементом <image>
HtmlInputButton
Управление HTML элементами <input
type="button">
<input
type="button"
runat="server">
<input
type="reset"
runat="server">
<input
type="submit"
runat="server">
<input
type="checkbox"
runat="server">
<input
type="file"
runat="server">
<input
type="hidden"
runat="server">
<input
type="image"
runat="server">
<input
type="radio"
runat="server">
<input
type="text"
runat="server">
HtmlInputReset
HtmlInputSubmit
HtmlInputCheckBox
Управление HTML элементом <input
type="checkbox">
HtmlInputFile
Управление HTML элементом <input
type="file">
HtmlInputHidden
Управление HTML элементом <input
type="hidden">
HtmlInputImage
Управление HTML элементом <input
type="image">
HtmlInputRadioButton
Управление HTML элементом <input
type="radio">
HtmlInputText
Управление HTML элементами <input
type="text">
HRef, Target, Title, Name,
событие ServerClick
CausesValidation,
ValidationGroup, событие
ServerClick
Enctype, Method, Target,
DefaultButton,
DefaultFocus
Align, Alt, Border, Height,
Src, Width
Type,
Value,
CausesValidation,
ValidationGroup, событие
ServerClick
Type, Value
Type,
Value,
CausesValidation,
ValidationGroup, событие
ServerClick
Checked, Type, Value,
событие ServerClick
Accept,
MaxLength,
PostedFile, Size, Type,
Value
Type, Value, событие
ServerChange
Align, Alt, Border, Src,
Type,
Value,
CausesValidation,
ValidationGroup, событие
ServerClick
Checked, Type, Value,
событие ServerChange
MaxLength, Type, Value,
событие ServerChange
7
<input
type="password"
runat="server">
<select runat="server">
HtmlInputPassword
HtmlSelect
Управление HTML элементом <select>
<th runat="server">
HtmlTableCell
Управление HTML элементами <td> и
<th>
<tr runat="server">
HtmlTableRow
Управление HTML элементом <tr>
<textarea runat="server">
HtmlTextArea
Управление HTML элементом <textarea>
<table runat="server">, <td
runat="server">
HtmlTable
Управление HTML элементом <table>
Любой другой дескриптор
HTML
с
атрибутом
runat="server"
HtmlGenericControl
Управляет HTML элементами не
описываемыми как элементы управления
HTML , например, <body>, <div>, <span>
и др.
MaxLength, Type, Value,
событие ServerChange
Multiple,
SelectedIndex,
Size, Value, DataSource,
DataTextField,
DataValueField,
Items
(коллекция),
событие
ServerChange
Align,
BgColor,
BorderColor,
ColSpan,
Height,
NoWrap,
RowSpan, VAlign, Width
Align,
BgColor,
BorderColor,
Height,
VAlign, Cells (коллекция)
Cols,
Rows,
Value,
событие ServerChange
Align, BgColor, Border,
BorderColor, CellPadding,
Cellspacing,
Height,
Width, Rows (коллекция)
Отсутствуют
В этой таблице не были упомянуты три специализированных элемента управления HTML
— HtmlHead, HtmlMeta и HtmlTitle, предоставляющие серверный доступ к части веб-страницы
<head>. С использованием этих элементов управления можно динамически устанавливать
заголовок, метаданные и связанные таблицы стилей для таблицы.
Программное создание серверных элементов управления
Иногда невозможно знать наперед, сколько текстовых полей, переключателей, строк
таблиц или других элементов управления понадобится, поскольку это может зависеть от других
факторов, таких как количество записей, хранимых в базе данных, или пользовательский ввод.
ASP.NET предлагает решение этой проблемы — вы можете просто создать экземпляры
необходимых серверных элементов управления HTML, установить их свойства с помощью
объектно-ориентированного подхода, использованного в предыдущем примере, а затем
добавить их в коллекцию Controls страницы-контейнера.
Например, в следующем коде динамически создается таблица с пятью строками и
четырьмя ячейками на строку, затем устанавливаются их цвета и текст, после чего все это
отображается на странице. Интересная особенность в том, что в файле .aspx дескрипторы
элементов управления не объявляются. Вместо этого все генерируется программно:
using
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Web;
System.Web.UI;
System.Web.UI.WebControls;
System.Text;
System.Web.UI.HtmlControls;
8
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Создать новый объект HtmlTable
HtmlTable table1 = new HtmlTable();
// Установить свойства форматирования таблицы
table1.Border = 1;
table1.CellPadding = 3;
table1.CellSpacing = 3;
table1.BorderColor = "red";
// Начать добавлять содержимое в таблицу
HtmlTableRow row;
HtmlTableCell cell;
for (int i = 1; i <= 5; i++)
{
// Создать новую строку и установить для нее цвет фона
row = new HtmlTableRow();
row.BgColor = (i % 2 == 0 ? "lightyellow" : "lightcyan");
for (int j = 1; j <= 4; j++)
{
// Создать ячейку и установить ее текст
cell = new HtmlTableCell();
cell.InnerHtml = "Row: " + i.ToString() +
"<br />Cell: " + j.ToString();
// Добавить ячейку в текущую строку
row.Cells.Add(cell);
}
// Добавить строку в таблицу
table1.Rows.Add(row);
}
// Добавить таблицу внутрь страницы
this.Controls.Add(table1);
}
}
9
1.4 Элементы управления Web
Для решения проблем, связанных с элементами управления HTML, ASP.NET
предоставляет высокоуровневую модель элементов управления Web. Bсe элементы
управления Web определены в пространстве имен System.Web.UI.WebControl и являются
производными от базового класса WebControl, реализующего более абстрактную и
непротиворечивую модель, чем модель серверных элементов управления HTML. Элементы
управления Web также поддерживают дополнительные свойства наподобие автоматической
обратной отсылки. Но действительно примечательным является то, что многие
усовершенствованные элементы управления не просто отображаются на отдельный HTMLдескриптор, но генерируют более сложный вывод, состоящий из нескольких HTMLдескрипторов и JavaScript-кода. В качестве примеров можно привести списки флажков,
переключатели, календари, редактируемые сетки и т. д.
На рис. 8 показана часть иерархии наследования элементов управления Web. Все
элементы управления Web унаследованы от класса WebControl. В свою очередь класс
WebControl наследуется от Control. Поэтому многие его свойства и методы, например
Controls(), Visible(), FindControl(), похожи на свойства и методы серверных элементов
управления HTML.
Рисунок 8. Иерархия классов элементов управления Web
10
Однако в классе WebControl добавлены еще и свойства, которые заключают в себе
атрибуты стиля CSS наподобие цвета изображения, фонового цвета, шрифта, высоты,
ширины и прочего. Эти свойства намного упрощают настройку макета веб- элемента
управления и уменьшают вероятность ошибок.
ASP.NET содержит элементы управления Web, дублирующие все серверные
элементы управления HTML и предлагающие такую же функциональность. Так как элементы
управления Web унаследованы от класса WebControl, они имеют и дополнительные свойства и
события.
Общий синтаксис для описания таких элементов:
<asp:тип_элемента id="идентификатор" runat="server"/>
Элементы управления Web
всегда объявляются на странице с использованием
синтаксиса asp:, например, так можно объявить элемент управления TextBox:
<asp:TextBox runat="server" ID="TextBox1" Text="This is a test"
ForeColor="red" BackColor="lightyellow" Width="250px"
Font-Name="Verdana" Font-Bold="True" Font-Size="20" />
Все элементы управления Web должны объявляться внутри дескриптора серверной формы
(и может существовать только одна серверная форма на страницу), даже если они не вызывают
обратную отсылку.
В отличие от серверных элементов управления HTML, каждый элемент управ- ления Web
предоставляет метод Focus(). Фокус оказывает влияние только на элементы управления
вводом. При загрузке страницы в браузер пользователь начинает работу с элемента
управления, имеющего фокус.
Вместо программного вызова метода Focus() вы можете установить элемент
управления, который должен всегда иметь фокус. Это делается с помощью свойства
DefaultFocus следующим образом:
<form id="Form1" DefaultFocus="TextBox1" runat="server">
Иногда может потребоваться сделать кнопку Submit формы кнопкой по умолчанию,
чтобы при нажатии пользователем клавиши <Enter> страница отправлялась на сервер. Для
создания кнопки по умолчанию необходимо указать в свойстве DefaultButton формы
идентификатор соответствующего элемента управления:
<form id="Form1" DefaultButton="cmdSubmit" runat="server">
Кнопка по умолчанию должна быть элементом управления, реализующим интерфейс
IButtonControl, который реализуют классы Button, LinkButton и ImageButton.
Серверные события работают так же, как и серверные события элементов
управления HTML, только элементы управления Web реализуют более богатый набор событий.
Элементы управления Web, в отличие от элементов управления HTML, поддерживают
свойство AutoPostBack, которое использует JavaScript для захвата клиентского события и
запуска обратной отсылки. Сервер при получении отправленной страницы сразу запускает
соответствующее серверное событие.
Базовый класс WebControl
Все веб-элементы управления унаследованы от класса WebControl. Сам класс WebControl,
в свою очередь, наследуется от Control. Поэтому многие его свойства и методы, например,
Controls, Visible и FindControl(), похожи на свойства и методы серверных элементов управления
HTML. Однако класс WebControl добавляет еще и свойства, перечисленные ниже:
11
Свойства класса WebControl
Свойство
Описание
AccessKey
Возвращает или устанавливает сокращенную клавиатурную комбинацию,
позволяющую быстро переместиться на элемент управления. Например, при
установке в А пользователь может переместить фокус на этот элемент
управления, нажав комбинацию <Alt+A>
BackColor
Возвращает или устанавливает цвет фона
BorderColor Возвращает или устанавливает цвет границы
BorderStyle Одно из значений перечисления BorderStyle: Dashed, Dotted, Double, Groove,
Ridge, Inset, Outset, Solid и None
BorderWidth Возвращает или устанавливает ширину границы
CssClass
Возвращает или устанавливает стиль CSS для элемента управления. Стиль CSS
может быть определен в разделе <style> в верхней части страницы или же в
отдельном файле CSS, на который ссылается страница
Enabled
Возвращает или устанавливает активизированное состояние элемента
управления. При значении false элемент управления становится неактивным
(отображается серым цветом)
Font
Возвращает объект со всей информацией о стилях шрифта, используемого для
текста элемента управления
ForeColor
Возвращает или устанавливает цвет изображения, например, цвет текста
элемента управления
Height
Возвращает или устанавливает высоту элемента управления
TabIndex
Число, позволяющее управлять порядком обхода по клавише <Таb>. Элемент
управления с нулевым TabIndex получает фокус при первой загрузке страницы.
Нажатие клавиши <Таb> перемещает пользователя на элемент управления со
следующим наиболее низким TabIndex при условии, что он активен. Это
свойство поддерживается только в браузере Internet Explorer 4.0 и в последующих
его версиях
Tooltip
Отображает текстовое сообщение, когда пользователь наводит на элемент
управления курсор мыши. Во многих более старых браузерах это свойство не
поддерживается
Width
Возвращает или устанавливает значение ширины элемента управления
Многие из этих свойств заключают в себе атрибуты стиля CSS наподобие цвета
изображения либо фонового цвета, шрифта, высоты, ширины и прочего. Эти свойства
позволяют намного проще конфигурировать внешний вид веб-элемента управления и
уменьшают вероятность ошибок.
Базовые классы веб-элементов управления
В состав ASP.NET входят веб-элементы управления, дублирующие каждый из серверных
элементов управления HTML и предоставляющие точно такие же функциональные
возможности. Эти веб-элементы управления унаследованы от класса WebControl и вдобавок
имеют ряд собственных свойств и событий. Все они кратко перечислены в следующей таблице:
Базовые классы веб-элементов управления
Объявление
Генерируемая HTMLКлючевые члены
дескриптора
разметка
ASP.NET
<asp:Button>
<input type="submit"/> или Text, CausesValidation, PostBackUrl,
Отображение кнопки <input type="button"/>
ValidationGroup, событие Click
<asp:CheckBox>
<input type="checkbox"/>
AutoPostBack, Checked, Text, TextAlign,
Отображение флажка
событие CheckedChanged
<asp:FileUpload>
<input type="file">
FileBytes,
FileContent,
FileName,
HasFile, PostedFile, SaveAs()
12
<asp:HiddenField>
<asp:HyperLink>
<asp:Image>
Изображение
<asp:ImageButton>
Кнопка в виде
изображения
<asp:ImageMap>
<asp:Label>
Отображение
статического
содержимого,
доступного для
программирования, и
с возможностью
задания стиля
<asp:LinkButton>
Кнопка с
гиперссылкой
<asp:Panel>
Контейнер для других
элементов управления
<asp:RadioButton>
Радио-кнопка
<input type="hidden">
<a>...</a>
<img/>
Value
ImageUrl, NavigateUrl, Target, Text
AlternateText, ImageAlign, ImageUrl
<input type="image"/>
CausesValidation,
событие Click
<map>
HotSpotMode, HotSpots (коллекция),
AlternateText, ImageAlign, ImageUrl
Text, AssociatedControlID
<span>...</span>
<a><img/></a>
ValidationGroup,
Text, CausesValidation, ValidationGroup,
событие Click
<div>...</div>
BackImageUrl,
DefaultButton,
GroupingText,
HorizontalAlign,
Scrollbars, Wrap
<input type="radio"/>
AutoPostBack, Checked, GroupName,
Text,
TextAlign,
событие
CheckedChanged
<asp:Table>
<table>...</table>
BackImageUrl, CellPadding, Cellspacing,
Таблица
GridLines,
HorizontalAlign,
Rows
(коллекция)
<asp:TableCell>
<td>...</td>
ColumnSpan, HorizontalAlign, RowSpan,
Ячейка таблицы
Text, VerticalAlign, Wrap
<asp:TableRow>
<tr>...</tr>
Cells (коллекция), HorizontalAlign,
Строка таблицы
VerticalAlign
<asp:TextBox>
<input
type="text"/>
или AutoPostBack, Columns, MaxLength,
Поле для ввода текста <textarea>...</textarea>
Readonly, Rows, Text, TextMode, Wrap,
событие TextChanged
Все свойства веб-элементов управления интуитивно понятны. Одной из целей вебэлементов управления является упрощение установки атрибутов элемента управления с
помощью свойств с согласованными именами без необходимости думать о деталях их
преобразования в код HTML (хотя хорошее знание HTML, безусловно, поможет).
1.5 Серверные элементы управления для проверки данных (валидации)
Элементы управления данного типа применяются для проверки вводимых данных.
Имеют следующий синтаксис:
<asp:тип_элемента id="идентификатор" runat="server" />
Наиболее важные элементы приводятся в следующей таблице.
13
Элемент управления для
проверки данных
Описание
CompareValidator
Сравнивает значение, введенное в один элемент управления со
значением, введенным в другой элемент, либо с
фиксированным значением
CustomValidator
Позволяет задавать
вводимых значений
RangeValidator
Проверяет, что значение, введенное пользователем, находится
между двумя величинами
RegularExpressionValidator
Проверяет введенное значение на соответствие указанному
шаблону
RequiredFieldValidator
ValidationSummary
Проверяет обязательное наличие введенного значения
Отображает отчет обо всех ошибках проверки значений,
произошедших на веб-странице
пользовательский
метод
проверки
2. Порядок выполнения лабораторной работы
2.1 Серверные элементы управления HTML.
Создайте новый проект в ASP.NET.
В дизайнере веб – форм в нижней части выберите закладку Разделитель (Split).
14
Впишите в дизайнере веб – форм
страница Default.aspx.
«Ваша оценка» и нажмите Enter. Изменяется и
Добавьте на форму стандартный HTML элемент ввода данных – Imput(Radio).
15
Для элемента установите необходимые свойства:
Рядом с элементов Radio впишите «Отлично»
16
Добавьте атрибут runat="server" в соответствующий HTML элемент.
Код формы должен выглядеть следующим образом:
<form id="form1" runat="server">
<div>
Ваша оценка:<br><br>
<input id="Radio1" type="radio" title="Отлично" value="Отлично" runat="server"/>Отлично<br />
<input id=" Radio 2" type="radio" value="Хорошо" runat="server" />Хорошо<br />
<input id=" Radio 3" type="radio" value="Удовлетворительно" runat="server" />Удовлетворительно<br />
<input id=" Radio 4" type="radio" value="Неудовлетворительно" runat="server" />Неудовлетворительно<br />
<p id="ans" runat="server"></p>
<br>
<input id="Button1" type="submit" value="Отправить" OnServerClick="submit" runat="server" /><br />
</div>
</form>
Обработчик события OnServerClick необходимо описать в файле Default.aspx.cs. Код
метода submit:
protected void submit(object sender, System.EventArgs e)
{
if (Radio1.Checked == true)
ans.InnerHtml = "Вы оценили на отлично";
else if (Radio2.Checked == true)
ans.InnerHtml = "Вы оценили на хорошо";
else if (Radio3.Checked == true)
ans.InnerHtml = "Вы оценили на удовлетворительно";
else if (Radio4.Checked == true)
ans.InnerHtml = "Вы оценили на неудовлетворительно";
else
ans.InnerHtml = "Вы не выбрали оценку";
}
Выполните компиляцию проекта и запустите его на выполнение (либо вручную
загрузите документ в браузере, указав URL соответствующего виртуального каталога).
17
2.2 Элементы управления веб-сервера.
Создайте Веб – приложение.
Если для вновь созданного проекта типа ASP.NET Web Application в файле Default.aspx
внутри формы вставить следующий код (или сделать это перетаскиванием нужных элементов
из панели инструментов, раздел “Стандартный”):
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ListBox ID="ListBox1" runat="server" Height="124px" AutoPostBack="True"
OnSelectedIndexChanged="ListBox1_SelectedIndexChanged" Width="120px">
<asp:ListItem value="Sunday">Воскресенье</asp:ListItem>
<asp:ListItem value="Monday">Понедельник</asp:ListItem>
<asp:ListItem value="Tuesday">Вторник</asp:ListItem>
<asp:ListItem value="Wednesday">Среда</asp:ListItem>
<asp:ListItem value="Thursday">Четверг</asp:ListItem>
<asp:ListItem value="Friday">Пятница</asp:ListItem>
<asp:ListItem value="Saturday">Суббота</asp:ListItem>
</asp:ListBox>
<div>
<asp:Label id="Label1" runat="server" ForeColor="Blue"/>
</div>
</form>
</body>
</html>
и описать обработку событий Page_Load и OnSelectedIndexChanged в соответствующем
*.aspx.cs файле:
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = "Ваш выбор: " + Label1.Text;
}
protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
{
if (ListBox1.SelectedItem != null)
Label1.Text = "Ваш выбор: " + ListBox1.SelectedItem.Value;
else
Label1.Text = "Ваш выбор: ";
}
то при запуске проекта после выбора пользователем элемента из списка можно будет увидеть в
окне браузера:
В данном примере атрибут AutoPostBack="True" указывает на необходимость
немедленной обработки события на сервере.
18
2.3 Серверные элементы управления для проверки данных (валидации)
Следующий код показывает, каким образом выполняется проверка содержимого поля
вода формы:
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server" Width="123px"></asp:TextBox>
<br />
<asp:RegularExpressionValidator
ID="RegularExpressionValidator1"
runat="server"
ControlToValidate="TextBox1"
ErrorMessage="Not valid e-mail"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" >
</asp:RegularExpressionValidator>
</form>
В данном случае атрибут ControlToValidate указывает на то, что контролируется
содержимое элемента с идентификатором TextBox1 (поля ввода текста), в случае несоответствия
содержимого контролируемого поля с шаблоном, описанном в виде регулярного выражения в
атрибуте ValidationExpression, выдается сообщение, указанное в атрибуте ErrorMessage.
Шаблон описывает допустимый формат адреса электронной почты. Добавьте код в проект
и проверьте работу приложения.
3. Контрольные задания
Задание №1.
Создайте Веб – приложение.
Перейдите на вкладку Конструктор и при помощи панели инструментов поместите на
форму 4 элемента: Label (Метка)-2 шт., Button (Кнопка), TextBox (Текстовое поле).
Таблица 1. Настройте свойства элементов, которые нам понадобятся:
Элемент
Свойства
Label1
Text= Введите предложение
Button1
Text=Нажмите
Сейчас нам нужно написать код на языке C#, чтобы при нажатии на кнопку выполнялись
определенные действия. Для этого дважды щелкнем мышкой на объектеButton1. Откроется
окно кода. Как вы можете видеть, здесь уже сгенерирован довольно объемный код. Курсор
находится внутри блока обработчика события «Нажатие кнопки».
Напишем следующую строку: Label2.Text = TextBox1.Text;
19
Все очень просто. Свойству Text объекта Label2 мы присваиваем значение свойства Text
объекта TextBox1, то есть текст, введенный пользователем.
Нужно отметить, что язык C# различает верхний и нижний регистр, поэтому, например,
label2 будет считаться ошибкой. В конце каждой строки кодаC# ставится точка с запятой.
Итак, ваше первое приложение готово. Нажмите F5, чтобы запустить его.
Задание №2. Дано три стороны треугольника: a, b, c. Используя формулу Герона,
разработать приложение, которое находит площадь треугольника. Приложение реализовать как
Web-application.
Обработчик события Button1_Click(…).
protected void Button1_Click(object sender, EventArgs e)
{
double a, b, c, p, s;
a = Double.Parse(TextBox1.Text);
b = Double.Parse(TextBox2.Text);
c = Double.Parse(TextBox3.Text);
p = (a + b + c) / 2;
s = Math.Sqrt(p * (p - a) * (p - b) * (p - c));
TextBox4.Text=s.ToString();
}
Задание №3.
Создадим Web-приложение, позволяющее клиенту выбрать
поздравительную открытку на свой вкус (выбрать цвет, написать поздравительный текст,
поместить рисунок).
1. Создайте новый Web-проект в среде Visual Studio.NET.
2.Оформление формы и установка свойств объектов.
Поместите на Web-форму следующие объекты: Label1, Label2, DropDownList1
(Выпадающий список), RadioButtonList (Список переключателей), TextBox1, Button1.
Все эти элементы постарайтесь разместить в левой части вашей формы. На оставшемся
месте справа поместите объект Panel1. Затем на объекте Panel1 разместите еще два объекта –
Label3 (вверху) и Image1 (внизу).
С элементами Label, TextBox и Button мы уже знакомы. Рассмотрим новые для нас
объекты.
DropDownList - Этот элемент управления представляет собой раскрывающийся список с
возможность выбора только одного элемента.
RadioButtonList - Элемент управления RadioButtonList представляет собой совокупность
переключателей, сгруппированных в одном списке. Одновременно может быть выбран только
один переключатель, находящийся в группе.
Panel- Элемент управления Panel используется для группировки других элементов
управления. Он может иметь или не иметь рамку. Этот элемент удобно применять для скрытия
нескольких элементов управления, задавая его свойству Visible значение false. Такая
технология предоставляет вам возможность имитации многостраничного мастера на одной
странице, скрывая или показывая различные элементы управления Panel.
Image- Этот элемент управления выводит на экран изображение (обычно из файла
формата GIF, JPG или PNG).
Путь к файлу, содержащему изображение, указывается в свойстве ImageURL. Например:
Image1.ImageURL = @ “file:///d:\allneed\dog.jpg”
Установите свойства простых объектов, как указано в табл.2.
20
Таблица 2. Свойства элементов управления
Объект
Свойства
Label1
Text=Цвет фона
Label2
Text=Введите текст поздравления
Label3
Text=
Font.Size=X-Large
TextBox1
TextMode=Multiline
Button1
Text=Обновить
Panel1
BorderStyle=Double
GorizontalAlign=Center
Visible=False
Image1
Чтобы добавить элементы в список DropDownList, нужно заполнить свойство Items. Для
этого нужно нажать на кнопку
добавления элементов в список.
и выбрать «Правка элементов». Откроется окно для
Окно добавления элементов в список DropDownList.
Для того, чтобы добавить элемент, нажмите кнопку Добавить. В правой части окна
установим свойства нового элемента:
21
Свойство Selected – если оно установлено в true, то при загрузке Web-страницы этот
элемент списка будет выбран; только один элемент из всего списка можно выделить. Selected=
true.
Свойство Text – этот текст появится в созданном нами элементе списка. Text = Белый.
Свойство Value – это значение элемента списка; оно используется в нашей программе.
Value=Белый.
Точно так же создайте еще несколько элементов списка (например, Оранжевый (Orange),
Золотой (Золотой), Желто-зеленый (GreenYellow). Не забывайте, что свойство Selected у всех
остальных элементов должно быть установлено в false.
Добавить элементы в список RadioButtonList можно так же, как и в список
DropDownList. Добавьте элементы в список переключателей, как показано на рисунке.
Окно добавления элементов в список RadioButtonList.
Ваша страница должна выглядеть, как на рисунке.
22
Web-форма «Поздравительная открытка»
Задание положения происходит с помощью меню Формат -> Задать положение
3.Обработка событий.
23
Двойным щелчком мыши по кнопке Button1 перейдем в редактор кода. Для события
«Нажатие кнопки» напишем следующие строки.
protected void Button1_Click(object sender, EventArgs e)
{
Panel1.BackColor = Color.FromName(DropDownList1.SelectedItem.Value);
Label3.Text = TextBox1.Text;
switch (RadioButtonList1.SelectedIndex)
{
case 0: Image1.Visible = false;
break;
case 1:
Image1.ImageUrl = @" https://avatars.mds.yandex.net/get-pdb/216365/21966aea2042-492c-b407-7075675b57de/s1200";
Image1.Visible = true;
break;
case 2:
Image1.ImageUrl = @"свой путь";
Image1.Visible = true;
break;
case 3:
Image1.ImageUrl = @"свой путь";
Image1.Visible = true;
break;
case 4:
Image1.ImageUrl = @"свой путь";
Image1.Visible = true;
break;
}
}
И добавьте using System.Drawing;
Разберем эти строки подробнее.
Panel1.BackColor = Color.FromName (DropDownList1.SelectedItem.Value );
Эта строка устанавливает свойство BackColor (цвет фона) объекта Panel1 в значение,
выбранное
пользователем
из
списка
DropDownList1.
Строка
DropDownList1.SelectedItem.Value получает значение свойства Value выбранного элемента
списка. Затем это значение получает функция Color.FromName и присваивается свойству
BackColor элемента Panel1. Таким образом, выбрав из списка необходимый цвет, можно задать
цвет фона нашей открытки.
Label3.Text = TextBox1.Text;
С этой строкой вы уже знакомы по уроку 1. Текст, введенный пользователем в текстовое
поле, появится на метке Label3.
Теперь рассмотрим структуру switch – case. С помощью этого блока операторов можно
обработать выбор элемента из списка RadioButtonList.
switch(RadioButtonList1.SelectedIndex)
В скобках указана переменная, значение которой определяет, какой блок операторов case
будет исполняться. Свойство SelectedIndex – это номер элемента по порядку, начиная с нуля.
То есть, если будет выбран первый элемент (SelectedIndex = 0), выполнится блок:
Case 0:
Image1.Visible = false;
Оператор break в конце каждого блока case необходим для того, чтобы выполнялись
строки кода, находящиеся сразу после всех операторов case.
24
В зависимости от того, какой рисунок выбрал пользователь, соответствующий файл
загружается в свойствоImage1.ImageUrl.
4.Запуск приложения.
25
