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

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

  • Статья

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

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

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

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

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

  • Использование Visual Web Developer для создания страницы ASP.NET с разделением кода.

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

  • Добавление обработчиков событий.

  • Выполнение страниц на сервере разработки ASP.NET.

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

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

  • Visual Web Developer и платформа .NET Framework.

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

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

Если веб-узел Visual Web Developer уже создан (например, в разделе Пошаговое руководство. Создание базовой веб-страницы в Visual Web Developer), можно перейти непосредственно к разделу «Создание новой страницы» этого руководства. В противном случае создайте новый веб-узел и страницу, выполнив следующие действия.

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

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

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

    Откроется диалоговое окно Создать веб-узел.

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

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

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

  5. В списке «Язык» выберите пункт Visual Basic или Visual C#.

    kxbhbb82.alert_note(ru-ru,VS.90).gifПримечание.

    В текущей версии Visual Web Developer не поддерживается создание страниц с кодом программной части на языке Visual J#.

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

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

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

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

При создании нового веб-узла в Visual Web Developer автоматически добавляется страница с именем Default.aspx. По умолчанию в Visual Web Developer новая страница создается с разделением кода.

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

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

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

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

  4. В поле Имя введите WebPageSeparated.

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

  6. Убедитесь, что установлен флажок Размещать код в отдельном файле.

    По умолчанию этот флажок установлен.

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

    В Visual Web Developer создаются два файла. В файле WebPageSeparated.aspx, открытом в редакторе, содержатся элементы управления и текст страницы. В файле WebPageSeparated.aspx.vb или WebPageSeparated.aspx.cs (в зависимости от выбранного языка программирования) содержится код страницы. Чтобы просмотреть оба файла в обозревателе решений, щелкните знак плюса (+), расположенный рядом с файлом WebPageSeparated.aspx. Создаваемый файл кода изначально не открывается. Этот файл будет открыт позднее для написания кода.

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

В этом разделе пошагового руководства на страницу WebPageSeparated.aspx добавляется статический текст HTML.

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

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

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

  2. Установите точку вставки на элемент div, расположенный на странице.

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

  4. Перейдите в представление исходного кода.

    В этом режиме отображается HTML-код, созданный в представлении конструирования. На этом этапе страница выглядит, как обычная страница HTML. Единственное отличие заключается в наличии директивы <%@ Page %> в верхней части страницы.

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

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

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

  1. Выберите вкладку Конструктор, чтобы перейти в представление конструирования.

  2. Установите точку вставки после ранее добавленного текста.

  3. Несколько раз нажмите клавишу ВВОД, чтобы создать пустую область страницы.

  4. С вкладки Стандартные в панели элементов перетащите на страницу элементы управления TextBox, Button и Label.

  5. Установите точку вставки перед текстовым полем и введите текст Введите ваше имя:.

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

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

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

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

  1. Выберите элемент управления Button, затем в окне Свойства присвойте его свойству Text значение Отображаемое имя.

  2. Перейдите в представление исходного кода.

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

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

    Обратите внимание, что все элементы управления размещаются внутри элемента form, который также обладает атрибутом runat="server". Атрибут runat="server" и префикс asp: определяют обработку элементов управления средствами ASP.NET при выполнении страницы.

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

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

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

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

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

    В отдельном окне редактора Visual Web Developer открывается файл WebPageSeparated.aspx.vb или WebPageSeparated.aspx.cs. В этом файле содержится общая схема обработчика событий Click кнопки.

  3. Добавьте выделенный ниже код в обработчик событий Click.

    Protected Sub Button1_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Button1.Click
        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!";
}

    Обратите внимание, что благодаря применению функции IntelliSense в процессе ввода предлагаются контекстные варианты выбора. Процесс написания кода однофайловой страницы выглядит аналогичным образом.

Просмотр страницы и файла кода

На данный момент созданы оба файла, составляющие полную страницу WebPageSeparated: WebPageSeparated.aspx и WebPageSeparated.aspx.vb или WebPageSeparated.aspx.cs. В этом разделе пошагового руководства показан порядок просмотра структуры и взаимосвязи этих файлов.

Просмотр страницы и файла кода

  1. Выберите расположенную в верхней части окна редактора вкладку WebPageSeparated.aspx, чтобы перейти к файлу страницы.

  2. Перейдите в представление исходного кода.

    В верхней части страницы отображается директива @ page, обеспечивающая ее привязку к файлу кода. Код директивы может выглядеть следующим образом.

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="WebPageSeparated.aspx.vb" Inherits="WebPageSeparated" %>

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebPageSeparated.aspx.cs" Inherits="WebPageSeparated" %>

    (Перенос строк в редакторе не выполняется. Атрибут языка и расширение файла соответствуют выбранному языку программирования.)

    При выполнении страницы средствами ASP.NET автоматически создается экземпляр класса, представляющего эту страницу. Атрибут Inherits задает класс, определенный в файле кода программной части, от которого наследуется страница ASPX. По умолчанию имя класса, создаваемого в файле кода программной части, соответствует имени страницы.

    Атрибут CodeFile определяет файл кода для этой страницы. Другими словами, файл кода программной части содержит код обработки событий страницы.

  3. Выберите вкладку WebPageSeparated.aspx.vb или WebPageSeparated.aspx.cs, чтобы перейти к файлу кода.

    В этом файле содержится код, аналогичный определению класса. Однако это определение класса является неполным и содержит только часть класса, определяющего страницу. Разделяемый класс, определенный в файле кода, содержит обработчики событий и другой пользовательский код. Во время выполнения средствами ASP.NET создается другой разделяемый класс, содержащий пользовательский код. Этот полный класс используется в качестве базового для отображения страницы. Дополнительные сведения см. в разделе Общие сведения о классе страницы ASP.NET.

    kxbhbb82.alert_note(ru-ru,VS.90).gifПримечание.

    В отличие от модели кода программной части Microsoft Visual Studio .NET 2003 в новой модели класс кода программной части содержит только определение класса. Например, этот класс не содержит переменные экземпляров, соответствующие элементам управления страницы. Автоматически создаваемый код такого типа больше не используется.

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

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

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

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

    Страница выполняется с использованием сервера разработки ASP.NET.

    kxbhbb82.alert_note(ru-ru,VS.90).gifПримечание.

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

  2. Введите имя в текстовое поле и нажмите кнопку.

    Введенное имя отображается в элементе управления Label.

  3. Просмотрите исходный код выполняемой страницы в обозревателе.

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

    Страница работает так же, как и аналогичная однофайловая страница. (Если в разделе Пошаговое руководство. Создание базовой веб-страницы в Visual Web Developer создана однофайловая страница, сравните с ней работу текущей страницы.)

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

В этом пошаговом руководстве показан порядок создания и изменения веб-страницы с разделением кода. С точки зрения создания и выполнения страницы между моделями с одним файлом и разделением кода не существует значительных различий.

Также можно изучить другие функции, в том числе:

См. также

Задачи

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

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

Типы веб-узлов в Visual Web Developer