Использование Visual Studio 2013 для создания страницы "Базовый" ASP.NET 4.5 веб-формы
Для разработки новых веб-приложений рекомендуется Blazor.
В этом пошаговом руководстве приведены общие сведения о среде разработки веб-сайтов в Microsoft Visual Studio 2013 и Microsoft Visual Studio Express 2013 для Интернета. В этом пошаговом руководстве описано, как создать простую страницу ASP.NET веб-формы и проиллюстрировать основные методы создания новой страницы, добавления элементов управления и написания кода.
В данном пошаговом руководстве представлены следующие задачи.
- Создание проекта приложения веб-формы файловой системы.
- Знакомство с Visual Studio.
- Создание страницы ASP.NET.
- Добавление элементов управления.
- Добавление обработчиков событий.
- Запуск и тестирование страницы из Visual Studio.
Необходимые компоненты
Для выполнения задач этого руководства необходимы:
Microsoft Visual Studio 2013 или Microsoft Visual Studio Express 2013 для Интернета. Платформа .NET Framework устанавливается автоматически.
Примечание.
Microsoft Visual Studio 2013 и Microsoft Visual Studio Express 2013 для Интернета часто называются Visual Studio в рамках этой серии руководств.
Если вы используете Visual Studio, в этом пошаговом руководстве предполагается, что вы выбрали коллекцию параметров веб-разработки при первом запуске Visual Studio. Дополнительные сведения см. в разделе "Практическое руководство. Выбор параметров среды веб-разработки".
Создание проекта веб-приложения и страницы
В этой части пошагового руководства вы создадите проект веб-приложения и добавьте в него новую страницу. Вы также добавите HTML-текст и запустите страницу в браузере.
Создание проекта веб-приложения
Откройте Microsoft Visual Studio.
В меню Файл выберите пункт Создать проект.
Откроется диалоговое окно Создание проекта .
Выберите группу шаблонов ->Visual C# ->Web templates в левой части экрана.
Выберите шаблон Веб-приложения ASP.NET в центральном столбце.
Назовите проект BasicWebApp и нажмите кнопку "ОК".
Затем выберите шаблон веб-формы и нажмите кнопку "ОК", чтобы создать проект.
Visual Studio создает новый проект, который включает предварительно созданные функциональные возможности на основе шаблона веб-формы. Он предоставляет не только страницу Home.aspx, страницу About.aspx, страницу Contact.aspx, но и функции членства, которые регистрируют пользователей и сохраняют свои учетные данные, чтобы они могли войти на веб-сайт. При создании новой страницы Visual Studio по умолчанию отображает страницу в представлении источника , где можно просмотреть HTML-элементы страницы. На следующем рисунке показано, что вы увидите в представлении источника, если вы создали новую веб-страницу с именем BasicWebApp.aspx.
Обзор среды разработки веб-приложений Visual Studio
Прежде чем продолжить изменение страницы, полезно ознакомиться с средой разработки Visual Studio. На следующем рисунке показаны окна и инструменты, доступные в Visual Studio и Visual Studio Express для Интернета.
Примечание.
На этой схеме показаны расположения окон и окон по умолчанию. Меню "Вид" позволяет отображать дополнительные окна, а также изменять порядок и изменять размер окон в соответствии с вашими предпочтениями. Если изменения уже были внесены в расположение окна, то, что вы видите, не будет соответствовать иллюстрации.
Среда Visual Studio
Знакомство с веб-конструктором
Изучите приведенный выше рисунок и соедините текст со следующим списком, который описывает наиболее часто используемые окна и инструменты. (Здесь перечислены не все окна и инструменты, которые вы видите, только те, которые отмечены на предыдущем рисунке.)
- Панели инструментов. Укажите команды для форматирования текста, поиска текста и т. д. Некоторые панели инструментов доступны только при работе в режиме конструктора .
- окно Обозреватель решений. Отображает файлы и папки в веб-приложении.
- Окно документа. Отображает документы, над которыми вы работаете в окнах с вкладками. Вы можете переключаться между документами, щелкнув вкладки.
- Окно свойств . Позволяет изменять параметры страницы, HTML-элементов, элементов управления и других объектов.
- Просмотр вкладок. Представление с различными представлениями одного и того же документа. Представление конструктора — это область редактирования почти WYSIWYG. Исходное представление — это редактор HTML для страницы. Разделенные представления отображаются как представление конструктора, так и представление источника для документа. Далее в этом пошаговом руководстве вы будете работать с представлениями конструктора и источника. Если вы предпочитаете открывать веб-страницы в конструкторе, в меню "Сервис" щелкните "Параметры", выберите узел конструктора HTML и измените параметр "Пуск страницы".
- ToolBox. Предоставляет элементы управления и ЭЛЕМЕНТЫ HTML, которые можно перетащить на страницу. Элементы панели элементов группируются по общей функции.
- Обозреватель erver. Отображает подключения к базе данных. Если обозреватель серверов не отображается, в меню "Вид" щелкните обозреватель серверов.
Создание страницы ASP.NET веб-формы
При создании нового приложения веб-формы с помощью шаблона проекта веб-приложения ASP.NET Visual Studio добавляет страницу ASP.NET (страницу веб-формы) с именем Default.aspx, а также несколько других файлов и папок. Вы можете использовать страницу Default.aspx в качестве домашней страницы для веб-приложения. Однако в этом пошаговом руководстве вы создадите и работаете с новой страницей.
Добавление страницы в веб-приложение
- Закройте страницу Default.aspx . Для этого щелкните вкладку, отображающую имя файла, и выберите параметр закрытия.
- В Обозреватель решений щелкните правой кнопкой мыши имя веб-приложения (в этом руководстве имя приложения — BasicWebSite), а затем нажмите кнопку "Добавить ->Новый элемент".
Откроется диалоговое окно Добавление нового элемента . - Выберите группу шаблонов Visual C# ->Web слева. Затем выберите веб-форму из среднего списка и назовите ее FirstWebPage.aspx.
- Нажмите кнопку "Добавить ", чтобы добавить веб-страницу в проект.
Visual Studio создает новую страницу и открывает ее.
Добавление HTML-кода на страницу
В этой части пошагового руководства вы добавите на страницу статический текст.
Добавление текста на страницу
В нижней части окна документа щелкните вкладку "Конструктор ", чтобы перейти в режим конструктора .
Представление конструктора отображает текущую страницу таким образом, как WYSIWYG. На этом этапе на странице нет текста или элементов управления, поэтому страница пуста, за исключением дефисной строки, которая описывает прямоугольник. Этот прямоугольник представляет элемент div на странице.
Щелкните внутри прямоугольника, который описывается пунктирной линией.
Введите "Добро пожаловать в Visual Web Developer" и дважды нажмите клавишу ВВОД .
На следующем рисунке показан текст, введенный в режиме конструктора .
Переключитесь в представление источника .
Html можно увидеть в представлении источника , созданном при вводе в режиме конструктора .
Запуск страницы
Прежде чем продолжить добавление элементов управления на страницу, его можно запустить.
Запуск страницы
В Обозреватель решений щелкните правой кнопкой мыши FirstWebPage.aspx и выберите "Задать как начальную страницу".
Нажмите клавиши CTRL+F5 , чтобы запустить страницу.
Страница отображается в браузере. Хотя созданная страница имеет расширение имени файла .aspx, она в настоящее время выполняется как любая HTML-страница.
Чтобы отобразить страницу в браузере, щелкните правой кнопкой мыши страницу в Обозреватель решений и выберите "Вид" в браузере.
Закройте браузер, чтобы остановить веб-приложение.
Добавление и программирование элементов управления
Теперь вы добавите серверные элементы управления на страницу. Серверные элементы управления, такие как кнопки, метки, текстовые поля и другие знакомые элементы управления, предоставляют типичные возможности обработки форм для страниц веб-формы. Однако можно программируете элементы управления с кодом, который выполняется на сервере, а не клиентом.
Вы добавите элемент управления Button, элемент управления TextBox и элемент управления Label на страницу и напишите код для обработки события Click для элемента управления Button.
Добавление элементов управления на страницу
Перейдите на вкладку "Конструктор", чтобы перейти в режим конструктора.
Поместите точку вставки в конец текста приветствия в Visual Web Developer и нажмите клавишу ВВОД пять или более раз, чтобы сделать место в поле элемента div .
На панели элементов разверните группу "Стандартный", если она еще не развернута.
Обратите внимание, что может потребоваться развернуть окно панели элементов слева, чтобы просмотреть его.Перетащите элемент управления TextBox на страницу и удалите его в середине поля элемента div с приветствием к Visual Web Developer в первой строке.
Перетащите элемент управления Button на страницу и удалите его справа от элемента управления TextBox .
Перетащите элемент управления Label на страницу и удалите его в отдельной строке под элементом управления Button .
Поместите точку вставки над элементом управления TextBox, а затем введите имя:
Этот статический HTML-текст представляет собой заголовок элемента управления TextBox . Вы можете смешивать статические элементы управления HTML и сервера на одной странице. На следующем рисунке показано, как три элемента управления отображаются в представлении конструктора .
Настройка свойств элемента управления
Visual Studio предлагает различные способы настройки свойств элементов управления на странице. В этой части пошагового руководства вы задали свойства как в представлении конструктора, так и в представлении источника.
Задание свойств элемента управления
Во-первых, откройте окна свойств, выбрав в меню "Вид" ->Другие окна "Окна ">Свойства". Можно также выбрать F4, чтобы отобразить окно "Свойства".
Выберите элемент управления "Кнопка", а затем в окне "Свойства" задайте значение "Текст" для отображаемого имени. Введенный текст отображается на кнопке в конструкторе, как показано на следующем рисунке.
Переключитесь в представление источника .
В представлении источника отображается HTML-код страницы, включая элементы, созданные Visual Studio для элементов управления сервера. Элементы управления объявляются с помощью синтаксиса HTML, за исключением того, что теги используют префикс asp: и включают атрибут runat="server".
Свойства элемента управления объявляются как атрибуты. Например, при задании свойства Text для элемента управления Button на шаге 1 вы фактически задали атрибут Text в разметке элемента управления.
Примечание.
Все элементы управления находятся внутри элемента формы, который также имеет атрибут runat="server". Атрибут runat="server" и asp: префикс для тегов элементов управления помечают элементы управления, чтобы они обрабатывались ASP.NET на сервере при запуске страницы. Код за пределами <runat="server" и <runat="server" элементов runat="server">> отправляется в браузер без изменений, поэтому код ASP.NET должен находиться внутри элемента, открывающий тег которого содержит атрибут runat="server".
Затем вы добавите дополнительное свойство в элемент управления Label . Поместите точку вставки непосредственно после asp:Label в <тег asp:Label>, а затем нажмите клавишу ПРОБЕЛ.
Появится раскрывающийся список, в котором отображается список доступных свойств, которые можно задать для элемента управления Label . Эта функция, называемая IntelliSense, помогает в представлении источника с синтаксисом элементов управления сервера, ЭЛЕМЕНТОВ HTML и других элементов на странице. На следующем рисунке показан раскрывающийся список IntelliSense для элемента управления Label .
Выберите ForeColor и введите знак равенства.
IntelliSense отображает список цветов.
Примечание.
Раскрывающийся список IntelliSense можно отобразить в любое время, нажав клавиши CTRL+J при просмотре кода.
Выберите цвет для текста элемента управления Label . Убедитесь, что вы выберете цвет, который достаточно темный, чтобы прочитать на белом фоне.
Атрибут ForeColor завершается выбранным цветом, включая закрывающую кавычку.
Программирование элемента управления "Кнопка"
В этом пошаговом руководстве вы напишете код, который считывает имя, которое пользователь вводит в текстовое поле, а затем отображает имя в элементе управления Label .
Добавление обработчика событий кнопки по умолчанию
Перейдите в режим конструктора .
Дважды щелкните элемент управления Button .
По умолчанию Visual Studio переключается на файл программной части и создает обработчик событий скелета для события элемента управления Button по умолчанию, события Click . Файл программной части отделяет разметку пользовательского интерфейса (например HTML) от кода сервера (например, C#).
Курсор расположен для добавления кода для этого обработчика событий.Примечание.
Дважды щелкнув элемент управления в конструкторе, можно создать обработчики событий одним из нескольких способов.
В обработчике событий Button1_Click введите Label1 , за которым следует период (.).
При вводе периода после идентификатора метки (Label1) Visual Studio отображает список доступных элементов элемента управления Label , как показано на следующем рисунке. Элемент обычно является свойством, методом или событием.
Завершите обработчик событий Click для кнопки, чтобы она считывала, как показано в следующем примере кода.
protected void Button1_Click(object sender, System.EventArgs e) { Label1.Text = TextBox1.Text + ", welcome to Visual Studio!"; }Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Label1.Text = Textbox1.Text & ", welcome to Visual Studio!" End SubВернитесь к просмотру представления источника разметки HTML, щелкнув правой кнопкой мыши FirstWebPage.aspx в Обозреватель решений и выбрав "Просмотреть разметку".
Прокрутите <страницу до элемента asp:Button> . Обратите внимание, что <элемент asp:Button> теперь имеет атрибут onclick="Button1_Click".
Этот атрибут привязывает событие click кнопки к методу обработчика, закодированному на предыдущем шаге.
Методы обработчика событий могут иметь любое имя; Отображаемое имя — это имя по умолчанию, созданное Visual Studio. Важно отметить, что имя, используемое для атрибута OnClick в HTML, должно соответствовать имени метода, определенного в коде.
Запуск страницы
Теперь вы можете протестировать серверные элементы управления на странице.
Запуск страницы
Нажмите клавиши CTRL+F5 , чтобы запустить страницу в браузере. Если возникает ошибка, выполните описанные выше действия.
Введите имя в текстовое поле и нажмите кнопку "Отображаемое имя ".
Введенное имя отображается в элементе управления Label . Обратите внимание, что при нажатии кнопки страница размещается на веб-сервере. ASP.NET затем повторно создает страницу, запускает код (в данном случае обработчик событий Click элемента управления Button запускается), а затем отправляет новую страницу в браузер. Если вы просматриваете строку состояния в браузере, вы увидите, что страница выполняет круговую поездку на веб-сервер при каждом нажатии кнопки.
В браузере просмотрите источник страницы, которую вы запускаете, щелкнув правой кнопкой мыши страницу и выбрав источник представления.
В исходном коде страницы отображается HTML без кода сервера. В частности, вы не видите asp: элементы, с которыми вы работали< в представлении источника.> При запуске страницы ASP.NET обрабатывает серверные элементы управления и отрисовывает HTML-элементы на страницу, выполняющую функции, представляющие элемент управления. Например, <элемент управления asp:Button> отображается как элемент ввода HTML<="submit".>
Закройте браузер.
Работа с дополнительными элементами управления
В этой части пошагового руководства вы будете работать с элементом управления "Календарь ", который отображает даты в месяц за раз. Элемент управления Calendar — это более сложный элемент управления, чем кнопка, текстовое поле и метка, с которыми вы работали, иллюстрирует некоторые дополнительные возможности серверных элементов управления.
В этом разделе вы добавите элемент управления System.Web.UI.WebControls.Calendar на страницу и отформатируете его.
Добавление элемента управления Calendar
В Visual Studio перейдите в режим конструктора .
В разделе "Стандартный" панели элементов перетащите элемент управления Calendar на страницу и удалите его под элемент div, содержащий другие элементы управления.
Отображается панель смарт-тегов календаря. На панели отображаются команды, которые упрощают выполнение наиболее распространенных задач для выбранного элемента управления. На следующем рисунке показан элемент управления "Календарь" в режиме конструктора.
На панели смарт-тегов выберите "Автоформат".
Откроется диалоговое окно "Автоформат ", которое позволяет выбрать схему форматирования календаря. На следующем рисунке показан диалоговое окно "Автоформат " для элемента управления "Календарь ".
В списке "Выбор схемы " выберите "Простой " и нажмите кнопку "ОК".
Переключитесь в представление источника .
Элемент asp:Calendar> можно увидеть<. Этот элемент гораздо длиннее элементов для простых элементов управления, созданных ранее. Она также включает вложенные элементы, такие как <WeekEndDayStyle>, которые представляют различные параметры форматирования. На следующем рисунке показан элемент управления "Календарь" в представлении источника. (Точная разметка, в которую вы видите Исходное представление может немного отличаться от иллюстрации.)
Программирование элемента управления "Календарь"
В этом разделе вы запрограммируют элемент управления Calendar для отображения выбранной даты.
Программирование элемента управления Calendar
В режиме конструктора дважды щелкните элемент управления "Календарь ".
Создается и отображается новый обработчик событий в файле кода с именем FirstWebPage.aspx.cs.
Завершите обработчик событий SelectionChanged следующим кодом.
protected void Calendar1_SelectionChanged(object sender, System.EventArgs e) { Label1.Text = Calendar1.SelectedDate.ToLongDateString(); }Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs) Label1.Text = Calendar1.SelectedDate.ToLongDateString() End SubПриведенный выше код задает текст элемента управления метки на выбранную дату элемента управления календаря.
Запуск страницы
Теперь можно протестировать календарь.
Запуск страницы
Нажмите клавиши CTRL+F5 , чтобы запустить страницу в браузере.
Щелкните дату в календаре.
Дата, щелкнуемая вами, отображается в элементе управления "Метка ".
В браузере просмотрите исходный код страницы.
Обратите внимание, что элемент управления Calendar отображается на странице в виде таблицы, с каждым днем как элемент td .
Закройте браузер.
Next Steps
В этом пошаговом руководстве показаны основные функции конструктора страниц Visual Studio. Теперь, когда вы узнаете, как создать и изменить страницу веб-формы в Visual Studio, вам может потребоваться изучить другие функции. Например, может потребоваться выполнить следующее:
- Узнайте больше о ASP.NET веб-формы, следуя пошаговой серии руководств по началу работы с ASP.NET 4.5 веб-формы и Visual Studio 2013.
- Дополнительные сведения о каскадных таблицах стилей (CSS). Дополнительные сведения см. в статье "Работа с CSS".