Создание web формы в visual studio
Для новой разработки веб-приложений рекомендуется Razor Pages. дополнительные сведения см. в разделе начало работы with 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
Ознакомьтесь с веб-конструктор
Изучите приведенную выше иллюстрацию и сопоставьте текст со следующим списком, в котором описываются наиболее часто используемые окна и средства. (Здесь перечислены не все отображаемые окна и средства, а только те, которые отмечены на предыдущем рисунке.)
- Панели инструментов. Предоставляют команды для форматирования текста, поиска текста и т. д. Некоторые панели инструментов доступны только при работе в режиме конструктора .
- Обозреватель решений окно. Отображает файлы и папки в веб-приложении.
- Окно документа. Отображает документы, над которыми вы работаете, в окнах с вкладками. Можно переключаться между документами, щелкая вкладки.
- Окно " Свойства ". Позволяет изменять параметры страницы, элементы 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 в разметке элемента управления.
Все элементы управления находятся внутри элемента Form , который также имеет атрибут runat = "Server". атрибут runat = "server" и тег asp: prefix для управляющих тегов отмечают элементы управления, чтобы они обрабатывались ASP.NET на сервере при выполнении страницы. код за пределами и отправляется в браузер без изменений, поэтому код ASP.NET должен находиться внутри элемента, открывающий тег которого содержит атрибут runat = "server" .
Далее в элемент управления Label будет добавлено дополнительное свойство. Поместите точку вставки непосредственно после кода ASP: Label в и нажмите клавишу пробел.
Появится раскрывающийся список, в котором отображается список доступных свойств, которые можно задать для элемента управления Label . Эта функция, называемая IntelliSense, помогает в представлении исходного кода с использованием синтаксиса серверных элементов управления, элементов HTML и других элементов на странице. На следующем рисунке показан раскрывающийся список IntelliSense для элемента управления Label .
Выберите ForeColor и введите знак равенства.
IntelliSense отображает список цветов.
Раскрывающийся список IntelliSense можно отобразить в любое время, нажав клавиши CTRL + J при просмотре кода.
Выберите цвет для текста элемента управления " Метка ". Убедитесь, что выбран цвет, достаточно темный для чтения на белом фоне.
Атрибут ForeColor заполняется выбранным цветом, включая закрывающие кавычки.
Программирование элемента управления "Кнопка"
В этом пошаговом руководстве будет написан код, который считывает имя, введенное пользователем в текстовое поле, и отображает имя в элементе управления Label .
Добавление обработчика событий кнопки по умолчанию
Переключитесь в режим конструктора .
Дважды щелкните элемент управления "Кнопка" .
Двойной щелчок элемента управления в представлении конструктора — это лишь один из нескольких способов создания обработчиков событий.
В обработчике событий Button1_Click введите Label1 , за которым следует точка (.).
при вводе точки после идентификатора метки (Label1) Visual Studio отображает список доступных элементов для элемента управления label , как показано на следующем рисунке. Элемент обычно является свойством, методом или событием.
Завершите обработчик события нажатия для кнопки, чтобы он был считан, как показано в следующем примере кода.
вернитесь к просмотру исходного кода HTML-разметки, щелкнув правой кнопкой мыши фирствебпаже. aspx в Обозреватель решений и выбрав пункт просмотреть разметку.
Прокрутите страницу до . Обратите внимание, что теперь имеет атрибут OnClick = "Button1_Click".
Этот атрибут привязывает событие нажатия кнопки к методу обработчика, который вы написали на предыдущем шаге.
Методы обработчика событий могут иметь любое имя; отображаемое имя является именем по умолчанию, созданным Visual Studio. Важно отметить, что имя, используемое для атрибута OnClick в HTML, должно соответствовать имени метода, определенного в коде программной части.
Запуск страницы
Теперь можно протестировать серверные элементы управления на странице.
Запуск страницы
Нажмите клавиши CTRL + F5 , чтобы запустить страницу в браузере. Если возникает ошибка, выполните описанные выше действия.
Введите имя в текстовое поле и нажмите кнопку Отображаемое имя .
В браузере просмотрите источник страницы, которую вы используете, щелкнув правой кнопкой мыши страницу и выбрав пункт Просмотреть источник.
Работа с дополнительными элементами управления
В этой части пошагового руководства вы будете работать с элементом управления Calendar , который отображает даты в месяц за раз. Элемент управления " Календарь " является более сложным элементом управления, чем кнопка, текстовое поле и метка, с которыми вы работали, и демонстрирует некоторые дополнительные возможности серверных элементов управления.
В этом разделе вы добавите элемент управления System. Web. UI. Controls. Calendar на страницу и отформатируете его.
Добавление элемента управления Calendar
в Visual Studio переключитесь в режим конструктора .
Из стандартного раздела панели элементовперетащите элемент управления Calendar на страницу и поместите его под элементом div , который содержит другие элементы управления.
Отобразится панель смарт-тегов календаря. На панели отображаются команды, облегчающие выполнение наиболее распространенных задач для выбранного элемента управления. На следующем рисунке показан элемент управления Calendar , отображаемый в режиме конструктора .
На панели смарт-тегов выберите Автоматический формат.
Откроется диалоговое окно Автоформат , в котором можно выбрать схему форматирования для календаря. На следующем рисунке показано диалоговое окно Автоформат для элемента управления Calendar .
В списке выберите схему выберите простой и нажмите кнопку ОК.
Переключитесь в представление исходного кода .
Вы видите . Этот элемент намного больше, чем элементы для простых элементов управления, созданных ранее. Он также включает подэлементы, такие как , которые представляют различные параметры форматирования. На следующем рисунке показан элемент управления Calendar в представлении исходного кода . (Точная разметка, отображаемая в представлении исходного кода , может немного отличаться от иллюстрации.)
Программирование элемента управления Calendar
В этом разделе будет запрограммирован элемент управления Calendar для показа текущей выбранной даты.
Программирование элемента управления Calendar
В режиме конструктора дважды щелкните элемент управления Calendar .
Новый обработчик событий создается и отображается в файле кода программной части с именем фирствебпаже. aspx. CS.
Завершите обработчик событий SelectionChanged , используя следующий код.
Приведенный выше код задает текст элемента управления Label равным выбранной дате элемента управления Calendar.
Запуск страницы
Теперь можно протестировать календарь.
Запуск страницы
Нажмите клавиши CTRL + F5 , чтобы запустить страницу в браузере.
Щелкните дату в календаре.
Выбранная дата отображается в элементе управления " Метка ".
В браузере просмотрите исходный код страницы.
Обратите внимание, что элемент управления Calendar отображается на странице в виде таблицы, каждый день в виде элемента TD .
Next Steps
в этом пошаговом руководстве показаны основные возможности конструктора страниц Visual Studio. теперь, когда вы понимаете, как создавать и редактировать веб-формы страницу в Visual Studio, может потребоваться изучить другие функции. Например, может потребоваться выполнить следующие действия.
Вступление
Целевая аудитория
У вас должны быть знания в следующих областях:
- Объектно-ориентированное программирование (ООП) и языки
- Веб-разработка (HTML, CSS, JavaScript)
- реляционные базы данных
- N-уровневая архитектура
Для просмотра этих областей рассмотрите следующее содержимое:
Функции приложения
Сценарии и задачи приложений
Задачи серии руководств включают:
Общие сведения
НачальнаяЗагрузка, макет, создание и реагирование инфраструктуры разработки.
Обновление Entity Framework позволяющее выполнять следующие задачи:
- Получение данных и работа с ними в виде строго типизированных объектов
- Асинхронный доступ к данным
- Обработку временных ошибок подключения
- инструкции SQL Log
Пример приложения Wingtip Toys
Вы можете зарегистрироваться как новый пользователь или войти как существующий пользователь. Верхняя навигация содержит ссылки на категории продуктов и их продукты из базы данных.
Если выбрано значение продукты, отображаются все доступные продукты.
При выборе конкретного продукта отображаются сведения о продукте.
как пользователь, вы можете зарегистрироваться и войти в систему, используя функциональные возможности шаблона по умолчанию веб-формы. В этом учебнике также объясняется, как выполнить вход с использованием существующей учетной записи Gmail. Кроме того, вы можете войти в систему от имени администратора, чтобы добавлять продукты в базу данных и удалять их из нее.
Войдя в систему как пользователь, вы можете добавить продукты в корзину для покупок и извлечь их с помощью PayPal. пример приложения предназначен для работы в песочнице разработчика PayPal. Фактическая транзакция Money не выполняется.
PayPal подтверждает сведения об учетной записи, заказе и оплате.
после возврата из PayPal можно проверить и выполнить заказ.
Предварительные требования
Прежде чем начать, убедитесь, что на компьютере установлено следующее программное обеспечение:
в этой серии руководств используется Microsoft Visual Studio Community 2017. для выполнения этой серии руководств можно использовать либо Microsoft Visual Studio 2017.
Обратите внимание на следующие сведения о Visual Studio.
Microsoft Visual Studio 2017 и Microsoft Visual Studio Community 2017 в рамках этой серии руководств называются Visual Studio .
Visual Studio 2017 устанавливается рядом с уже установленными предыдущими версиями. сайты, созданные в более ранних версиях, можно открыть в Visual Studio 2017 и продолжить открытие в предыдущих версиях.
при первом запуске Visual Studio предполагается, что выбраны параметры веб-разработки . дополнительные сведения см. в разделе как выбрать среду веб-разработки Параметры.
После установки необходимых компонентов можно приступить к созданию веб-проекта, представленного в этой серии руководств.
Загрузка примера приложения
Готовый пример приложения можно загрузить в любое время с веб-сайта MSDN Samples:
Этот загружаемый файл содержит следующие элементы:
- Пример приложения в папке WingtipToys
- Ресурсы, используемые для создания примера приложения в папке WingtipToys-Assets в папке WingtipToys .
C:\Users\ \саурце\репос
Чтобы запустить завершенный проект, откройте папку WingtipToys и дважды щелкните файл WingtipToys. sln . Visual Studio 2017 открывает проект. затем щелкните правой кнопкой мыши файл Default. aspx в Обозреватель решений и выберите просмотреть в браузере.
После завершения серии руководств пройдите викторину, чтобы протестировать свои знания и получить основные понятия. Каждый вопрос содержит пояснения и ссылки на дополнительные рекомендации.
Поддержка и комментарии в учебнике
Дано три стороны треугольника: 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. Команда создания нового веб-сайта
Например, в нашем случае, файлы будут сохраняться в папке
Место расположения файлов указывается в поле « Web-location» . Доступны три способа размещения файлов:
Выбираем « File system «. В этом случае файлы приложения будут размещаться на локальном сервере ( localhost ), который создается системой. Это означает, что программа-клиент (наше приложение) и программа-сервер (условно отдаленный компьютер в сети) размещены на одном и том же (домашнем) компьютере. Фактически localhost – это IP -адрес, с помощью которого компьютер может обратиться в сети к самому себе, независимо от наличия или вида компьютерной сети.
Рис. 2. Создание Web-сайта
⇑
2.2. Создание Web-приложения (способ № 2)
Существует также и другой способ создания Web -приложения с помощью команды (рис. 3)
Рис. 3. Команда создания нового проекта
Рис. 4. Команда создания Web-приложения
⇑
3. Создание приложения как веб-сайта
Для решения задачи выбираем первый способ.
После выполненных операций создается решение ( Solution ), в котором есть один проект типа веб-сайт (рис. 5).
Рис. 5. Окно « Solution Explorer » после создания веб-сайта
Если запустить на выполнение данный проект, то внизу в правой части экрана ( SySTray ) отобразится окно загруженного локального сервера (рис. 6).
Рис. 6. Загрузка локального сервера для выполнения приложения
Следующим отобразится окно, изображенное на рисунке 7. В этом окне нужно подтвердить на кнопке « ОК «, чтобы модифицировать файл « Web.config » таким образом, чтобы можно было выполнять наше приложение.
Рис. 7. Запрос к модификации файла « Web.config «
В результате запуска, в активном веб-браузере откроется страница с приблизительно таким текстом (рис. 8):
Рис. 8. Текст, который выводится в веб-браузере
Для завершения работы приложения, нужно в MS Visual Studio вызвать команду « Stop Debugging » из меню « Debug «.
⇑
4. Добавление формы к приложению
Добавим новую форму к Web -приложению.
Для этого нужно выделить название приложения в Solution Explorer , сделать клик правой кнопкой «мыши» и в контекстном меню выбрать команду « Add New Item… » (рис. 9).
Рис. 9. Команда « Add New Item… «
Существует и другой способ добавления формы – вызов команды « Add New Item… » из меню « Website «.
Рис. 10. Добавление новой формы
После добавления, в Solution Explorer можно увидеть дополнительные два файла (рис. 11):
С помощью этих двух файлов можно изменять внешний вид формы и организовывать работу в ней.
Рис. 11. Файлы формы « Default.aspx » и « Default.aspx.cs «
С помощью кнопок Design и Source можно переключаться между режимом проектирования и режимом кода страницы Default.aspx (рис. 12).
Рис. 12. Режимы проектирования ( Design ) и кода ( Source )
⇑
5. Конструирование формы
Согласно с условием задачи, форма должна содержать следующие элементы управления:
⇑
5.1. Изменение размеров формы
Переходим в режим проектирования с помощью кнопки « Design » (рис. 12).
С помощью «мышки» увеличиваем размер формы, как показано на рисунке 13 (необязательно).
Рис. 13. Изменение размеров формы в режиме проектирования
⇑
С помощью «мышки» можно выносить на форму различные элементы управления. Работа с Web -формой есть точно такая же как и с формой типа Windows Forms . Текст на форме можно вносить непосредственно.
Для нашей задачи нужно вынести на форму следующие элементы управления:
- три элемента управления типа Label для обозначения « а = «, « b = «, « c = «;
- один элемент управления типа Button ;
- три элемента управления типа TextBox ;
- один элемент управления типа Label для вывода результата.
При вынесении элемента управления в правой нижней части экрана (окно Properties ) можно изменять свойства элементов управления (рис. 14).
Рис. 14. Изменение свойств элементов управления Web -формы
В целом, после построения, форма приложения должна иметь вид как показано на рисунке 15.
Рис. 15. Форма приложения в режиме проектирования
⇑
6. Программирование события клика на кнопке « Calculate «
Последним шагом есть программирование события, которое будет генерироваться при клике на кнопке « Calculate «. Для Web -приложений это осуществляется стандартным для MS Visual Studio способом. Программный код обработки события будет сформирован в файле « Default.aspx.cs «.
Таким образом, выделяем элемент управления Button1 . В списке свойств Properties переходим к вкладке Events . В вкладке Events делаем двойной клик «мышкой» напротив названия события « OnClick «. Система откроет файл « Default.aspx.cs » со следующим кодом:
В обработчик события Button1_Click(…) вводим код расчета площади треугольника по трем сторонам. В целом текст модуля « Default.aspx.cs » будет иметь вид.
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. Приведите содержимое файла в соответствие с примером:
Дескрипторы формально называются ограничителями сценариев серверной стороны, хотя более распространено название фрагменты кода. Доступны различные виды фрагментов кода и в примере были добавлены два типа таких фрагментов. Вот первый из них:
Метод 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, но только при условии, что предоставлены значения для всех полей формы. Ваша подруга может видеть список принявших и отклонивших приглашение и соответствующим образом планировать вечеринку.
Добавленными папками являются Content, Models, Models\Repository, Pages, Presenters и Presenters\Results. Мы будем применять их для разбиения проекта на отдельные части, как будет показано далее.
Установка статического контента
В примере ниже представлена разметка из файла \Content\seeyouthere.html:
В примере ниже приведено содержимое файла \Content\sorryyoucantcome.html:
Эти файлы имеют те же самые имена и такое же содержимое, что и файлы, применяемые в приведенном ранее примере, однако они расположены в папке Content, на которую необходимо ссылаться при их использовании.
Установка модели данных
Классы модели данных размещаются в папке Models. В приложении TestAspNet45 имеется только один класс модели данных, и никаких изменений в его определение вносить не понадобится. Создайте новый файл класса \Models\GuestResponse.cs и приведите его содержимое в соответствие с примером ниже:
Реализация хранилища
В этом разделе мы переделаем хранилище данных, чтобы отделить определение функциональности от ее реализации. Это упростит изоляцию классов, использующих хранилище, в целях тестирования. Для начала создайте в папке Models\Repository новый файл интерфейса по имени IRepository.cs и приведите его содержимое в соответствие с примером ниже:
Чтобы быстро создать интерфейс, щелкните правой кнопкой мыши на папке Models, выберите в контекстном меню пункт Add --> New Item (Добавить --> Новый элемент) и укажите шаблон элемента Interface (Интерфейс).
Хранилище для этого приложения выглядит очень просто, так что в интерфейсе IRepository определены только методы для извлечения всех объектов данных GuestResponse и для добавления нового объекта данных GuestResponse.
Чтобы создать реализацию интерфейса IRepository, мы добавили в папку Models\Repository новый файл класса под названием MemoryRepository.cs, содержимое которого показано в примере ниже. (Мы назначаем классам хранилища имена, отражающие механизм, с помощью которого хранятся объекты модели данных. В этом случае применяется память, т.е. сохраненные данные будут утеряны в результате останова или перезапуска приложения.)
Добавление инфраструктуры
Чтобы можно было реализовать наш шаблон, мы должны добавить в приложение некоторую инфраструктуру. Нам нужна возможность ассоциирования веб-страниц, исполняющих роль представлений в шаблоне, с классами презентаторов, не создавая между ними жестких зависимостей. Это означает, что необходимо определить интерфейс, задающий базовую функциональность презентатора, для чего создается файл Presenters\Presenter.cs с интерфейсом IPresenter, который показан в примере ниже:
Мы применяем обобщенный интерфейс, поскольку он позволит создавать классы презентаторов, которые оперируют с разными типами данных, используя множество параметров типа; это будет сделано при реализации итоговой страницы далее.
В интерфейсе определены два метода, имеющие имя GetResult(). Версия без аргументов применяется, когда представление требует инициализации, но данные в запросе не предоставлены. Вторая версия метода GetResult() используется при наличии данных для обработки, например, когда пользователь отправляет форму.
Оба метода предоставляют руководство относительно действия, которое представление должно выполнить для генерации ответа, возвращая реализацию интерфейса IResult. Этот интерфейс определен в файле Presenters\Results\IResnlts.cs, как показано ниже:
Это всего лишь пустой интерфейс, который можно применять для реализации различных видов действий, предназначенных для выполнения представлением. В примере проекта определены две реализации IResult. Первая их них - класс RedirectResult - приведена в примере ниже; определение находится в файле Presenters\Results\RedirectResult.cs:
Этот класс будет использоваться для указания на необходимость перенаправления браузера пользователя куда-то в другое место. Целевой URL передается конструктору класса RedirectResuIt и доступен через свойство, предназначенное только для чтения.
Кроме того, в файле \Presenters\Results\DataResult.cs определен класс DataResult, который показан ниже:
Параметр обобщенного типа в классе DataResult применяется для указания объекта данных, который представление должно отобразить. Использование параметра типа в противоположность object поможет проверить получение результата ожидаемого типа от бизнес-логики.
Реализация страницы RSVP
Теперь, располагая хранилищем и инфраструктурой, можно приступать к построению оставшихся частей приложения, начиная с функциональности, которая собирает ответы от потенциальных гостей вечеринки.
Создание презентатора
Мы собираемся построить этот класс поэтапно, чтобы сделать процесс предельно ясным. Выше показано начальное определение класса. Следующий шаг заключается в объявлении того, что класс PSVPPresenter реализует интерфейс IPresenter:
Для указания того, что этот класс будет оперировать с объектами GuestResponse, мы применили параметр обобщенного типа. На следующем шаге мы явно реализуем интерфейс. Проще всего это сделать, щелкнув правой кнопкой мыши на имени IPresenter в коде и выбрав в контекстном меню пункт Implement Interface --- Implement Interface Explicitly (Интерфейс --- Реализовать интерфейс явно). В примере ниже можно увидеть код, который среда Visual Studio добавила в класс RSVPPresenter для поддержки этого интерфейса:
Явная реализация интерфейса означает, что определяемые методы доступны только в случае приведения класса реализации к этому типу интерфейса. Это позволяет реализовать, в одном классе несколько интерфейсов, которые определяют методы с одинаковыми сигнатурами. Когда позже будет рассматриваться тема внедрения зависимостей, вы поймете, почему мы так заинтересованы в интерфейсах.
Осталось лишь реализовать в методах интерфейса необходимую бизнес-логику, как показано в примере ниже:
Когда вызывается перегруженная версия метода GetResult(), не принимающая аргументов, создается новый объект GuestResponse, который возвращается представлению с использованием объекта DataResult. Всегда удобно держать код генерации новых объектов модели данных за пределами представлений, т.к. этот код часто изменяется в течение жизни приложения.
При вызове другой перегруженной версии метода GetResult() параметр GuestResponse помещается в хранилище и возвращается объект RedirectResult, который указывает, что браузер должен быть перенаправлен. Для доступа в хранилище определено свойство repository, которое должно быть установлено перед применением класса.
Создание представления
Здесь есть пара отличий по сравнению с соответствующим файлом из рассмотренного ранее примера. Во-первых, изменено значение атрибута Inherits внутри директивы Page, находящейся в начале файла, чтобы отразить новое пространство имен. (Среда Visual Studio будет устанавливать это автоматически, но если вы копируете код из файлов примера, то должны обращать особое внимание на указанное пространство имен.) Во-вторых, элемент link ссылается на файл Styles.css, расположенный в папке Content. Во всем остальном разметка совпадает.
В примере ниже показано содержимое файла отделенного кода \Pages\Default.aspx.cs. Именно в нем применяется презентатор для поддержки простой бизнес-логики, так что веб-форма может исполнять роль представления и оставаться ориентированной на браузерный запрос и ответ.
Объект RSVPPresenter используется для генерации новых объектов GuestResponse и обработки объектов, которые отправлены пользователем. Преимущество такого подхода состоит в том, что бизнес-логику можно изменять без необходимости в изменении класса отделенного кода. Недостаток подхода связан с некоторым неудобством работы с реализациями IResult, возвращаемыми презентатором. К сожалению, идеальных шаблонов не существует, и это та цена, которую приходится платить за желаемую гибкость тестирования и сопровождения.
Обратите внимание, что первый оператор в методе Page_Load() создает объекты презентатора и хранилища. Это временная мера для быстрого запуска приложения, но она сводит на нет одно из преимуществ нашего подхода, поскольку каждая веб-форма будет иметь жестко закодированную зависимость в своей реализации презентатора и хранилища, и для каждого запроса будет создаваться новое хранилище. Позже мы покажем, как избавиться от этой проблемы с помощью приема, который называется внедрением зависимостей.
Тестирование страницы RSVP
Мы добрались до точки, когда появилась возможность протестировать созданную страницу. Щелкните правой кнопкой мыши на файле \Pages\Default.aspx в окне Solution Explorer и выберите в контекстном меню пункт Set as Start Page (Установить в качестве стартовой страницы), чтобы браузер загружал эту веб-форму автоматически. Запустите приложение либо через панель инструментов Visual Studio, либо выбрав пункт Start Debugging (Начать отладку) в меню Debug (Отладка), и вы увидите знакомый контент:
Читайте также: