Пошаговое руководство. Создание базовой веб-страницы в Visual Web Developer

Статья
10/22/2014

Обновлен: Ноябрь 2007

Данное пошаговое руководство знакомит с основными возможностями программы Microsoft Visual Web Developer. Оно поможет создать простую страницу в Visual Web Developer, проиллюстрирует базовые методы создания новой страницы, добавления элементов управления и написания кода.

В этом пошаговом руководстве, в частности, рассматриваются следующие задачи:

Создание файлового веб-узла.
Ознакомление со средой Visual Web Developer.
Создание однофайловой страницы ASP.NET в Visual Web Developer.
Добавление элементов управления.
Добавление обработчиков событий.
Выполнение страниц при помощи Веб-серверы в Visual Web Developer.

Обязательные компоненты

Для выполнения этого пошагового руководства потребуется:

Программа Visual Web Developer.
Платформа .NET Framework.

Создание веб-узла и страницы

В этом разделе пошагового руководства создается веб-узел, на который добавляется новая страница. После этого на страницу добавляется текст HTML, а сама страница выполняется в веб-обозревателе.

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

В файловом веб-узле страницы и другие файлы хранятся в выбранной папке на локальном компьютере. Другие параметры веб узла включают веб-узел локальной IIS, который хранит файлы во вложенной папке локального корня IIS (обычно, \Inetpub\Wwwroot\). FTP-узел хранит файлы на удаленном сервере, доступ к которому по всей сети Интернет осуществляется с помощью протокола FTP. Удаленный веб-узел хранит файлы на удаленном сервере, доступном через локальную сеть. Дополнительные сведения см. в разделе Пошаговое руководство. Редактирование веб-узлов с FTP в Visual Web Developer. Также файлы веб-узла могут храниться в системе управления версиями файлов, такой как Visual SourceSafe. Дополнительные сведения см. в разделе Знакомство с системой управления версиями.

Создание файлового веб-узла

Откройте Visual Web Developer.
В меню Файл выберите пункт Создать веб-узел.

Появится диалоговое окно Создать веб-узел, как показано на следующем снимке экрана.

Диалоговое окно "Создать веб-узел".
В группе Установленные шаблоны Visual Studio выберите Веб-узел ASP.NET.

При создании веб-узла указывается шаблон. Каждый шаблон создает веб-приложение, содержащее различные файлы и папки. В ходе данного пошагового руководства будет создан веб-узел на базе шаблона Веб-узел ASP.NET, который создает некоторые папки и несколько файлов по умолчанию.
В поле Расположение выберите поле Файловая система и введите имя папки, в которой будут храниться страницы веб-узла.

Например, введите имя папки C:\BasicWebSite.
В списке Язык выберите Visual Basic или Visual C#.

Выбранный язык программирования будет установлен как язык по умолчанию для данного веб-узла. Тем не менее, в одном и том же веб-приложении можно использовать несколько языков, создавая страницы и компоненты на различных языках программирования.
Нажмите кнопку OК.

Visual Web Developer создаст папку и новую страницу с именем Default.aspx. По умолчанию при создании новой страницы Visual Web Developer отображает страницу в представлении источника, где можно видеть HTML-элементы страницы. На следующем снимке экрана показана веб-страница по умолчанию в представлении источника.

Веб-страница по умолчанию в представлении источника.

Обзор возможностей Visual Web Developer

Прежде чем продолжить работу над страницей, полезно ознакомиться со средой разработки Visual Web Developer. На следующем рисунке показаны окна и средства, доступные в Visual Web Developer.

Схема среды Visual Web Developer.
Схематика окно и средств IDE

Знакомство с Web designer в Visual Web Developer

Просмотрите предыдущую иллюстрацию и сравните текст с расположенным ниже списком, который описывает наиболее часто используемые окна и средства. (Не все из этих окон и средств перечислены здесь, а только те, которые помечены на предыдущем рисунке.)

Панели инструментов. Предоставляют команды для форматирования текста, поиска текста и т. д. Некоторые панели инструментов доступны только при работе в представлении конструирования.
Обозреватель решений. Отображает файлы и папки на веб-узле.
Окно документов. Отображает рабочие документы в окнах с вкладками. Для переключения между документами нужно щелкнуть вкладку.
Окно "Свойства". Позволяет изменять параметры страницы, элементов HTML, элементов управления и других объектов.
Вкладки представлений. Представляют различные представления одного и того же документа. Представление Конструктор — это область редактирования, близкая к режиму точного отображения (WYSIWYG). Представление Источник — это HTML-редактор страницы. В представлении с разделением отображаются оба представления документа — Конструктор и Исходный код. Далее в данном руководстве будут использоваться представления Конструктор и Исходный код. Если вы предпочитаете открывать веб-страницы в представлении Конструктор, то в меню Инструменты щелкните пункт Параметры, выберите узел Конструктор HTML и измените параметр Начинать создание страниц.
Панель элементов. Предоставляет элементы управления и элементы HTML, которые можно перетаскивать на страницу. Элементы в Панели элементов сгруппированы по общим функциям.

Обозреватель серверов/обозреватель баз данных. Отображает подключения базы данных. Если вкладка Обозреватель серверов не видна в Visual Web Developer, следует в меню Вид выбрать Обозреватель серверов или Обозреватель баз данных.

Примечание.
Можно изменять порядок, изменять размеры и закреплять окна в соответствии с собственными предпочтениями. Меню вид позволяет отображать дополнительные окна.

Создание новой страницы Web Forms

При создании нового веб-узла Visual Web Developer добавляет ASP.NET страницу (страницу Web Forms) с именем Default.aspx. Страницу Default.aspx можно использовать в качестве домашней страницы веб-узла. Но в данном пошаговом руководстве мы создадим и будем работать с новой страницей.

Добавление страницы к веб-узлу

Закройте страницу Default.aspx. Для этого щелкните правой кнопкой мыши на вкладке и именем файла и выберите команду Закрыть.
В обозревателе решений щелкните правой кнопкой мыши веб-узел (например, C:\BasicWebSite) и затем нажмите кнопку Добавление нового элемента.
В разделе Установленные шаблоны Visual Studio выберите Форма Web Forms. На следующем снимке экрана показано диалоговое окно Добавление нового элемента.

Диалоговое окно "Добавление нового элемента".
В поле Имя введите FirstWebPage.
В списке Язык выберите язык программирования, с которым вы предпочитаете работать (Visual Basic, C# или J#). При создании веб-узла был указан язык по умолчанию. Однако каждый раз при создании новой страницы или компонента для веб-узла можно задавать язык программирования, отличный от установленного по умолчанию. Можно использовать различные языки программирования на одном веб-узле.
Снимите флажок Размещать код в отдельном файле.

В данном пошаговом руководстве показано создание страницы в одном файле, содержащей и код, и HTML. Код страниц ASP.NET может находиться как на странице, так и в отдельном файле класса. Подробные сведения о сохранении кода в отдельном файле см. в разделе Пошаговое руководство. Создание базовой веб-страницы с разделением кода в Visual Web Developer.
Нажмите кнопку Добавить.

Visual Web Developer создаст новую страницу и откроет ее в режиме источника.

Добавление на страницу HTML-кода

В этой части пошагового руководства на страницу будет добавлен статический текст.

Добавление текста на страницу

Чтобы переключиться в представление конструирования, в нижней части окна документов выберите вкладку Конструктор.

Представление конструирования отображает страницу, над которой ведется работа, в режиме точного отображения (WYSIWYG). После выполнения этих действий страница не содержит текста или элементов управления.
На странице введите Добро пожаловать в Visual Web Developer.

На следующем снимке экрана показан текст, введенный в режиме конструктора.

Текст приветствия в режиме конструктора.
Перейдите в режим источника.

Можно видеть HTML-код, созданный при введении текста в режиме конструктора, как это показано на следующем снимке экрана.

Текст приветствия в режиме источника.

Выполнение страницы

Перед тем как продолжить добавлять элементы управления на страницу можно попробовать ее запустить. Для запуска страницы требуется веб-сервер. На рабочем веб-узле в качестве веб-сервера используется служба IIS. Однако чтобы проверить страницу, можно использовать ASP.NET Development Server, который работает локально и не требует служб IIS. Для веб-узлов с файловой системой веб-сервером по умолчанию в Visual Web Developer является сервер ASP.NET Development Server.

Запуск страницы

Чтобы запустить страницу, нажмите клавиши CTRL + F5.

Visual Web Developer запускает сервер ASP.NET Development Server. Появится значок в панели инструментов, указывающий, что веб-сервер Visual Web Developer работает, как показано на следующем снимке экрана.

Значок веб-сервера в Visual Web Developer.
Значок разработки веб-сервера

Страница откроется в веб-обозревателе. Хотя созданная страница имеет расширение ASPX, она в данный момент выполняется как обычная HTML-страница.

Примечание.
Если в обозревателе отображается ошибка 502 или ошибка, свидетельствующая о невозможности отображения страницы, то, возможно, в обозревателе необходимо настроить выполнение локальных запросов в обход прокси-сервера. Дополнительные сведения см. в разделе Практическое руководство. Обход прокси-сервера для локальных веб-запросов.

Если в обозревателе отображается ошибка 502 или ошибка, свидетельствующая о невозможности отображения страницы, то, возможно, в обозревателе необходимо настроить выполнение локальных запросов в обход прокси-сервера. Дополнительные сведения см. в разделе Практическое руководство. Обход прокси-сервера для локальных веб-запросов.

Закройте обозреватель.

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

В этой части пошагового руководства на страницу будут добавлены элементы управления Button, TextBox и Label и будет написан код для управления событием Click элемента управления Button.

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

Добавление элементов управления на страницу

Выберите вкладку Конструктор, чтобы перейти в представление конструирования.
Нажмите сочетание клавиш SHIFT + ENTER несколько раз, чтобы создать немного места.
Из группы Стандартные в Панели элементов перетащите на страницу три элемента управления: TextBox, Button и Label.
Разместите точку вставки над элементом управления TextBox и Введите свое имя:.

Этот статический текст HTML используется в качестве заголовка элемента управления TextBox. На одной странице могут использоваться статические элементы управления HTML и серверные элементы. На следующем снимке экрана показано отображение трех элементов управления в режиме конструктора.

Элементы управления в режиме конструктора.

Установка свойств элемента управления

В Visual Web Developer поддерживаются различные способы установки свойств элементов управления, расположенных на странице. В этой части пошагового руководства вы зададите свойства в режиме конструктора и режиме источника.

Установка свойств элемента управления

Выберите элемент управления Button, а затем в окне "Свойства" присвойте свойству Text значение Display Name, как это показано на следующем снимке экрана.

Измененный текст элемента управления "Кнопка".
Перейдите в режим источника.

В представлении исходного кода отображается HTML-код страницы, включая элементы, автоматически создаваемые в Visual Web Developer для серверных элементов управления. Для объявления элементов управления используется схожий с HTML синтаксис. Отличие заключается в использовании префикса asp: и атрибута runat="server".

Свойства элемента управления объявляются как атрибуты. Например, при задании свойства Text элемента управления Button на первом шаге, в действительности, задавался атрибут Text разметки элемента управления.

Обратите внимание, что все элементы управления находятся внутри элемента <form>, который также имеет атрибут runat="server". Атрибут runat="server" и префикс asp: тегов элемента управления отмечают элементы управления так, что они обрабатываются в ASP.NET на сервере при запуске страницы. Код вне элементов <form runat="server"> и <script runat="server"> передается как клиентская разметка или код в обозреватель, поэтому код в ASP.NET должен быть внутри элемента, в открывающем теге которого содержится атрибут runat="server".
Установите точку вставки в пространстве внутри тега <asp:label>, затем нажмите клавишу ПРОБЕЛ.

Появится раскрывающийся список, в котором отображается список свойств, которые можно задавать для элемента управления Label. Эта функция, именуемая IntelliSense, помогает работать в режиме источника с синтаксисом серверных элементов управления, HTML элементами и другими элементами на странице. На следующем снимке экрана показан раскрывающий список IntelliSense для элемента управления Label.

Функция IntelliSense для элемента управления "Метка".

Выберите ForeColor и введите знак равенства ("="). IntelliSense отображает список цветов.

Примечание.
Раскрывающийся список IntelliSense можно отобразить в любой момент путем нажатия сочетания клавиш CTRL + J.

Выберите цвет текста элемента управления Label.

Атрибут ForeColor выполнен в выбранном вами цвете.

Программирование элемента управления "Кнопка"

В данном пошаговом руководстве вы напишете код для считывания имени, введенного пользователем в текстовом поле, и для отображения имени в элементе управления Label.

Добавление используемого по умолчанию обработчика событий кнопки

Перейдите в представление конструирования.

Дважды щелкните элемент управления Button.

Visual Web Developer переключится в представление исходного кода и создаст каркас обработчика событий для события по умолчанию элемента управления Button, события Click.

Примечание.
Двойной щелчок элемента управления в режиме конструктора является всего лишь одним из путей создания обработчика событий.

Внутри обработчика событий введите следующее:

Метка1.

Visual Web Developer отобразит список доступных членов для элемента управления Label, как это показано на следующем снимке экрана.

Доступные члены элемента управления "Метка".

Завершите обработчик событий Click для кнопки, чтобы он считывал, как это показано в следующем примере кода.

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"
End Sub

protected void Button1_Click(object sender, System.EventArgs e)
{    
    Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";
}

Прокрутите вниз до элемента <asp:Button>. Обратите внимание, что свойство <asp:Button> теперь имеет атрибут OnClick="Button1_Click". Этот атрибут привязывает событие Click кнопки к методу обработчика, введенному в виде кода в ходе шага 4.

Методы обработчиков событий могут иметь любые имена; отображаемое имя создается Visual Web Developer по умолчанию. Важным моментом является то, что используемое имя для атрибута OnClick должно совпадать с именем метода на странице.

Примечание.
При использовании языка Visual Basic с разделением кода Visual Web Developer не добавляет явный атрибут OnClick. Вместо этого событие привязывается к методу обработчика при помощи ключевого слова Handles в объявлении обработчика.

Запуск страницы

Теперь можно проверить серверные элементы управления на странице.

Запуск страницы

Нажмите клавиши CTRL + F5 для запуска страницы в веб-обозревателе.

Страница опять запускается при помощи сервера ASP.NET Development Server.
В текстовом поле введите имя и нажмите кнопку.

Введенное имя отображается в элементе управления Label. Обратите внимание, что при нажатии кнопки страница отправляется на веб-сервер. После этого ASP.NET заново создает страницу, выполняет код (в данном случае выполняется обработчик событий Click элемента управления Button), а затем отправляет новую страницу в обозреватель. Если смотреть в панель состояния в обозревателе, то можно увидеть, что страница каждый раз отправляется на веб-сервер и обратно при каждом нажатии кнопки.
Просмотрите исходный код выполняемой страницы в обозревателе.

В исходном коде страницы видно только обычный код HTML; элементов <asp:>, с которыми ведется работа в режиме источника, не видно. При выполнении страницы ASP.NET обрабатывает серверные элементы управления и отображает HTML-элементы на странице, на которой выполняются действия, назначенные для элемента управления. Например, элемент управления <asp:Button> отображается в виде HTML-элемента <input type="submit">.
Закройте обозреватель.

Работа с дополнительными элементами управления

В этой части пошагового руководства будем работать с элементом управления Calendar, который отображает даты. Элемент управления Calendar является более сложным элементом управления, чем кнопка, текстовое поле или метка, с которыми вы работали до этого, и показывает некоторые расширенные возможности серверных элементов управления.

В этом разделе на страницу будет добавлен и отформатирован элемент управления Calendar.

Добавление элемента управления "Календарь"

В Visual Web Developer переключитесь в представление конструирования.
Из раздела Стандартные в Панели элементов перетащите на страницу элемент управления Calendar.

Отобразится панель смарт-тега календаря. Панель отображает команды, которые позволяют выполнять самые часто используемые задачи выбранного элемента управления. На следующем снимке экрана показан элемент управления Calendar, отображенный в режиме конструктора.

Элемент управления "Календарь" в представлении конструирования.
В области смарт-тега выберите Автоформат.

Откроется диалоговое окно Автоформат, которое позволяет выбрать схему форматирования календаря. На следующем снимке экрана показано диалоговое окно Автоформат для элемента управления Calendar.

Диалоговое окно "Автоформат" элемента управления "Календарь".
В списке Выбор схемы выберите Простая и нажмите кнопку OK.
Перейдите в режим источника.

Вы видите элемент <asp:Calendar>. Этот элемент гораздо длиннее, чем элементы простых элементов управления, создаваемых ранее. Он также содержит подэлементы, такие как <WeekEndDayStyle>, которые отражают различные параметры форматирования. На следующем снимке экрана показан элемент управления Calendar, в представлении исходного кода.

Элемент управления "Календарь" в представлении исходного кода.

Программирование элемента управления "Календарь"

В этом разделе будет запрограммирован элемент управления Calendar на отображение текущей выбранной даты.

Программирование элемента управления "Календарь"

В представлении Конструктор дважды щелкните элемент управления Calendar.

В представлении Исходный код создается новый обработчик событий.

Завершите обработчик событий SelectionChanged следующим выделенным кодом.

Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Calendar1.SelectedDate.ToString()
End Sub

protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{    
    Label1.Text = Calendar1.SelectedDate.ToString();
}

Запуск страницы

Теперь можно проверить календарь.

Запуск страницы

Нажмите клавиши CTRL + F5 для запуска страницы в обозревателе.
Щелкните дату в календаре.

Указанная дата будет отображена в элементе управления Label.
Просмотрите исходный код страницы в обозревателе.

Обратите внимание, что элемент управления Calendar отображается на странице в виде таблицы, где каждый день является элементом <td>, содержащим элемент <a>.
Закройте обозреватель.

Следующие действия

В данном пошаговом руководстве были показаны основные возможности разработки страниц в Visual Web Developer. Теперь, когда вы знаете, как создавать и редактировать веб-страницы в Visual Web Developer, можно изучить другие функциональные возможности. Ниже перечислены некоторые из таких возможностей.

Получение сведений о редактировании кода HTML в Visual Web Developer. Дополнительные сведения см. в разделе Пошаговое руководство. Базовое редактирование HTML в Visual Web Developer.
Обеспечение доступа к данным на веб-страницах. Дополнительные сведения см. в разделе Пошаговое руководство. Основы доступа к данным на веб-страницах.
Получение сведений об отладчике веб-страниц. Дополнительные сведения см. в разделе Пошаговое руководство. Отладка веб-страниц в Visual Web Developer.
Создание веб-страниц, специально разрабатываемых для мобильных телефонов и других устройств. Дополнительные сведения см. в разделе Разработка веб-узлов для мобильных устройств.
Создание унифицированного макета узла с использованием главных страниц. Дополнительные сведения см. в разделе Пошаговое руководство. Создание и использование главных страниц ASP.NET в Visual Web Developer.
Добавление навигационных элементов на узел, чтобы пользователи могли легче перемещаться между страницами. Дополнительные сведения см. в разделе Пошаговое руководство. Добавление структуры переходов веб-узла.

См. также

Задачи

Пошаговое руководство. Создание локального веб-узла IIS в Visual Web Developer

Пошаговое руководство. Редактирование веб-узлов с FTP в Visual Web Developer

Основные понятия

Общие сведения о ASP.NET

Работа с Visual Web Developer

Поделиться через

Пошаговое руководство. Создание базовой веб-страницы в Visual Web Developer

Обязательные компоненты

Создание веб-узла и страницы

Создание файлового веб-узла

Обзор возможностей Visual Web Developer

Знакомство с Web designer в Visual Web Developer

Создание новой страницы Web Forms

Добавление страницы к веб-узлу

Добавление на страницу HTML-кода

Добавление текста на страницу

Выполнение страницы

Запуск страницы

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

Добавление элементов управления на страницу

Установка свойств элемента управления

Установка свойств элемента управления

Программирование элемента управления "Кнопка"

Добавление используемого по умолчанию обработчика событий кнопки

Запуск страницы

Запуск страницы

Работа с дополнительными элементами управления

Добавление элемента управления "Календарь"

Программирование элемента управления "Календарь"

Программирование элемента управления "Календарь"

Запуск страницы

Запуск страницы

Следующие действия

См. также

Задачи

Основные понятия

Дополнительные ресурсы