Исходные условия
Подготовленный веб-сервер согласно лабораторной работе №1.
Задание 1. Создание нового проекта
Создание проекта в Visual Studio.
В Visual Studio следует выбрать пункт меню "File - New - Project". В появившемся окне выбрать вкладку "Web".
В появившемся окне выбрать шаблон "ASP.NET Web Application", указать имя и нажать кнопку "OK".
В новом проекте следует перейти во вкладку "Solution explorer" и кликнуть правой кнопкой по проекту, а в появившемся контекстном меню выбрать пункт "Properties".
В появившемся окне свойств можно указать имя сборки, информацию об авторе и авторских правах, назначить значок приложения, а также выбрать версию используемого .NET Framework.
Далее следует перейти на вкладку "Web".
На появившейся вкладе можно настроить приложение, чтобы оно работало в рамках сервера IIS. Для этого следует включить опцию "Use local IIS server" в секции "Servers".
Также в этой вкладке можно настроить страницу, которая будет запускаться по умолчанию при старте проекта. По умолчанию запускается текущая страница, с которой работает разработчик. Если необходимо иное поведение, его можно указать.
После этого, для запуска и отладки приложения следует выбрать пункт меню "Debug - Start Debugging" или воспользоваться горячей клавишей "F5".
Задание 2. Добавление элементов управления на форму
Добавление элементов управления на форму ASP.NET.
В окне "Solution Explorer" кликнете правой кнопкой мыши по проекту и выберите пункт "Add – New Item".
В появившемся окне выберете пункт "Web Form" и укажите имя новой страницы.
Откройте вновь созданную страницу для добавления на нее элементов управления.
При редактирования страницы в Visual Studio существует два режима – Design и Source. Первый режим визуально позволяет просматривать результат редактирования страницы и вносить изменения в текст, а второй – для изменения исходного кода HTML. Существует смешанный режим, при котором отображается и результат, и исходный код. Для переключения этих режимов используется панель внизу страницы.
Для добавления элементов управления на страницу следует выбрать один из режимов и переключиться на окно "Toolbox", в котором расположены все доступные элементы управления.
Для добавления элемента управления на форму, его следует перетащить. При этом на страницу будет добавлен соответствующий HTML-код. Перетащите на форму два элемента – Button и Calendar.
Запустите проект на исполнение. На отображаемой странице должны появится добавленные элементы управления.
Задание 3. Настройка элементов управления
Для определения параметров и внешнего вида элементов управления следует воспользоваться окном "Properties". Давайте определим параметры созданных в предыдущем задании элементов управления.
Откройте окно "Properties". Для этого следует выбрать пункт меню "View - Properties Window".
Появившееся окно отображает параметры текущего выделенного объекта. Выделите объект "Button", который расположен на форме. Окно "Properties" будет отображать текущие параметры для этого объекта.
Переопределите несколько параметров объекта. Например, задайте собственное значение в свойстве Text. При этом содержимое разметки HTML также изменится.
Теперь можно переопределить внешний вид элементов управления. Для этого необходимо выбрать элемент управления Calendar и в режиме "Design", нажать на всплывающую кнопку.
В появившемся меню выбрать пункт "Auto format".
В появившемся окне можно выбрать любой из существующих стилей для элемента управления.
После выбора стиля изменятся параметры, определяющие внешний вид элемента управления. При желании, можно исправить их таким образом, которым это требует приложение.
Задание 4. Определение обработчиков событий
Создание обработчиков событий для элементов управления.
Обработчики событий позволяют определить действия, выполняемые при свершении каких-либо событий. Например, такими событиями является нажатие на кнопку, выбор даты в календаре и т.д.
Выберите элемент управления "Button" на форме. В окне "Properties" переключитесь на вкладку "Events". В этой вкладке отображаются все события, обработчики которых можно определить.
Выберите событие "Click" и выполните двойной клик на этом событии. При этом произойдет переключение в режим написания кода для страницы и будет создан соответствующий обработчик.
Далее следует написать какой-либо код в обработчике, чтобы проверить его работоспособность. В данном случае, давайте напишем код, который будет заносить текущую дату в элемент управления Calendar по нажатию на кнопку.
Теперь при запуске приложения и нажатии на кнопку в элементе управления Calendar будет выбираться текущая дата.