Создание web формы в visual studio
Обновлено: 05.07.2024
Для новой разработки веб-приложений рекомендуется Razor Pages. Дополнительные сведения см. в статье Приступая к работе с Razor Pages.
В данном пошаговом руководстве представлены следующие задачи.
предварительные требования
Для выполнения задач этого руководства необходимы:
Microsoft Visual Studio 2013 и Microsoft Visual Studio Express 2013 для Web, в этой серии руководств часто называют Visual Studio.
Если вы используете Visual Studio, в этом пошаговом руководстве предполагается, что вы выбрали коллекцию параметров веб-разработки при первом запуске Visual Studio. Дополнительные сведения см. в разделе как выбрать параметры среды веб-разработки.
Создание проекта веб-приложения и страницы
В этой части пошагового руководства вы создадите проект веб-приложения и добавите в него новую страницу. Вы также добавите HTML-текст и запустите страницу в браузере.
Создание проекта веб-приложения
Откройте среду Microsoft Visual Studio.
В меню Файл выберите пункт Создать проект.
Откроется диалоговое окно Создание проекта .
Присвойте проекту имя басиквебапп и нажмите кнопку ОК .
Затем выберите шаблон веб-формы и нажмите кнопку ОК , чтобы создать проект.
Visual Studio создает новый проект, содержащий предварительно созданные функции на основе шаблона веб-форм. Она не только предоставляет вам страницу Home. aspx , страницу About. aspx , страницу Contact. aspx , но также включает функции членства, которые регистрируют пользователей и сохраняют свои учетные данные, чтобы они могли входить на веб-сайт. При создании страницы по умолчанию Visual Studio отображает страницу в представлении исходного кода , где можно видеть элементы HTML страницы. На следующем рисунке показано, что вы видите в представлении исходного кода , если вы создали новую веб-страницу с именем басиквебапп. aspx.
Обзор среды веб-разработки Visual Studio
Прежде чем продолжить изменение страницы, полезно ознакомиться с средой разработки Visual Studio. На следующем рисунке показаны окна и инструменты, доступные в Visual Studio, и Visual Studio Express для Web.
На этой диаграмме показаны окна и расположения окон по умолчанию. Меню вид позволяет отображать дополнительные окна, а также изменять порядок окон и изменять их размер в соответствии с вашими предпочтениями. Если изменения уже внесены в расположение окон, то отображаемое содержимое не будет соответствовать иллюстрации.
Среда Visual Studio
Ознакомьтесь с веб-конструктор
Изучите приведенную выше иллюстрацию и сопоставьте текст со следующим списком, в котором описываются наиболее часто используемые окна и средства. (Здесь перечислены не все отображаемые окна и средства, а только те, которые отмечены на предыдущем рисунке.)
- Toolbar. Предоставляют команды для форматирования текста, поиска текста и т. д. Некоторые панели инструментов доступны только при работе в режиме конструктора .
- Обозреватель решений окно. Отображает файлы и папки в веб-приложении.
- Окно документа. Отображает документы, над которыми вы работаете, в окнах с вкладками. Можно переключаться между документами, щелкая вкладки.
- Окно " Свойства ". Позволяет изменять параметры страницы, элементы HTML, элементы управления и другие объекты.
- Вкладки представлений. Представьте себе различные представления одного документа. Представление конструктора — это область редактирования практически в режиме WYSIWYG. Представление исходного кода — это HTML-редактор для страницы. Представление с разделением отображает как представление конструктора , так и представление исходного кода для документа. Далее в этом пошаговом руководстве вы будете работать с представлениями конструирования и источника . Если вы предпочитаете открывать веб-страницы в режиме конструктора , в меню Сервис выберите пункт Параметры, выберите узел Конструктор HTML и измените параметр начальные страницы .
- Панель элементов. Предоставляет элементы управления и элементы HTML, которые можно перетащить на страницу. Элементы панели элементов группируются по общей функции.
- Erver обозреватель. Отображает подключения к базе данных. Если обозреватель сервера не отображается, в меню Вид выберите пункт обозреватель сервера.
Добавление страницы в веб-приложение
Добавление HTML на страницу
В этой части пошагового руководства на страницу будет добавлен статический текст.
Добавление текста на страницу
В нижней части окна документа перейдите на вкладку конструктор , чтобы переключиться в режим конструктора .
Представление конструирования отображает текущую страницу в режиме, аналогичном WYSIWYG. На этом этапе у вас нет текста или элементов управления на странице, поэтому страница пуста, за исключением пунктирной линии, которая обозначает прямоугольник. Этот прямоугольник представляет элемент div на странице.
Щелкните внутри прямоугольника, выделенного пунктирной линией.
На следующем рисунке показан текст, введенный в режиме конструктора .
Переключитесь в представление исходного кода .
Вы видите HTML в представлении исходного кода , созданном при вводе в режиме конструктора .
Веб-страница
Запуск страницы
Прежде чем приступать к добавлению элементов управления на страницу, можно сначала запустить его.
Запуск страницы
В Обозреватель решенийщелкните правой кнопкой мыши фирствебпаже. aspx и выберите задать в качестве начальной страницы.
Нажмите клавиши CTRL + F5 , чтобы запустить страницу.
Чтобы отобразить страницу в браузере, можно также щелкнуть страницу правой кнопкой мыши в Обозреватель решений и выбрать пункт Просмотр в браузере.
Закройте браузер, чтобы завершить работу веб-приложения.
Добавление и программирование элементов управления
Теперь на страницу будут добавляться серверные элементы управления. Серверные элементы управления, такие как кнопки, метки, текстовые поля и другие привычные элементы управления, предоставляют стандартные возможности обработки форм для страниц веб-форм. Однако можно программировать элементы управления с помощью кода, выполняемого на сервере, а не на клиенте.
На страницу будет добавлен элемент управления Button , элемент управления TextBox и элемент управления Label , а также написан код для работы с событием Click для элемента управления Button .
Добавление элементов управления на страницу
Перейдите на вкладку конструктор , чтобы переключиться в режим конструктора .
В области элементовразверните группу " стандартные ", если она еще не развернута.
Обратите внимание, что может потребоваться развернуть окно панели элементов слева, чтобы просмотреть его.
Перетащите элемент управления TextBox на страницу и поместите его в середину поля элемента div , которая содержит Вас приветствует Visual Web Developer в первой строке.
Перетащите элемент управления Button на страницу и поместите его справа от элемента управления TextBox .
Перетащите элемент управления Label на страницу и поместите его на отдельную строку под элементом управления "Кнопка" .
Поместите точку вставки над элементом управления TextBox , а затем введите введите свое имя: .
Этот статический HTML-текст является заголовком элемента управления TextBox . На одной странице можно смешивать статические HTML-и серверные элементы управления. На следующем рисунке показано, как три элемента управления отображаются в режиме конструктора .
Настройка свойств элемента управления
Visual Studio предлагает различные способы задания свойств элементов управления на странице. В этой части пошагового руководства будут заданы свойства как в представлении конструктора , так и в представлении исходного кода .
Задание свойств элемента управления
Сначала откройте окно Свойства , выбрав в меню вид пункт> другие -Windows > Свойства. Можно также нажать клавишу F4 , чтобы открыть окно свойства .
Выберите элемент управления Button , а затем в окне Свойства задайте для параметра текст значение Отображаемое имя. Введенный текст появится на кнопке в конструкторе, как показано на следующем рисунке.
Переключитесь в представление исходного кода .
Представление исходного кода отображает HTML для страницы, включая элементы, созданные Visual Studio для серверных элементов управления. Элементы управления объявляются с помощью синтаксиса, аналогичного HTML, за исключением того, что теги используют префикс ASP: и включают атрибут runat ="Server" .
Свойства элемента управления объявляются как атрибуты. Например, при задании свойства Text для элемента управления Button на шаге 1 фактически задается атрибут Text в разметке элемента управления.
Далее в элемент управления Label будет добавлено дополнительное свойство. Поместите точку вставки непосредственно после кода ASP: Label в тег <asp: Label> и нажмите клавишу пробел.
Появится раскрывающийся список, в котором отображается список доступных свойств, которые можно задать для элемента управления Label . Эта функция, называемая IntelliSense, помогает в представлении исходного кода с использованием синтаксиса серверных элементов управления, элементов HTML и других элементов на странице. На следующем рисунке показан раскрывающийся список IntelliSense для элемента управления Label .
Выберите ForeColor и введите знак равенства.
IntelliSense отображает список цветов.
Раскрывающийся список IntelliSense можно отобразить в любое время, нажав клавиши CTRL + J при просмотре кода.
Выберите цвет для текста элемента управления " Метка ". Убедитесь, что выбран цвет, достаточно темный для чтения на белом фоне.
Атрибут ForeColor заполняется выбранным цветом, включая закрывающие кавычки.
Программирование элемента управления "Кнопка"
В этом пошаговом руководстве будет написан код, который считывает имя, введенное пользователем в текстовое поле, и отображает имя в элементе управления Label .
Добавление обработчика событий кнопки по умолчанию
Переключитесь в режим конструктора .
Дважды щелкните элемент управления "Кнопка" .
Двойной щелчок элемента управления в представлении конструктора — это лишь один из нескольких способов создания обработчиков событий.
Внутри обработчика событий Button1_Click введите Label1 , за которым следует точка ( . ).
При вводе точки после идентификатора метки (Label1) в Visual Studio отображается список доступных элементов для элемента управления Label , как показано на следующем рисунке. Элемент обычно является свойством, методом или событием.
Завершите обработчик события нажатия для кнопки, чтобы он был считан, как показано в следующем примере кода.
Вернитесь к просмотру исходного кода HTML-разметки, щелкнув правой кнопкой мыши фирствебпаже. aspx в Обозреватель решений и выбрав пункт Просмотреть разметку.
Перейдите к элементу <ASP: Button> . Обратите внимание, что элемент <ASP: Button> теперь имеет атрибут onclick ="Button1_щелкните" .
Этот атрибут привязывает событие нажатия кнопки к методу обработчика, который вы написали на предыдущем шаге.
Методы обработчика событий могут иметь любое имя; отображаемое имя является именем по умолчанию, созданным Visual Studio. Важно отметить, что имя, используемое для атрибута OnClick в HTML, должно соответствовать имени метода, определенного в коде программной части.
Запуск страницы
Теперь можно протестировать серверные элементы управления на странице.
Запуск страницы
Нажмите клавиши CTRL + F5 , чтобы запустить страницу в браузере. Если возникает ошибка, выполните описанные выше действия.
Введите имя в текстовое поле и нажмите кнопку Отображаемое имя .
В браузере просмотрите источник страницы, которую вы используете, щелкнув правой кнопкой мыши страницу и выбрав пункт Просмотреть источник.
Работа с дополнительными элементами управления
В этой части пошагового руководства вы будете работать с элементом управления Calendar , который отображает даты в месяц за раз. Элемент управления " Календарь " является более сложным элементом управления, чем кнопка, текстовое поле и метка, с которыми вы работали, и демонстрирует некоторые дополнительные возможности серверных элементов управления.
В этом разделе вы добавите элемент управления System. Web. UI. Controls. Calendar на страницу и отформатируете его.
Добавление элемента управления Calendar
В Visual Studio переключитесь в режим конструктора .
Из стандартного раздела панели элементовперетащите элемент управления Calendar на страницу и поместите его под элементом div , который содержит другие элементы управления.
Отобразится панель смарт-тегов календаря. На панели отображаются команды, облегчающие выполнение наиболее распространенных задач для выбранного элемента управления. На следующем рисунке показан элемент управления Calendar , отображаемый в режиме конструктора .
![Элемент управления Calendar в представление конструирования](creating-a-basic-web-forms-page/_static/image13.jpg "Элемент управления "Календарь" в конструкторе")
На панели смарт-тегов выберите Автоматический формат.
Откроется диалоговое окно Автоформат , в котором можно выбрать схему форматирования для календаря. На следующем рисунке показано диалоговое окно Автоформат для элемента управления Calendar .
В списке выберите схему выберите простой и нажмите кнопку ОК.
Переключитесь в представление исходного кода .
Вы видите элемент <ASP: Calendar> . Этот элемент намного больше, чем элементы для простых элементов управления, созданных ранее. Он также включает подэлементы, такие как <викенддайстиле> , которые представляют различные параметры форматирования. На следующем рисунке показан элемент управления Calendar в представлении исходного кода . (Точная разметка, отображаемая в представлении исходного кода , может немного отличаться от иллюстрации.)
Программирование элемента управления Calendar
В этом разделе будет запрограммирован элемент управления Calendar для показа текущей выбранной даты.
Программирование элемента управления Calendar
В режиме конструктора дважды щелкните элемент управления Calendar .
Новый обработчик событий создается и отображается в файле кода программной части с именем FirstWebPage.aspx.CS.
Завершите обработчик событий SelectionChanged , используя следующий код.
Приведенный выше код задает текст элемента управления Label равным выбранной дате элемента управления Calendar.
Запуск страницы
Теперь можно протестировать календарь.
Запуск страницы
Нажмите клавиши CTRL + F5 , чтобы запустить страницу в браузере.
Щелкните дату в календаре.
Выбранная дата отображается в элементе управления " Метка ".
В браузере просмотрите исходный код страницы.
Обратите внимание, что элемент управления Calendar отображается на странице в виде таблицы, каждый день в виде элемента TD .
Next Steps
В этом пошаговом руководстве показаны основные возможности конструктора страниц Visual Studio. Теперь, когда вы понимаете, как создавать и редактировать страницу веб-форм в Visual Studio, может потребоваться изучить другие функции. Например, может потребоваться выполнить следующие действия.
Дано три стороны треугольника: a , b , c .
Используя формулу Герона, разработать приложение, которое находит площадь треугольника. Приложение реализовать как Web-application .
Формула Герона имеет вид:
где p – полупериметр:
a, b, c – длина сторон треугольника.
⇑
Выполнение
1. Запустить MS Visual Studio
Пример создания приложения в MS Visual Studio по шаблону Windows Forms Application подробно описывается в теме:
⇑
2. Создание Web-приложения
Приложения типа Web могут вызываться из любого компьютера, подключенного к сети Internet. Для открытия такого приложения используется Web -браузер (например Opera , Google Chrome , Internet Explorer и другие).
Ниже указаны два способа создания Web -приложения в MS Visual Studio .
⇑
2.1. Создание Web-приложения (способ № 1)
Для этого способа, чтобы создать Web -приложение, нужно сначала вызвать команду (рис. 1):
Рис. 1. Команда создания нового веб-сайта
Например, в нашем случае, файлы будут сохраняться в папке
Рис. 2. Создание Web-сайта
⇑
2.2. Создание Web-приложения (способ № 2)
Существует также и другой способ создания Web -приложения с помощью команды (рис. 3)
Рис. 3. Команда создания нового проекта
Рис. 4. Команда создания Web-приложения
⇑
3. Создание приложения как веб-сайта
Для решения задачи выбираем первый способ.
После выполненных операций создается решение ( Solution ), в котором есть один проект типа веб-сайт (рис. 5).
Если запустить на выполнение данный проект, то внизу в правой части экрана ( SySTray ) отобразится окно загруженного локального сервера (рис. 6).
Рис. 6. Загрузка локального сервера для выполнения приложения
В результате запуска, в активном веб-браузере откроется страница с приблизительно таким текстом (рис. 8):
Рис. 8. Текст, который выводится в веб-браузере
⇑
4. Добавление формы к приложению
Добавим новую форму к Web -приложению.
Рис. 10. Добавление новой формы
После добавления, в Solution Explorer можно увидеть дополнительные два файла (рис. 11):
С помощью этих двух файлов можно изменять внешний вид формы и организовывать работу в ней.
С помощью кнопок Design и Source можно переключаться между режимом проектирования и режимом кода страницы Default.aspx (рис. 12).
Рис. 12. Режимы проектирования ( Design ) и кода ( Source )
⇑
5. Конструирование формы
Согласно с условием задачи, форма должна содержать следующие элементы управления:
⇑
5.1. Изменение размеров формы
Рис. 13. Изменение размеров формы в режиме проектирования
⇑
Для нашей задачи нужно вынести на форму следующие элементы управления:
При вынесении элемента управления в правой нижней части экрана (окно Properties ) можно изменять свойства элементов управления (рис. 14).
Рис. 14. Изменение свойств элементов управления Web -формы
В целом, после построения, форма приложения должна иметь вид как показано на рисунке 15.
Рис. 15. Форма приложения в режиме проектирования
⇑
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page < protected void Page_Load( object sender, EventArgs e) < >protected void Button1_Click( object sender, EventArgs e) < double a, b, c, p, s; a = Double .Parse(TextBox1.Text); b = Double .Parse(TextBox2.Text); c = Double .Parse(TextBox3.Text); p = (a + b + c) / 2; s = Math .Sqrt(p * (p - a) * (p - b) * (p - c)); Label4.Text = "S text-align: justify;">После запуска приложения на выполнение можно проконтролировать его работу в Web -браузере (рис. 16).
Рис. 16. Выполнение Web -приложения в браузере Opera
После этого можно выносить приложение на Web-сервер. Но это уже другая тема.
Запустите Visual Studio 2012 и выберите пункт New Project (Создать проект) в меню File (Файл). Откроется диалоговое окно New Project (Новый проект), которое позволяет создавать новые проекты Visual Studio.
Среда Visual Studio устанавливает в поле Solution name (Имя решения) строку TestAspNet45 для соответствия имени проекта. Решение Visual Studio - это контейнер для одного или большего числа проектов.
Добавление новой веб-формы
Чтобы добавить в проект новую веб-форму, щелкните правой кнопкой мыши на записи проекта TestAspNet45 в окне Solution Explorer и выберите в контекстном меню пункт Add --- Web Form (Добавить --- Веб-форма). В появившемся диалоговом окне введите Default в качестве имени нового элемента проекта:
Щелкните на кнопке OK для закрытия диалогового окна и создания нового элемента. Вы заметите в окне Solution Explorer, что среда Visual Studio добавила в проект файл Default.aspx и открыла его для редактирования. Первоначальное содержимое этого файла приведено в коде ниже:
Файл веб-формы в сущности представляет собой расширенный HTML-файл. Наличие элемента, имеющего дескрипторы <% и %>, говорит о том, что это не обычный файл HTML. То же самое касается атрибутов runat в элементах head и form.
Как показано ниже, в файл Default.aspx было добавлено несколько стандартных HTML-элементов:
Тестирование примера приложения
Панель инструментов Visual Studio содержит раскрывающийся список с названиями браузеров, которые установлены на рабочей станции (чтобы увидеть этот список, щелкните на небольшой стрелке вниз, расположенной справа от названия браузера).
Пример списка показан на рисунке ниже, где можно видеть несколько браузеров, установленных в системе. Как минимум, в списке будут присутствовать элементы Internet Explorer и Page Inspector (инструмент, который помогает отлаживать HTML-код).
Я обычно использую браузер Google Chrome. Встречаются случаи использования других браузеров для демонстрации определенных возможностей, но это всегда будет выделено особо.
Удостоверьтесь, что в списке выбран нужный браузер и затем щелкните на соответствующей кнопке в панели инструментов или выберите пункт Start Debugging (Начать отладку) в меню Debug (Отладка) среды Visual Studio. Проект будет скомпилирован и откроется новое окно браузера, отображающее веб-форму, как показано на рисунке ниже. На данный момент контент веб-формы довольно скуден, но мы, по крайней мере, знаем, что все работает должным образом.
Для этого примера Google Chrome использует следующий URL:
Когда приложение запускается из Visual Studio, сервер IIS Express стартует и начинает прослушивать входящие запросы (на порте 40035 или любом другом). Как только сервер IIS Express запустился, Visual Studio создает новое окно Internet Explorer и применяет его для перехода на URL, который приводит к загрузке файла Default.aspx из IIS Express.
Пользователь запрашивает URL, которые указывают на файлы веб-форм, добавленные к проекту.
Запросы получает сервер IIS Express, который находит запрашиваемые файлы.
Сервер IIS Express обрабатывает файл веб-формы с целью генерации страницы стандартного HTML-кода.
Код HTML возвращается браузеру, который отображает его для пользователя.
Создание простого приложения
В оставшейся части статьи мы исследуем некоторые из базовых средств ASP.NET, используемых для создания простого приложения ввода данных. В этом разделе мы нарастим темпы - цель заключается в том, чтобы продемонстрировать ASP.NET в действии поэтому мы опустим детальные пояснения того, как все это работает "за кулисами".
Предварительная настройка
Предположим, что ваша подруга решила организовать новогоднюю вечеринку. Она попросила вас создать веб-сайт, который дал бы возможность приглашенным отправлять ответы на приглашение (repondez s'il vous plait - RSVP) по электронной почте. Она высказала пожелание о наличии следующих основных средств:
страница, которая отображает информацию о вечеринке и форму RSVP;
проверка достоверности для формы RSVP, которая будет отображать страницу подтверждения;
Создание модели данных и хранилища
Почти все веб-приложения полагаются на какую-нибудь разновидность модели данных, независимо от технологии, используемой для их создания. Поскольку мы строим простое приложение, нам нужна лишь простая модель данных. Щелкните правой кнопкой мыши на элементе TestAspNet45 в окне Solution Explorer и выберите в контекстном меню пункт Add --> Class (Добавить --- Класс).
Если пункт меню Class отсутствует или не доступен, это может означать, что вы оставили отладчик Visual Studio в функционирующем состоянии. Среда Visual Studio ограничивает изменения, которые можно вносить в проект, пока выполняется приложение. Выберите пункт Stop Debugging (Остановить отладку) в меню Debug (Отладка) и попробуйте заново.
Обратите внимание, что свойство WillAttend определено с типом bool, допускающим null. Это означает, что свойство может принимать значения true, false или null. Причины выбора этого типа данных объясняются в разделе "Выполнение проверки достоверности" далее в статье.
Чтобы определить хранилище, добавьте в проект новый файл класса по имени ResponseRepository.cs и поместите в него код, показанный ниже:
Хранилище обычно располагает методами для создания, чтения, обновления и удаления объектов данных (вместе называемых методами , но в этом приложении нужна только возможность чтения всех объектов данных и добавления новых объектов данных.
Создание и стилизация формы
Следующий шаг заключается в создании страницы, которая содержит информацию о вечеринке и HTML-форму, позволяющую гостям подготовить ответ. Мы будем использовать файл Default.aspx, который был создан ранее. Внесенные в него изменения представлены в коде ниже:
Здесь было изменено значение атрибута id элемента form и добавлены стандартные HTML-элементы, предназначенные для отображения информации о вечеринке, а также для сбора деталей формы RSVP от пользователей. Запустив приложение (либо выбором пункта меню Start Debugging из меню Debug, либо щелчком на кнопке браузера в панели инструментов), можно посмотреть, как выглядят указанные изменения.
Элементы веб-формы стилизуются точно так же, как элементы обычной HTML-страницы - с применением каскадных таблиц стилей (Cascading Style Sheets - CSS). Для добавления к приложению нескольких базовых стилей щелкните правой кнопкой мыши на элементе TestAspNet45 в окне Solution Explorer и выберите в контекстном меню пункт Add --> StyleSheet (Добавить --> Таблица стилей). В появившемся диалоговом окне в качестве имени укажите Styles и щелкните на кнопке OK. Среда Visual Studio добавит к проекту новый файл Styles.css. Приведите содержимое этого файла в соответствие с примером ниже. Несмотря на простоту этих стилей CSS, они существенно улучшат внешний вид полей формы.
Таблица стилей CSS ассоциируется с веб-формой с помощью элемента link. В коде ниже показано, как добавить такой элемент в раздел head файла Default.aspx:
Обработка данных формы
В начале файла Default.aspx находится следующий элемент:
Среда Visual Studio группирует вместе связанные файлы в виде одиночного элемента в окне Solution Explorer, что упрощает навигацию по крупным проектам. Если щелкнуть на стрелке слева от записи Default.aspx, можно увидеть файлы, сокрытые средой Visual Studio. Одним из них является файл Default.aspx.cs, на который производится ссылка с помощью атрибута CodeBehind.
Дважды щелкните на файле Default.aspx.cs, чтобы открыть его в редакторе; отобразится код, приведенный ниже:
В рассматриваемом примере метод Page_Load() будет вызван один раз во время первоначальной загрузки страницы и еще раз - когда пользователь отправит форму. В примере ниже показан код, добавленный к методу Page_Load() для реагирования на запросы:
Здесь за счет проверки свойства IsPostBack выясняется, относится ли запрос, на который производится ответ, к форме, отправленной обратно серверу. Если это так, мы создаем новый экземпляр объекта GuestResponse модели данных и передаем его методу TryUpdateModel(), унаследованному от базового класса Page.
Пользователю необходимо предоставить какой-либо отклик после того, как он отправил форму, и это делается с помощью метода Response.Redirect (), который выполняет перенаправление пользовательского браузера. Если свойство WillAttend равно true, пользователь придет на вечеринку, поэтому он перенаправляется на файл seeyouthere.html. В противном случае перенаправление происходит на файл sorryyoucantcome.html.
Повторите описанный процесс для создания файла sorryyoucantcome.html с содержимым, которое показано в примере ниже:
Установка области действия HTML-элементов
Базовая структура приложения в основном построена, однако оно еще не полностью работоспособно. Мы должны сообщить Visual Studio, какой файл необходимо загружать при запуске приложения. Ранее это не имело значения, т.к. существовал только один файл Default.aspx, а среда Visual Studio достаточно интеллектуальна, чтобы определить его в качестве стартового. Но теперь есть еще и пара HTML-файлов, поэтому нужно предоставить Visual Studio некоторую помощь. Щелкните правой кнопкой мыши на элементе Default.aspx в окне Solution Explorer и выберите в контекстном меню пункт Set as Start Page (Установить как стартовую страницу).
Теперь можно запустить приложение, либо выбрав пункт Start Debugging в меню Debug, либо щелкнув на кнопке Google Chrome в панели инструментов. Заполните поля формы и удостоверьтесь, что в элементе select выбран вариант "Да". После отправки формы вы увидите ответ, который должен отображаться в случае выбора варианта "Нет", как показано на рисунке ниже. Очевидно, что-то не в порядке.
Снова запустите приложение и заполните форму. На этот раз отправка формы приводит к выдаче корректного ответа:
Создание итогового представления
Итак, базовые строительные блоки приложения на месте, и приглашенные могут отправлять формы RSVP. В этом разделе мы добавим поддержку для отображения итоговых сведений по полученным ответам, чтобы можно было видеть, кто намерен прибыть, и должным образом планировать вечеринку.
Щелкните правой кнопкой мыши на элементе TestAspNet45 в окне Solution Explorer и выберите в контекстном меню пункт Add --> Web Form. В открывшемся диалоговом окне укажите Summary для имени веб-формы и щелкните на кнопке OK, чтобы создать новый файл Summary.aspx. Приведите содержимое файла в соответствие с примером:
Дескрипторы <% и %> формально называются ограничителями сценариев серверной стороны, хотя более распространено название фрагменты кода. Доступны различные виды фрагментов кода и в примере были добавлены два типа таких фрагментов. Вот первый из них:
Фрагмент кода с открывающим дескриптором <%@ представляет собой директиву. позволяют выполнять действие, оказывающее влияние на веб-форму целиком. В данном случае была создана директива Import, которая помещает в область видимости пространство имен из проекта, что дает возможность ссылаться на классы, указывая только их имена.
Метод String.Format() позволяет компоновать HTML-строки, содержащие значения свойств из каждого объекта GuestResponse, который необходимо отобразить. Для добавления HTML-кода в вывод, отправляемый браузеру, используется метод Response.Write().
Форматирование динамического HTML-кода
Вы заметите, что в файл Summary.aspx включен элемент link, который импортирует файл Styles.css с содержащимися внутри него стилями. Это сделано для демонстрации того, что элемент, генерируемый в блоке кода, стилизуется точно так же, как статический HTML-элемент на странице. В примере ниже показан стиль, добавленный в файл Styles.css для применения внутри Summary.aspx.
Тестирование динамического кода
Чтобы протестировать файл Summary.aspx, запустите приложение и воспользуйтесь страницей Default.aspx для добавления данных в хранилище - помните, что в этом примере данные не хранятся постоянно, а их нужно вводить заново при каждом запуске приложения. После нескольких отправок формы перейдите на URL вида "/Summary.aspx"; появится вывод, который похож на показанный на рисунке:
Вызов метода из отделенного кода
В примере ниже показано, как определить новый метод по имени GetNoShowHtml() в файле отделенного кода Summary.aspx.cs. Этот метод генерирует таблицу строк, аналогичную той, что создавалась в предыдущем разделе:
После этого новый метод можно вызывать внутри фрагмента кода в файле Summary.aspx:
Выполнение проверки достоверности
Приложение почти завершено, однако осталась еще одна нерешенная проблема: пользователи могут отправлять внутри формы Default.aspx произвольные данные или вообще отправлять пустую форму. Необходимо обеспечить наличие значений во всех полях формы, чтобы данные были корректными и отражали точно, кто принял приглашение на вечеринку, а кто от него отказался.
Для подсветки ошибок красным цветом добавьте следующий стиль в файл Styles.css:
При определении свойства WillAttend в классе GuestResponse применялся тип bool, допускающий null, который может принимать значения true и false, но также может быть null. Эта возможность используется для определения, выбрал ли пользователь значение в элементе select по имени WillAttend:
Существует удобное взаимодействие между процессом привязки модели и атрибутом проверки достоверности Required, которым можно воспользоваться. Процесс привязки модели преобразует значение пустой строки первого элемента option в null, но атрибут Required сгенерирует ошибку проверки достоверности, если не будет получено значение true или false. Такое несоответствие позволяет автоматически генерировать ошибку, если пользователь не выбрал значения "Да" или "Нет" в раскрывающемся списке.
Итак, на этом пример приложения завершен и все исходные требования удовлетворены. Приглашенные на вечеринку могут отправлять формы RSVP, но только при условии, что предоставлены значения для всех полей формы. Ваша подруга может видеть список принявших и отклонивших приглашение и соответствующим образом планировать вечеринку.
Шаг 1. Создание базы
Первым делом создадим новую базу данных test для хранения тестовой информации. Добавьте таблицу user со следующими полями:
Шаг 2. Создание проекта
Создайте проект для нового приложения. В Visual Studio для этого нужно зайти в меню File > New > Project .
Создание нового проекта в Visual Studio
После этого появится окно New Project:
Окно New Project в интерфейсе Visual Studio
В поле Name нужно вписать название вашего проекта, в поле Location – указать нужную директорию, в Solution name – ввести название решения. Заполнили данные – нажимаем OK .
Главный класс нового проекта в Visual Studio
Шаг 3. Создание интерфейса
Создайте представление будущей формы авторизации, как показано на рисунке ниже. Добавьте два поля ( username и password ) и кнопку для входа.
Шаг 4. Настройка соединения с базой
Создайте класс connection для настройки соединения с базой. Пример реализации представлен в листинге ниже:
Шаг 5. Код авторизации
Наконец, вернитесь к форме и добавьте следующий код:
Результат
Нажмите F5 , чтобы запустить программу. Если соединение с базой данных успешно установится, вы увидите только что созданную форму.
Интерфейс работающей программы
Читайте также: