Пошаговое руководство. Создание нового веб-узла ASP.NET

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

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

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

• Создание веб-узла на базе файловой системы.

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

• Выполнение страниц с использованием сервера разработки ASP.NET Development ServerВеб-серверы в Visual Web Developer.

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

Для выполнения инструкций данного пошагового руководства необходимы следующие компоненты:

• Microsoft Visual Studio 2008 или Microsoft Visual Web Developer, экспресс-выпуск. (дополнительные сведения см. на веб-узле Visual Studio Development Center).

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

В первой части данного пошагового руководства создается веб-узел ASP.NET со страницей по умолчанию. Этот веб-узел будет веб-узлом на базе файловой системы, для работы которого не требуются службы Microsoft Internet Information Services (IIS). Это позволяет запустить созданную страницу на локальной файловой системе компьютера.

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

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

Создание веб-узла на базе файловой системы

1. Откройте Visual Web Developer.

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

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

   

3. В группе Установленные шаблоны Visual Studio выберите Веб-узел ASP.NET.

4. В списке Расположение выберите Файловая система и введите имя папки, в которой будут храниться страницы веб-узла.

   Например, введите имя папки C:\Tasks.

5. В списке Язык выберите язык программирования, который будет использоваться в веб-проекте: Visual Basic или Visual C#.

   Примечание.
   В этом пошаговом руководстве не потребуется писать никакого кода.

6. Нажмите кнопку ОК.

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

   

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

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

Схема среды Visual Web Developer:

В следующем списке описываются показанные на рисунке наиболее часто используемые окна и инструменты. (Описываются не все окна и инструменты среды, а только те, которые отмечены на рисунке.)

• Панели инструментов. Предоставляет команды для форматирования текста, поиска текста и т.д. Некоторые панели инструментов доступны только при работе в представлении Конструктор.

• Обозреватель решений. Отображает файлы и папки веб-узла.

• Окно документов. Отображает рабочие документы в окнах с вкладками. Чтобы перейти к требуемому документу, нужно щелкнуть его вкладку.

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

• Окно Свойства. Позволяет изменять параметры страницы, элементов HTML, элементов управления и других объектов.

• Окно Свойства CSS. Когда активно представление Конструктор, отображает текущие стили CSS.

• Окна Управление стилями и Применение стилей. Помогает управлять стилями CSS веб-узла.

• Панель элементов. Предоставляет элементы управления и HTML-элементы, которые можно перетащить на страницу. Элементы в Панели элементов сгруппированы по общим функциям.

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

  Примечание.
  Окно Обозреватель баз данных в Visual Web Developer называется в полной версии Visual StudioОбозреватель серверов.

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

Обзор возможностей среды разработки

1. В меню Вид выберите Панели инструментов.

   В подменю отобразятся доступные панели инструментов. Выбранные панели инструментов отмечаются флажком.

2. Перейдите в нижнюю часть списка панелей инструментов и щелкните Настройка.

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

3. Просмотрите доступные панели инструментов. По завершению работы с окном нажмите кнопку Закрыть.

4. В меню Вид выберите пункт Обозреватель решений.

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

5. В Обозревателе решений щелкните правой кнопкой мыши верхний элемент в списке веб-узлов.

   Появится контекстное меню общих операций с веб-узлом.

6. Нажмите клавишу ESC, чтобы закрыть контекстное меню.

7. Чтобы открыть файл в окне документов, в Обозревателе решений щелкните правой кнопкой мыши файл Web.config и выберите пункт Открыть.

8. Дважды щелкните страницу Default.aspx, чтобы открыть страницу в окне документов. Двойной щелчок файла является альтернативой использованию команды Открыть контекстного меню.

   Обратите внимание, что имя каждой открытой страницы отображается на вкладке в верхней части окна документов.

9. В нижней части окна документов щелкните Разделение для одновременного отображения представлений Исходный код и Конструктор.

10. В меню Вид выберите пункт Окно свойств.

    Откроется окно Свойства.

    При выборе объекта в окне документов окно Свойства отображает свойства выбранного объекта.

11. В области представления Исходный код выберите элемент form и просмотрите в окне Свойства его доступные свойства.

12. В меню Вид выберите пункт Панель элементов.

    Откроется окно Панель элементов.

13. В представлении Конструктор на вкладке СтандартныеПанели элементов перетащите элемент Button в документ и поместите его в элемент div.

    Обратите внимание, что в представлении Исходный код будет обновлена соответствующая разметка.

14. В меню Вид выберите Обозреватель баз данных.

    Откроется окно Обозреватель баз данных.

    Примечание.
    Окно Обозреватель баз данных в Visual Web Developer называется в полной версии Visual StudioОбозреватель серверов.

15. Чтобы просмотреть доступные параметры базы данных, щелкните правой кнопкой мыши Подключения данных.

Создание веб-страницы ASP.NET

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

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

1. В окне документов щелкните правой кнопкой мыши вкладку страницы Default.aspx и выберите пункт Закрыть.

2. Если будет предложено сохранить изменения, выберите Нет.

3. В Обозревателе решений щелкните правой кнопкой мыши веб-узел (например, C:\Tasks) и выберите команду Добавить новый элемент.

   Откроется диалоговое окно Добавление нового элемента.

4. В разделе Установленные шаблоны Visual Studio выберите Форма Web Forms.

5. В поле Имя введите Home.aspx.

6. В списке Язык выберите предпочтительный язык программирования (Visual Basic или C#).

7. Снимите флажок Размещать код в отдельном файле.

   На следующем рисунке показано диалоговое окно Добавление нового элемента.

   

8. Нажмите кнопку Добавить.

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

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

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

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

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

2. На этой странице введите Список поручений.

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

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

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

1. Нажмите CTRL+F5 для запуска страницы.

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

   

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

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

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

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

В данном руководстве были показаны основные возможности Visual Web Developer.

Для повышения эффективности управления файлами рассмотрите возможность сохранения файлов веб-узла в системе управления версиями файлов, например Visual SourceSafe. Дополнительные сведения см. в разделе Знакомство с системой управления версиями.

См. также

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

Пошаговые руководства по ASP.NET