Использование веб-форм для создания интерактивных веб-приложений

Добавление в веб-приложение элементов управления веб-форм

Теперь вы добавите в этот калькулятор аренды автомобиля элементы управления TextBox, Label и Button. Хотя эти элементы управления расположены на закладке Web Forms окна Области элементов, они очень похожи на элементы управления Windows Forms с теми же именами, которые вы уже использовали в этой книге. (Далее я опишу некоторые из важнейших отличий.) Добавив на страницу веб-формы эти элементы управления, установите для них параметры свойств.

Использование элементов управления TextBox, Label и Button

1. Отобразите закладку Web Forms окна Области элементов, если она не видна, и проверьте, что страница веб-формы находится в режиме сетки. (На форме должна быть видна сетка.)
2. Щелкните на элементе управления TextBox, а затем создайте на странице Web Forms под введенным вами текстом текстовое поле. Расположите это поле около левого поля формы. Visual Studio позволяет создавать элементы управления веб-форм точно так же, как вы создаете элементы управления форм Windows. Так как страница веб-формы находится в режиме сетки, вы можете точно задать размер и положение элементов управления. Обратите внимание на небольшой зеленый значок, который появляется в левом верхнем углу элемента управления и указывает, что этот элемент управления запускается на сервере.
3. Создайте под первым текстовым полем еще два текстовых поля. Теперь с помощью элемента управления Label создайте метки, указывающие на назначение текстовых полей.
4. Щелкните в Web Forms на элементе управления Label, а затем справа от первого объекта текстового поля нарисуйте метку.
5. Под первым объектом метки и справа от второго и третьего текстовых полей создайте еще две метки.

6. Используйте элемент управления Button и нарисуйте в нижней части страницы веб-формы кнопку. Элемент управления Button, как и элементы управления TextBox и Label, очень похож на свой аналог для форм Windows. Ваш экран должен выглядеть примерно так.

   

   
   

   Теперь необходимо установить свойства для этих семи новых элементов управления, созданных на странице веб-формы. При установке свойств вы заметите одно важное различие между веб-формами и формами Windows - знакомое свойство Name в веб-формах заменено свойством ID. Несмотря на различные имена, эти два свойства выполняют одну и ту же функцию.

7. Установите для объектов формы следующие свойства:

   Объект	Свойство	Установка
   TextBox1	ID	txtAmount
   TextBox2	ID	txtInterest
   TextBox3	ID	txtPayment
   Label1	ID	lblAmount
   	Text	Стоимость аренды
   Label2	ID	lblInterest
   	Text	Процентная ставка (например, 0.09)
   Label3	ID	lblPayment
   	Text	Ежемесячные выплаты
   Button1	ID	btnCalculate
   	Text	Вычислить

   Ваша страница Web Forms будет иметь следующий вид.

   

   
   

Написание процедур событий для элементов управления веб-формы

Вы пишете процедуры событий (или обработчики событий) для элементов управления страниц веб-форм, делая на этих объектах страницы веб-формы двойной щелчок мышью и вводя в Редакторе кода необходимый код программы. Хотя пользователь увидит эти элементы управления на странице веб-формы в веб-браузере, реальный исполняемый код находится на веб-сервере и запускается веб-сервером. Когда пользователь щелкает, например, на кнопке, браузер обычно посылает событие щелчка обратно на сервер, который обрабатывает это событие и посылает браузеру новую веб-страницу. Хотя этот процесс кажется аналогичным тому, который происходит в формах Windows, при использовании элемента управления на странице веб-формы большой объем действий происходит "за сценой".

В следующем упражнении вы попрактикуетесь в создании процедуры события для объекта btnCalculate, расположенного на странице веб-формы.