Мировые информационные ресурсы

Создание простейшего приложения на базе ASP.NET

Показывать лекцию целиком

Исходные условия

Подготовленный веб-сервер согласно лабораторной работе №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 будет выбираться текущая дата.
  • Вернуться к учебному плану