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

Visual Studio 2010

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

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

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

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

  • Создание страницы ASP.NET с разделением кода.

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

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

  • Выполнение страниц на Visual Studio Development Server.

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

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

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

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

  1. Откройте Visual Studio или Visual Web Developer Express.

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

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

  3. В разделе Установленные шаблоны щелкните Visual Basic или VisualC#, затем выберите Веб-сайт ASP.NET.

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

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

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

    Visual Studio создает проект веб-сайта, включающий стандартные функциональные возможности для макета (главную страницу, страницы содержимого Default.aspx и About.aspx и каскадную таблицу стилей), технологии Ajax (файлы клиентских скриптов) и проверки подлинности (членства ASP.NET).

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

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

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

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

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

  3. В разделе Установленные шаблоны щелкните Visual Basic или VisualC# и выберите в списке Веб-форма.

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

  5. Установите флажок Поместить код в отдельный файл.

  6. Убедитесь, что флажок Выбрать главную страницу не установлен.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Страница запускается с помощью сервера Visual Studio Development Server.

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

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

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

  4. Закройте браузер.

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

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

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

Показ: