Практическая работа №3. Добавление функциональных элементов к веб-приложению.
Введение
Цель работы: создание процедуры обработки события Page_Load с
использованием проверки Page.IsPostBack.
Основные понятия
Вы можете добавить код на вашу веб-форму в том же файле, что и веб-содержимое, в отдельный раздел SCRIPT того же файл, либо в отдель-
ном файле. Страницы с выделенным кодом содержат всю логику програм-
мирования для одной веб-странице. Встроенный код использует HTML и
код на отдельных участках одного файла .aspx.
Вы можете добавить код на веб-форму следующими тремя способа-
ми:
Смешанные код. Код находится в том же файле, что и веб-
содержимое.
Встроенный код. Код находится в отдельном разделе SCRIPT в
одном файле с HTML-содержимое.
Выделенный код находится в отдельном файле с HTML-
содержимое.
Вы можете столкнуться со страницами, использующие встроенный код, особенно страницы, которые были разработанные для ASP.
Встроенный код располагает HTML и код в отдельных разделах од-
ного файла .aspx. Такое разделение необходимо для ясности, HTML и код могут существовать в любом месте страницы.
Visual Studio, по умолчанию, использует страницы с выделенным ко-
дом для реализации серверного кода. Логика программирования веб-
страницы, заключающаяся в выделении в отдельном файле визуальных
21
элементов страницы, позволяет разработчикам и дизайнерам работать од-
новременно.
Каждая веб-страница в веб-приложении имеет свой собственный вы-
деленный кодом. Страницы с выделенным кодом имеют расширения aspx.vb или aspx.cs.
Для страницы с выделенным кодом, каждая . aspx-страница должна быть связана со страницей с выделенным кодом. aspx-страница и страница с выделенным кодом формируют единый модуль при запуске веб-
приложения.
Visual Studio, по умолчанию, прекомпилирует страницу с выделен-
ным кодом. Это экономит значительные ресурсы и упрощает развертыва-
ние веб-сайта.
Вы можете использовать процедуры обработки событий от взаимо-
действия пользователя с веб-формой. Существуют два типа процедуры со-
бытий: на стороне клиента и на стороне сервера. Процедуры событий на стороне клиента – это события, которые обрабатываются на компьютере,
который запрашивает веб-форму. Процедуры событий со стороны сервера запрашивают информацию, которая должны быть отправлена на веб-
сервер для обработки. Сервер-ориентированные процедуры более мощные,
чем процедуры обработки событий на стороне клиента.
Динамические и интерактивные веб-формы обычно реагируют на действия пользователя. Процедуры обработки событие обрабатывают вза-
имодействие пользователя с веб-формой.
Обработчики событий – это действие, которое происходит в ответ на генерируемое событие.
Технология выполнения работы
В этом упражнении вы создадите процедуру обработки события
Page_Load для странице Default.aspx. В процедуре обработки события
22
Page_Load, вами будет добавлен код для чтения переченя преимуществ от компонента Benefits, который вы создали в первой практической работе.
Затем вы будете отображать преимущества в элементе управления
CheckBoxList.
Основными задачами этого мероприятия являются:
Откройте преимущества веб-сайта.
Вызовите компонент страхования.
Удаление временных элементов списка.
Добавить Page.IsPostBack испытаний.
Задача 1: Откройте преимущества веб-сайта.
1.Запустите Visual Studio.
2.В Visual Studio откройте веб-сайт Benefits.
Задача 2: Вызов компонента Преимущества.
1.Откройте веб-страницу Default.aspx в режиме конструктора.
2.Создать процедуру события Page_Load на странице Default.aspx.
Откроется страница с выделенным кодом и добавиться шаблон для процедуры обработки события Page_Load.
3. В процедуре обработки события Page_Load, создайте новый эк-
земпляр класса Benefits и сохранить его в переменной benefitsList.
4.Создайте цикл foreach (Visual C#) для вызова метода
GetBenefitsList, который возвращает массив Benefits.BenefitInfo. Создайте переменную с именем benefit типа Benefits.BenefitInfo, которая будет вы-
ступать в качестве счетчика цикла.
5. В цикле, сгенерируйте строку и добавьте ее к коллекции Items
элемента управления listBenefitsCheckBoxList с помощью метода
Items.Add. Формат строки заключается в следующем.
<a href=item.benefitPage> item.benefitName </ а>
6.Сохранить все файлы.
7.Открыть Default.aspx в браузере.
23
Сейчас список ListBenefitsCheckBoxList содержит гиперссылки на другие страницы, помимо первоначальных значений пунктов, как показано на следующей иллюстрации.
Рис. 7. Отображение страницы в браузере. 8. Нажмите на ссылку Life Insurance.
Появится страница. life.aspx
9. Нажмите на ссылку Home, чтобы вернуться к странице
Default.aspx.
10. Нажмите дважды на кнопку Submit.
Дубликат списка льгот будет добавлен в список listBenefitsCheckBoxList. Список льгот добавляется в элемент управления при каждом щелчке на кнопку Submit. Это потому GetBenefitsList метод вызывается в процедуре обработки события Page_Load, и это процедура обработки события выполняется каждый раз, когда веб-форма размещена обратно на сервер.
11. Закройте браузер.
Список ListBenefitsCheckBoxList отображает только список тех льгот, которые поддержены в компоненте Benefits, а не первые три вре-
менные пункты. Кроме того, перечень преимуществ не добавляется в спи-
24
сок при каждом обновлении этой странице. Для решения этих проблем вы-
полните следующие процедуры.
Задача 3: Удалите временные элементы списка.
1.Откройте веб-страницу Default.aspx в режиме конструктора.
2.В окне редактора, выберите элемент управления
listBenefitsCheckBoxList.
3. В окне свойств выберите Items, а затем нажмите кнопку с много-
точием (...) рядом с (Collection).
4. В диалоговом окне ListItem Collection Editor, в список Members,
нажмите пункт, а затем нажмите кнопку Remove. Повторите этот шаг, пока все три члена не будут удалены из коллекции, а затем нажмите кнопку ОК.
Задача 4: Добавить условия Page.IsPostBack.
1. В процедуре обработки события Page_Load на странице default.aspx, добавьте условие Page.IsPostBack, для того, чтобы добавлять элементы из компонента в элемент listBenefitsCheckBoxList только, когда страница отображается в первый раз.
2.Сохранить все файлы.
3.Открыть Default.aspx в браузере.
Теперь список отображает только элементы из компонентов страхо-
вания.
4. Нажмите Submit два или более раз.
Компонент Benefits вызывается только при первом отображении страницы, потому что вы добавили условие Page.IsPostBack. Таким обра-
зом, пункты добавляются к listBenefitsCheckBoxList только один раз.
Результаты: После этого упражнения, вы вызвали компонент Benefits
для отображения списка льгот, удалили временные пункты списка, и доба-
вили условие Page.IsPostBack для отображения преимуществ только один раз.
Упражнение 2: Создание процедуры обработки события Click.
25
В этом упражнении вы создадите процедуру события нажатия на кнопку Submit на странице Default.aspx. Когда пользователь нажимает кнопку "Submit", процедура считывает перечень преимуществ и затем вы-
водит выбранную льготу в надпись на странице Default.aspx.
Основной задачей этой работы заключается в следующем: создать процедуру обработки события нажатия кнопки мыши и отображения вы-
бранного преимущества в виде гиперссылок.
Задача 1: создать процедуру события нажатия и отображения вы-
бранного выгоды, гиперссылок
1.Откройте веб-страницу Default.aspx в режиме конструктора.
2.В окне редактора, создать процедуру события нажатия на кнопку
Submit.
Открывается файл кода и отображает новое событие
submitButton_Click процедуры.
3.В процедуре обработки события submitButton_Click переберите список пунктов элемента управления listBenefitsCheckBoxList. По каждому пункту, если значение свойства Selected равно true, добавить строку в свойство Text элемент управления selectionsLabel.
4.Сохранить все файлы.
5.Открыть Default.aspx в браузере.
6.Выберите несколько преимуществ из списка, а затем нажмите кнопку Submit.
Label отображает список выбранных элементов в виде гиперссылок.
Результаты: После этого упражнения, вы имеете преимущества из списка в качестве гиперссылок на надписи в веб-странице Default.aspx.
Вопросы для самоконтроля
1. Каковы преимущества и недостатки каждого метода добавления
кода?
26
2.Каковы преимущества и недостатки JIT и прекомпиляции?
3.Каковы преимущества и недостатки процедур обработки собы-
тии, на стороне клиента?
4. Каковы преимущества и недостатки процедур обработки собы-
тии, на стороне сервера?
5. Каковы основные различия между созданием сервер-
ориентированного обработчика события в Visual C # и Visual Basic?
6.Как вы можете создать по умолчанию обработчик события для элемента управления?
7.Каковы ключевые свойства серверных элементов управления?
8.Как можно из элемента управления HTML сделать элемент управления веб-сервером?
9.В чем преимущество страниц с выделенным кодом?
10.Как страница с выделенным кодом, связанна со страницей с рас-
ширением . ASPX?
Время, отведенное на выполнение работы
Работа должна быть выполнена за три занятия – 6 часов.
Отчет сдается на последнем занятии.
27
Практическая работа №4. Создание и использование пользовательского элемента управления.
Введение
Цель работы: создание пользовательского элемента управления, ко-
торый собирает информацию, а затем использование этого элемента управления на другой странице.
Основные понятия
В дополнении к Hypertext Markup Language (HTML) и веб-серверным элементам управления, можно легко создать свой собственный элемент управления. Эти элементы управления называются пользовательскими.
Пользовательские элементы управления предоставляют легкий способ по-
вторного использования компонентов графического интерфейса (UI) и ко-
да через веб-приложение.
Пользовательский элемент управления – это страница Microsoft ASP.NET, которую можно импортировать как серверный элемент управле-
ния. Подобно веб-серверным элементам управления, являющимися компо-
нентами, которые работают на сервере, пользовательские элементы управ-
ления обеспечивают пользовательский интерфейс и другие связанные с этим функции. После того как вы создали пользовательский элемент управления, другие веб-страницы, прочем как и веб-приложения могут ис-
пользовать его.
Пользовательские элементы управления позволяют повторно ис-
пользовать код и общие элементы пользовательского интерфейса. Пользо-
вательские элементы управления имеют следующие особенности:
Пользовательский элемент управления находится в странице веб-
форм.
28
Пользовательский элемент управления участвует в жизненном цикле событий для веб-форме.
Пользовательский элемент управления имеет свою собственную логику страницы.
Пользовательские элементы управления имеют ряд преимуществ,
включая следующие:
Пользовательские элементы управления являются автономными.
Ни один из методов и свойств пользовательского элемента управления не конфликтует с методами или свойствами хостинговой страницы.
Пользовательские элементы управления могут быть использова-
ны более чем один раз в хостинг странице, не вызывая конфликтов свойств
иметодов.
Пользовательские элементы управления могут быть написаны на разных языках.
Вы можете создать пользовательский элемент управления с исполь-
зованием одного из следующих двух методов:
Создание нового пользовательского элемента управления с ис-
пользованием диалогового окна Add New Item (Добавить новый элемент) в
Visual Studio.
Преобразование существующей страницы ASP.NET для пользо-
вательского элемента управления путем изменения расширение файла страницы . ASCX и изменения разметки в коде элемента управления.
Технология выполнения работы
Упражнение 1: Создание пользовательского элемента управления.
В этой практической работе, вы создадите пользовательский элемент управления, который собирает информацию, а затем реализуете этот эле-
мент управления на странице medical.aspx веб-сайта.
29
В этом упражнении вы создадите пользовательский элемент управ-
ления на основе элементов управления Name и Birth Date из странице
life.aspx.
Основными задачами этого мероприятия являются:
1.Откройте преимущества веб-сайта.
2.Создание пользовательского интерфейса.
3.Создание свойств для пользовательских элементов управления.
Задача 1: Откройте преимущества веб-сайта
1.Запустите Microsoft Visual Studio.
2.Откройте веб-сайт Benefits.
Задача 2: Создание пользовательского интерфейса.
1. Добавить новый пользовательский элемент, названный как nameDate.ascx, на веб-сайт Benefits.
2.Откройте страницу life.aspx в режиме конструктора.
3.На странице life.aspx, скопируйте Label, TextBox и другие элемен-
ты управления контейнеров Name и Birth Date (в общей сложности семь
элементов управления).
4.Откройте страницу nameDate.ascx в режиме конструктора.
5.Вставьте элементы управления, которые вы только что скопирова-
ли на страницу nameDate.ascx.
6. На странице nameDate.ascx, установите ширину таблицы, которая содержит элементы управления до 335 пикселей.
Ваш пользовательский элемент управления должен выглядеть как на следующем рисунке.
Рис. 8. Пользовательский элемент управления.
30