Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

Основы технологии ASP.NET (методичка)

.pdf
Скачиваний:
83
Добавлен:
08.03.2016
Размер:
1.01 Mб
Скачать

11

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

Для отдельных ячеек таблицы интерес представляют свойства:

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

rowspan. Свойство весьма похоже на только что рассмотренное свойство colspan. Но

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

Компонент с наименованием Image позволяет размещать на разрабатываемых Webстраницах графические изображения и видеоклипы. Естественно, основные параметры данного компонента задаются при помощи все тех же свойств.

alt. Свойство задает текст, который будет отображаться в виде хинта-подсказки при наведении пользователем курсора мыши на загруженную и отображенную браузером картинку. В том случае, если по каким-либо причинам искомое графическое изображение не будет загружено, напри мер, из-за неверной ссылки на неrо или установок браузера, данная текстовая строка будет отображена вместо картинки или видеоклипа.

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

src. Свойство содержит URL, указывающий на графический файл, в котором хранится искомое изображение, предназначенное для отображения на Webстранице.

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

vspace. Свойство устанавливает размер отступа от границы графического

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

Элемент Horizontal Rule позволяет размещать на Web-странице горизонтальную линию.

align. Указывает горизонтальное позиционироиание линии. В качестве значения свойства исполъзуется одно из трех ключевых слов - center, left или right, которые центрируют линию, или прижимают ее к левому или правому краю окна просмотра браузера, соответственно.

color. Свойство задает цвет отображаемой горизонтальной линии.

noshade. Логическое значение, указываюшее, будет ли горизонтальная линия иметь тень, или нет. Если пользователь исполъзует значение False, то вместе с линией будет отображена и ее тень.

size. Свойство задает толщину отображаемой горизонтальной линии в пикселах.

width. Задает длину горизонтальной линии. Длина ыtожет указываться как в процентах, так и в пикселах.

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

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

12

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

Вкладка Стандартные:

Label. Предназначен только для отображения текста.

TextBox. Однострочное поле текстового ввода.

Button. Создает кнопку.

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

ImageButton. Выглядит как обычное графическое изображение, но на деле является кнопкой.

HypeLink. Предназначен для создания гиперссылок на разрабатываемой Webстранице.

DropDownList. Позволяет пользователю ввести свое текстовое значение или выбрать его из выпадающего текстового списка.

ListBox. Позволяет пользователю выбрать одно или несколько значений из спика.

Repeater. Предназначен для отображения повторяющихся элементов оформления Wеb-страницы. Установка параметров отображения производится при помощи тегов HTML, т. е. визуальных средств устатановки параметров отображения у данного компонента нет.

CheckBox. Создает единичный независимый переключатель. В отличие от своего предшественника с палитры HTML, данный компонент содержит помимо самого переключателя еще и текст, идентифицирующий его.

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

RadioButton. Предназначен для создания кнопки-переключателя. Обычно в одиночном виде не используется.

RadioButtonList. Предназначен для создания группы переключателей.

Image. Позволяет внедрять в состав содержимого Web-страницы графическое изображение.

Panel. Создает на разрабатываемой Wеb-странице блок-контейнер, в котором могут быть размещены другие элементы.

PlaceHolder. Как и предыдущий компонент, он является контейнером для элементов Wеb-странииы. Однако он предназначен для размещения элементов, которые динамически создаютея Web-приложением, т. е. на момент первоначалъной загрузки и отображения Web-страницы эти элементы еще не существовали.

Calendar. Достаточно интересный компонент, который отображает календарную панель на Wеb-странице. Очень удобно использовать подобный функционалъный элемент на сайтах с большим информационным наполнением, разбитым по датам.

AdRotator. Позволяет отображать в заданной или случайной последовательносrи графические изображения.

Xml. Предназначен для отображения на Web-странице данных, полученных из XMLдокументов.

13

Вкладка Проверка:

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

CompareValidator. Применяется для проверки равенства или неравенства (соотношение больше-меньше) некоего знаxения, введенного пользователем.

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

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

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

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

Вкладка Данные:

GridView. Отображает данные в форме таблицы.

DetailsView. Может использоваться для отображения отдельных строк из БД.

SqlDataSource. Используется для подключения к базам данных SqlServer или Oracle.

AccessDataSource. Используется для подключения к базе данных Access.

Пример взаимодействия с базой данных

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

1.В СУБД Access создать базу данных Студенты из одной таблицы Студенты со следующими полями: ФИО (ключевое), Возраст, Факультет. Заполнить несколькими записями.

2.Создать новое приложение ASP.NET в среде Microsoft Web Developer Express.

3.Чтобы добавить базу данных в наш проект, щелкните правой кнопкой по папке

App_Data и выберите из меню вариант Добавить существующий элемент….

4.Перейдем в режим конструктора страницы Default.aspx и перетащим серверный элементу управления RadioButtonList на страницу. Для размещения этого элемента управления на странице, используйте параметры меню Формат->Задать положение->Абсолютное. Свойству RepeatDirection установите значение

Horizontal, чтобы радиокнопки располагались горизонтально.

5.Разместите на странице серверный элемент управления AccessDataSource. Установите над ним курсор и с помощью клавиши Enter поместите вниз.

14

6.Наведите курсор на этот элемент управления и нажмите на кнопку > в правом верхнем углу элемента управления. Выберите пункт Настроить источник данных…. Появится следующее окно:

15

7.Нажмитена кнопку Обзор… и выберите файл базы данных из дерева каталогов, как показано на рисунке.

8.Нажмите кнопку ОК,а затем кнопку Далее.

9.Построим выражение Select, которое будет извлекать все возможные названия факультетов из БД. Для этого поставим флажок у столбца Факультет. Чтобы не повторялись одинаковые названия факультетов, поставьте флажок рядом с надписью Возвращать только уникальные строки.

16

10.Нажмите кнопку Далее, а затем кнопку Пробный запрос, чтобы проверить результат выполнения запроса.

11.Нажмите кнопку Готово.

12.Наведите курсор на группу радиокнопок и нажмите на кнопку > в правом

17

верхнем углу элемента управления. Выберите пункт Настроить источник данных…. В появившемся окне выбрать источник данных AccessDataSource1.

13.Добавьте на страницу кнопку Button и еще один элемент AccessDataSource, а также элемент GridView.

14. При настройке элемента управления AccessDataSource2 в настройках оператора

18

Select укажите столбцы ФИО и Возраст, а также поставьте галочку рядом со строкой Возвращать только уникальные строки.

15.Чтобы найти студентов, которые учатся на факультете, выбранном из группы радиокнопок, необходимо в запрос добавить оператор WHERE. Для этого нажмите кнопку WHERE …, выберите столбец Факультет, оператор =, а в качестве источника Control. Затем в качестве идентификатора элемента выберите

RadioButtonList1. Нажмите на кнопку Добавить, а затем ОК.

16.Для элемента GridView выберите источник данных AccessDataSource2.

17.Запустите приложение (Файл -> Просмотр в обозревателе).

19

Некоторые встроенные объекты

1.Объект Response. Выполняет пересылку информации браузеру удаленного пользователя.

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

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

4.Объект Server. Позволяет приложению напрямую оперировать некоторыми установками самого WWW-сервера.

5.Объект Session. Позволяет разработчику отслеживать сеансы работы отдельных пользователей с сайтом, на котором функционирует приложение ASP.NET.

Пример создания приложения из двух страниц

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

1.Создайте новое приложение ASP.NET.

2.Добавьте страницу WebForm2.aspx. Для этого в Обозревателе решений правой кнопкой мыши щелкните по названию проекта, выберите Добавить → Создать элемент → Форма WebForm. Введите имя WebForm2.aspx и нажмите Добавить.

3.На странице Default.aspx в режиме конструктора в уже существующий элемент Div

добавьте текст «Введите ваше имя». Добавьте компоненты Input (Submit) и Input(Text).

20

Для кнопки Input (Submit) установите value = “Подтвердить”.

4. В созданный HTML-код в тэг <form> добавьте следующие значения для атрибутов method и action:

<form id=”Form1” method=”post” action=”WebForm2.aspx”>

Атрибут method указывает метод, при помощи которого будет передаваться информация обрабатывающему приложению. Всего может быть использовано два метода — Post и Get. Атрибут action в качестве своего значения содержит URL того приложения, которое будет обрабатывать данные, введенные пользователем в органы управления формы. В нашем случае мы указали на ASP-страницу с наименованием

WebForm2.aspx.

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

<input id="Text1" type="text" name="t1"/>

При помощи атрибута name мы устанавливаем наименование поля.

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

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

protected void Page_Load(object sender, EventArgs e)

{

Label1.Text = "Здравствуйте, " + Request.Form.Get("t1")+"!";

}

6. Перейдите к вкладке Default.aspx и запустите приложение в браузере. Введите имя пользователя и нажмите на кнопку.

После нажатия на кнопку должна появиться следующая страница: