Лабораторная работа № 1
Web Forms и Visual Studio .NET 2005
Краткие теоретические сведения
Visual Studio .NET привносит методы быстрой разработки приложений в Web-программирование. Вы создаете форму, выбирая элементы управления из палитры и размещая их на поверхности формы. Вы пишете обработчики событий, дважды щелкая элементы управления и заполняя пустые тела методов. А для компиляции и запуска своих приложений применяете простые команды меню. Неслучайно создание Web-форм в Visual Studio .NET выглядит очень похожим на написание Windows-приложений с помощью Visual Basic. Именно это ощущение сходства Microsoft и старается поддержать.
Теоретическая часть лабораторной работы состоит в пошаговом описании процесса создания Web-приложения расчета платежей по закладным с помощью Visual Studio .NET (рис.1). Введите размер займа, процентную ставку, срок займа (в месяцах) и щелкните кнопку Compute Payment. Рассчитанный месячный платеж будет отображен внизу страницы.
Рис. 1 - Web-программа расчета платежей по закладным
Шаг 1: Создание проекта Web-приложения
Запустите Visual Studio .NET. В меню выберите команду File/New Web Site. В открывшемся диалоговом окне задайте Templates: ASP.NET Web Site, Language: Visual C# и путь к каталогу, где будет сохранен ваш проект.
Шаг 2: Добавление таблицы
Щелкните окно дизайнера Web-форм Design, чтобы установить на нем фокус ввода. Затем, выбрав команду Visual Studio.NET Table/Insert/Table, добавьте к Web-форме HTML-таблицу. Заполните появившееся диалоговое окно Insert Table (рис.2). В частности, установите Rows в 4, Columns в 2, Width в 100 %, Border Size в 0 и Cell Padding в 8. После щелчка ОК таблица появится в окне дизайнера форм.
Или: Перетащите на форму элемент управления Table с вкладки HTML панели инструментов. При этом вы увидите таблицу размером 3х3. Измените ее размер на 4х2 следующим образом:
-
нажмите правую кнопку мыши в области таблицы, выберите в появившемся меню пункт Insert Rows Above;
-
выделите один из столбцов, нажмите правую кнопку мыши в области выделенного столбца, выберите в появившемся меню пункт Delete Column.
Рис. 2 - Добавление таблицы к Web-форме
Шаг 3 Добавление текста
Щелкните ячейку в левом верхнем углу таблицы. На экране появится курсор – любой введенный вами текст будет помещен в данную ячейку таблицы. Введите «Principal». Затем перейдите в окно Properties и измените свойство align ячейки на «right», чтобы выровнять текст по правому краю. Аналогично добавьте «Rate (percent)» в ячейку следующей строки и «Term (months)» в ячейку под ней. Перетащите вертикальный разделитель ячеек таблицы так, чтобы самая левая колонка таблицы стала достаточно широкой, чтобы вместить введенный текст. На рис.3 показан окончательный вид таблицы.
Рис. 3- Форма LoanCalc после добавления текста
Шаг 4: Добавление элементов управления TextBox
Перетащите в правые ячейки первых трех строк таблицы 3 элемента управления TextBox с вкладки Standard.
В окне Properties установите идентификаторы новых элементов управления в «Principal», «Rate» и «Term» соответственно (рис.4 ).
Рис. 4 - Форма LoanCalc после добавления элементов TextBox
Шаг 5: Добавление элемента управления Button
Добавьте элемент управления Button в самую правую ячейку нижней строки таблицы. Измените размер кнопки так, чтобы ее ширина совпадала с шириной текстового поля, расположенного над ней. Измените текст кнопки на «Compute Payment», а идентификатора — на «PaymentButton».
Шаг 6: Добавление элемента управления Label
Выберите в окне Toolbox элемент управления Label и добавьте его к форме прямо под таблицей (рис.5). Измените текст элемента управления на пустую строку, а идентификатор на «Output».
Рис. 5 - Форма LoanCalc после добавления элемента Label
Шаг 7: Редактирование HTML
Давайте улучшим внешний вид формы, добавив несколько элементов HTML. Сначала щелкните кнопку Source внизу окна дизайнера, чтобы отобразить HTML, сгенерированный для формы. Между тэгами <body> и <form> добавьте вручную операторы:
<h1>Mortgage Payment Calculator</h1> <hr>
Затем прокрутите текст до конца файла и между тэгами </table> и <asp:Label> добавьте операторы:
<bг> <hr> <br> <h3>
Перемесите тэг </h3>, вставленный Visual Studio .NET, так чтобы он располагался после тэга <asp:Label>. Теперь щелкните кнопку Design внизу дизайнера форм, чтобы выйти из режима Source в режим рисования формы. На рис. 6 показано, как должна выглядеть измененная форма.
Рис. 6 - Форма LoanCalc после добавления HTML-тегов
Шаг 8: Добавление обработчика Click
Дважды щелкните кнопку Compute Payment на форме. Visual Studio .NET добавит в WebForm1.aspx.cs метод PaymentButton_Click и отобразит его в редакторе программ. Добавьте этот код в пустое тело метода:
try {
double principal = Convert.ToDouble (Principal.Text);
double rate = Convert.ToDouble (Rate.Text) / 100;
double term = Convert.ToDouble (Term.Text);
double tmp = System.Math.Pow (1 + (rate / 12), term);
double payment = principal * (((rate / 12) * tmp) / (tmp - 1));
Output.Text = "Monthly Payment = " + payment.ToString ("c");
}
catch (Exception) {
Output.Text = "Error";
}
PaymentButton_Click — не просто метод, это обработчик события. Просмотрите код метода InitializeComponent, добавленный Visual Studio .NET в WebForm 1 .aspx.cs, и там вы увидите оператор, регистрирующий PaymentBulton_Click как вызываемый в ответ на событие Click кнопки Compute Payment. InitializeComponent вызывается из OnInit, который запускается, когда страница генерирует событие Init. Только что написанный вами обработчик реагирует на событие Click, извлекая из элементов управления TextBox данные, введенные пользователем, вычисляя соответствующий ежемесячный платеж и отображая результат в элементе управления Label.
Шаг 9: Компоновка и тестирование
Теперь необходимо испытать наше творение. Для компиляции кода выберите Build LoanCalc в меню Build. Если компоновка прошла без ошибок, выберите в меню Debug пункт Start (или Start Without Debugging) для запуска приложения. Когда Web-форма отобразится в Internet Explorer убедитесь, что она работает правильно, введя такие значения:
-
Principal: 100000
-
Rate: 10
-
Term: 240
Щелкните кнопку Compute Payment. Если внизу страницы появится «Monthly Payment = $965.02», можете себя поздравить — только что вы создали с помощью Visual Studio .NET свою первую Web-форму.
Текст программы LoanCalc
Среди множества файлов в каталоге LoanCalc наибольший интерес для нас представляют WebForml.aspx и WebForml.aspx.cs. Они содержат исходный код LoanCalc. (с назначением остальных файлов познакомимся в следующея лабраторной работе в особенности с Global.asax и Web.config. Большинство из этих дополнительных файлов в данном примере излишне, но Visual Studio .NET все равно создает их.) WebForml.aspx не содержит программного кода — только HTML. Visual Studio .NET всегда использует в своих Web-формах фоновый код, так что весь код на С# находится в WebForml.aspx.cs. Большая часть их содержимого сгенерирована Visual Studio.NET. Операторы, добавленные вами, показаны курсивом.
ASPX-файл определяет пользовательский интерфейс с помощью HTML и Web-элементов управления, а CS-файл содержит обработчик события Click от кнопки Compute Payment, а также код, подключающий этот обработчик к кнопке. Ни один из файлов не содержит ничего такого, чего вы не могли бы написать вручную, но совершенно очевидно, что визуальное создание Web-форм гораздо быстрее и меньше подвержено ошибкам, чем их ручное кодирование.
Многие разработчики (в том числе и не работающие на Microsoft) полагают, что Web-формы — это прообраз будущего Web-программирования. Пришло время инкапсуляции сложных алгоритмов форматирования и поведения в повторно используемые классы элементов управления и обработка Web-серверами событий, генерируемых этими элементами управления. Серверные элементы управления предоставляют строительные блоки для сложных Web-форм, в то же время изолируя разработчика от нюансов HTML и клиентских сценариев. Они дают реальные преимущества независимо от того, как вы на это смотрите.