Пошаговое руководство. Создание и использование главных страниц ASP.NET в Visual Web Developer
Обновлен: Ноябрь 2007
В этом пошаговом руководстве описывается создание главной страницы и нескольких страниц содержимого. Главные страницы позволяют создавать разметку страницы — страницу шаблона — и затем создавать отдельные страницы, содержимое которых можно объединять с главной страницей во время выполнения. Дополнительные сведения о главных страницах см. в разделе Общие сведения о главных страницах ASP.NET.
В этом пошаговом руководстве рассматриваются следующие задачи:
Создание главной страницы.
Создание страницы ASP.NET с содержимым, которое требуется отобразить на главной странице.
Запуск главных страниц для отображения разного содержимого.
Выбор главной страницы во время выполнения.
Обязательные компоненты
Для выполнения этого пошагового руководства потребуются следующие компоненты:
Visual Studio или Microsoft Visual Web Developer, экспресс-выпуск.
Дополнительно, jpg, gif или другой графический файл, который можно использовать в качестве эмблемы на главной странице. Рекомендуется, чтобы эмблема составляла не более 48 точек в высоту. Однако отображение эмблемы является необязательным и точный размер рисунка не является критичным в этом пошаговом руководстве.
Создание веб-узла
Если веб-узел уже создан в Visual Web Developer (например, в результате выполнения шагов в разделе Пошаговое руководство. Создание базовой веб-страницы в Visual Web Developer), можно использовать этот веб-узел и перейти к следующему разделу Создание главной страницы. В противном случае создайте новый веб-узел и страницу, выполнив следующие шаги.
Создание веб-узла на базе файловой системы
Откройте Visual Web Developer.
В меню Файл выберите Создать веб-узел.
Откроется диалоговое окно Создать веб-узел.
В разделе Установленные шаблоны Visual Studio выберите Веб-узел ASP.NET.
В поле Расположение введите имя папки, где следует хранить страницы веб-узла.
Например, введите имя папки C:\WebSites.
В списке Язык выберите предпочтительный язык программирования.
Нажмите кнопку ОК.
Visual Web Developer создаст папку и новую страницу с именем Default.aspx.
Создание главной страницы
Главная страница является шаблоном внешнего вида страниц. В этом разделе сначала создайте главную страницу. Затем используйте таблицу для размещения главной страницы с меню, эмблемой и нижним колонтитулом, которые будут отображаться на каждой странице веб-узла. Также используйте прототип содержимого, который является областью на главной странице, которую можно заменить сведениями из содержимого страницы.
Создание главной страницы
В Обозревателе решений щелкните правой кнопкой мыши имя веб-узла и выберите команду Добавить новый элемент.
В группе Установленные шаблоны Visual Studio выберите Главная страница.
В поле Имя введите Master1.
Установите флажок Размещать код в отдельном файле.
Примечание. В этом пошаговом руководстве предполагается, что для всех страниц используются файлы с выделенным кодом. Если используется однофайловая страница ASP.NET, то код, показанный в этом пошаговом руководстве, будет работать, но будет отображаться в представлении Исходный код, а не в отдельном файле кода.
В списке Язык выберите предпочтительный язык программирования и затем — Добавить.
Новая главная страница откроется в представлении Исходный код.
В верхней части этой страницы находится объявление @ Master вместо объявления @ Page, которое обычно находится в верхней части страниц ASP.NET. Основная область страницы содержит элемент управления ContentPlaceHolder, который является областью главной страницы, содержимое которой будет объединено с содержимым страниц во время выполнения. Более подробно работа с прототипом содержимого будет рассмотрена далее в этом руководстве.
Создание макета главной страницы
Главная страница определяет внешний вид страниц веб-узла. Она может содержать любое сочетание статического текста и элементов управления. Главная страница также содержит один или несколько прототипов содержимого, которые определяют, где будет отображаться динамическое содержимое при открытии страницы.
В этом пошаговом руководстве используйте таблицу для помощи в размещении элементов на странице. Начините с создания макетной таблицы для размещения элементов главной страницы. Далее в этом разделе будет размещен элемент управления прототипа содержимого, который уже существует на этой странице.
Создание макетной таблицы для главной страницы
В представлении Исходный код выберите файл Master1.master и задайте Microsoft Internet Explorer 6.0 как целевую схему проверки. Чтобы задать это значение, можно использовать раскрывающийся список в панели инструментов или выбрать Параметры в меню Сервис, а затем выбрать пункт Проверка.
Переключитесь в представление Конструктор.
В раскрывающемся списке в верхней части окна Свойства выберите DOCUMENT, а затем для параметра BgColor задайте цвет, например синий.
Выбор цвета не имеет значения. Далее в этом пошаговом руководстве будет создана вторая главная страница без использования цвета для сравнения с параметрами, выбранными в этом разделе.
Щелкните область страницы, где нужно разместить макетную таблицу.
Примечание. Не помещайте макетную таблицу внутри элемента управления ContentPlaceHolder.
В меню Таблица выберите команду Вставить таблицу.
В диалоговом окне Вставка таблицы создайте таблицу с тремя строками и одним столбцом и затем нажмите кнопку ОК.
Поместите курсор внутри второй строки таблицы.
В меню Таблица в подменю Изменить выберите Разбить ячейки.
В диалоговом окне Разбить ячейки выберите Разбить на столбцы и затем нажмите кнопку OK.
Сделайте следующие настройки:
В средней строке щелкните левый столбец и затем в окне Свойства установите для параметра Ширина значение 48.
Щелкните верхнюю строку и затем в окне Свойства установите для параметра Высота значение 48.
Щелкните нижнюю строку и затем в окне Свойства установите для параметра Высота значение 48.
Примечание. Ширину и высоту можно установить, перетаскивая границы ячейки таблицы или выбрав ячейку и установив значения в окне Свойства.
Выберите все ячейки в таблице и задайте для параметра BgColor цвет, отличный от цвета фона.
После разметки таблицы можно добавить содержимое на главную страницу, которое будет отображаться на всех страницах. В качестве колонтитула можно добавить сообщение об авторских правах и затем добавить меню. Можно также добавить изображение эмблемы, если имеется.
Добавление статического содержимого на главную страницу
Щелкните нижнюю ячейку и затем ведите текст нижнего колонтитула, например, © 2007 Contoso Inc.
В Панели элементов перетащите из группы Переходы элемент управления Menu в верхнюю ячейку.
Создайте меню с помощью следующих шагов:
Присвойте свойству Orientation элемента управления Menu значение Horizontal.
Щелкните смарт-тег в элементе управления Menu и выберите Редактировать элементы меню в диалоговом окне Задачи меню.
В группе Элементы дважды щелкните значок Добавить корневой узел, чтобы добавить два элемента меню:
Щелкните первый узел и установите для параметра Text значение Home, а для параметра href — значение Home.aspx.
Щелкните второй узел и установите для параметра Text значение About, а для параметра href — значение About.aspx.
Нажмите кнопку ОК, чтобы закрыть диалоговое окно Редактор элементов меню.
Если имеется файл изображения, которое можно использовать как эмблему, выполните следующие шаги, чтобы поместить его на главную страницу:
В обозревателе решений щелкните правой кнопкой мыши имя веб-узла и выберите команду Добавить существующий элемент.
Перейдите к файлу изображения, выберите его и затем щелкните Добавить.
В Панели элементов перетащите из группы Стандартные элемент управления Image в средний левый столбец таблицы.
Задайте для свойства ImageUrl элемента управления Image имя файла изображения.
Теперь можно поместить прототип содержимого, чтобы указать место, в котором на главной странице будет оборжаться содержимое во время выполнения.
Добавление прототипа содержимого
Перетащите элемент управления ContentPlaceHolder в среднюю правую ячейку.
Свойством ID элемента управления является ContentPlaceholder1. Можно оставить это имя или изменить его. Запомните новое имя, так как оно потребуется позже.
Сохраните страницу.
Создание содержимого главной страницы
Главная страница предоставляет шаблон для содержимого. Содержимое для главной страницы определяется путем создания страницы ASP.NET, которая связана с главной страницей. Страница содержимого является специализированной формой ASP.NET, которая содержит только содержимое, которое должно быть объединено с главной страницей. Добавьте на страницу содержимого текст и элементы управления, которые требуется отобразить, когда пользователи запрашивают эту страницу.
В этом пошаговом руководстве будут созданы две страницы с содержимым для главной страницы. Первой страницей является "home", второй — "about".
Создание страницы Home
В обозревателе решений щелкните правой кнопкой мыши имя веб-узла и выберите команду Добавить новый элемент.
В группе Установленные шаблоны Visual Studio выберите Форма Web Forms.
В поле Имя введите Home.
В списке Язык выберите предпочтительный язык программирования.
Установите флажок Выбрать главную страницу и нажмите кнопку Добавить.
Откроется диалоговое окно Выбор главной страницы.
Щелкните Master1.master и нажмите кнопку ОК.
Буде создан файл aspx. Страница содержит директиву @ Page, которая подключает текущую страницу к выбранной главной странице с помощью атрибута MasterPageFile, как показано в следующем примере кода.
[Visual Basic]
<%@ Page Language="VB" MasterPageFile="~/Master1.master" ... %>
[C#]
<%@ Page Language="C#" MasterPageFile="~/Master1.master" ... %>
Страница также содержит элемент управления Content, с которым далее будет работать пользователь.
Страница содержимого не имеет обычных элементов, формирующих страницу ASP.NET, таких как html, body или form. Вместо этого добавляется только то содержимое, которое должно отображаться на главной странице в созданных областях прототипа содержимого.
Добавление содержимого к странице Home
Переключитесь в представление Конструктор.
Элементы управления ContentPlaceHolder на главной странице отображаются как элементы управления Content на новой странице содержимого. Остальное содержимое главной страницы отображается таким образом, чтобы можно было видеть разметку. Однако она отображается в недоступном режиме, поэтому ее нельзя изменить во время изменения страницы содержимого.
В раскрывающемся списке в окне Свойства щелкните DOCUMENT и установите для параметра Заголовок значение Главная страница Contoso.
Заголовок можно установить для каждой страницы независимо, чтобы правильный заголовок отображался в обозревателе при объединении содержимого с главной страницей. Сведения о заголовке хранятся в директиве @ Page страницы содержимого.
В элементе управления Content, который соответствует объекту ContentPlaceHolder1 на главной странице, введите Добро пожаловать на сайт Contoso.
Выберите текст и затем отформатируйте его как заголовок, выбрав Heading 1 в раскрывающемся списке Формат блока над Панелью элементов.
Нажмите клавишу ВВОД, чтобы создать новую пустую строку в элементе управления Content, и затем введите Благодарим за визит на наш сайт.
Тест неважен, можно вести любой текст, который поможет распознать эту страницу как главную.
Сохраните страницу.
Страницу About можно создать таким же методом, как страницу Home.
Создание страницы About
Используйте те же шаги, что и для страницы Home, для добавления новой страницы содержимого с именем About.aspx.
Убедитесь, что новая страница присоединена к странице Master1.master, как это было сделано со страницей Home.
Измените заголовок страницы на Страница о Contoso.
В области содержимого введите О Contoso и затем отформатируйте текст как Heading 1, выбрав текст и значение Heading 1 в раскрывающемся списке Формат блока над Панелью элементов.
Нажмите клавишу ВВОД, чтобы создать новую строку, и затем введите Начиная с 1982 Contoso предоставляет программные продукты высокого качества.
Сохраните страницу.
Тестирование страниц
Можно протестировать страницы, запустив их как любую страницу ASP.NET.
Тестирование страниц
Перейдите на страницу Home.aspx и нажмите сочетание клавиш CTRL+F5.
ASP.NET объединяет содержимое страницы Home.aspx с макетом страницы Master1.master в одну страницу и отображает итоговую страницу в обозревателе. Обратите внимание, что URL-адресом страницы является Home.aspx; ссылка на главную страницу в обозревателе отсутствует.
Щелкните ссылку About.
Откроется страница About.aspx. Она также объединена со страницей Master1.master.
Создание ссылок на члены главной страницы.
Код на страницах содержимого может содержать ссылки на члены на главной страницы, включая любые открытые свойства и методы и любые элементы управления. В этой части пошагового руководства будет создано свойство на главной странице и затем будет использоваться значение свойства на страницах содержимого. Исходным условием является то, что имя компании для веб-узла сохранено как свойство на главной странице, и любая ссылка на имя компании на страницах содержимого основана на свойстве главной страницы.
Первым шагом является добавление свойства к главной странице.
Добавление свойства к главной странице
Перейдите к странице Master1.master или откройте ее.
В обозревателе решений щелкните правой кнопкой Master1.master и выберите команду Просмотреть код, чтобы открыть редактор кода.
Примечание. По умолчанию Visual Web Developer создает страницы, использующие модель фонового кода. Если требуется, можно создать код с помощью однофайловой модели. Дополнительные сведения см. в разделе Модель кода веб-страниц ASP.NET.
В определении класса введите следующий код:
Public Property CompanyName() As String Get Return CType(ViewState("companyName"), String) End Get Set(ByVal Value As String) ViewState("companyName") = Value End Set End Property
public String CompanyName { get { return (String) ViewState["companyName"]; } set { ViewState["companyName"] = value; } }
Код создаст свойство с именем CompanyName для главной страницы. Значение сохраняется в состоянии представления, чтобы его можно было использовать между обратными отправками.
Внутри определения класса (но не внутри кода свойства) добавьте следующий код.
Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) _ Handles Me.Init Me.CompanyName = "Contoso" End Sub
void Page_Init(Object sender, EventArgs e) { this.CompanyName = "Contoso"; }
Для этого примера будет использоваться жестко заданное значение свойства CompanyName на странице.
Теперь можно изменит страницу содержимого для использования свойства CompanyName главной страницы.
Создание ссылки на свойство CompanyName на странице содержимого
Перейдите на страницу Home.aspx или откройте ее.
Перейдите в представление Исходный код.
В верхней части страницы под директивой @ Page добавьте следующую директиву @ MasterType:
<%@ MasterType virtualpath="~/Master1.master" %>
Директива привязывает свойство Master страницы содержимого, которое будет скоро использоваться, к странице Master1.master.
Переключитесь в представление Конструктор.
В элементе управления Content измените текст на Добро пожаловать на сайт .
В Панели элементов перетащите из группы Стандартные элемент управления Label в элемент управления Content и поместите его после статического текста:
Добро пожаловать на сайт [эмблема]
Присвойте свойству ID элемента управления Label значение CompanyName.
В обозревателе решений щелкните правой кнопкой мыши Home.aspx и выберите пункт Просмотреть код, чтобы открыть редактор кода.
Добавьте в определение класса следующий код:
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) _ Handles Me.Load CompanyName.Text = Master.CompanyName End Sub
void Page_Load(Object sender, EventArgs e) { CompanyName.Text = Master.CompanyName; }
Свойство Master содержимого страницы возвращает ссылку на главную страницу, как определено в директиве @ MasterType, добавленной на шаге 3.
Теперь можно протестировать страницу содержимого, чтобы убедиться, что ссылка на свойство CompanyName главной страницы правильная.
Тестирование ссылки на свойство главной страницы
Перейдите на страницу Home.aspx или откройте ее и нажмите сочетание клавиш CTRL+F5.
Страница откроется в обозревателе с текстом Добро пожаловать на сайт Contoso
Закройте обозреватель.
Перейдите на страницу фонового кода Master1.master или откройте ее.
Измените обработчик Page_Init, чтобы назначить другое имя компании свойству, как в следующем примере кода.
Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) _ Handles Me.Init Me.CompanyName = "New Company Name" End Sub
void Page_Init(Object sender, EventArgs e) { this.CompanyName = "New Company Name"; }
Перейдите на страницу Home.aspx и затем нажмите клавиши CTRL+F5 для ее повторного запуска.
Теперь обновленное имя компании отобразится на странице.
Динамическое изменение главных страниц
В некоторых случаях, возможно, понадобится изменять главные страницы динамически, то есть использовать код для задания главной страницы странице содержимого. Например, нужно разрешить пользователям выбирать из нескольких макетов и устанавливать главную страницу соответственно их предпочтениям.
В этой части пошагового руководства будет добавлена вторая главная страница к веб-узлу и затем созданы кнопки, которые позволят пользователям переключаться между первой и второй главными страницами. Поскольку две главные страницы будут очень похожи, скопируйте первую главную страницу и измените ее, чтобы она действовала как вторая главная страница.
Создание копии главной страницы
В обозревателе решений щелкните правой кнопкой мыши Master1.master и выберите команду Копировать.
Щелкните правой кнопкой имя веб-узла и затем выберите Вставить.
Главная страница будет добавлена к веб-узлу с именем Копия master1.master.
Щелкните правой кнопкой имя Копия master1.master, выберите Переименовать и затем задайте имя новой главной страницы Master2.master.
Откройте Master2.master и измените в директиве @ Master атрибут Master1 на Master2.
Законченная директива страницы будет похожа на приведенную в следующем примере кода.
<%@ Master Language="VB" CodeFile="Master2.master.vb" Inherits="Master2" %>
<%@ Master Language="C#" CodeFile="Master2.master.cs" Inherits="Master2" %>
Переключитесь в представление Конструктор.
В окне Свойства в верхней части раскрывающегося списка выберите DOCUMENT.
Очистите свойство BgColor.
Новая главная страница будет выглядеть и функционировать, как Master1.master, но без фонового цвета.
Откройте файл кода для Master2.master и измените имя класса в файле с выделенным кодом главной страницы с Master1 на Master2 для соответствия значению атрибута Inherits в директиве @ Master главной страницы.
Код будет похож на приведенный ниже.
Partial Class Master2
public partial class Master2 : System.Web.UI.MasterPage
Следующим шагом будет добавление кнопки на каждую главную страницу, которая позволит пользователям выбирать альтернативную главную страницу.
Добавление кнопок для выбора альтернативной главной страницы
Перейдите на страницу Master2.master или откройте ее.
В Панели элементов перетащите из узла Стандартный элемент управления LinkButton на страницу и поместите его под меню в верхней части ячейки таблицы.
Задайте для свойства Text кнопки значение Colorful.
Дважды нажмите кнопку, чтобы создать обработчик события Click, а затем добавьте следующий выделенный код:
Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As EventArgs)_ Handles LinkButton1.Click Session("masterpage") = "Master1.master" Response.Redirect(Request.Url.ToString()) End Sub
[C#]
void LinkButton1_Click(Object sender, EventArgs e) { Session["masterpage"] = "Master1.master"; Response.Redirect(Request.Url.ToString()); }
Код загрузит имя файла альтернативной главной страницы в постоянную переменную сеанса и затем перезагрузит текущую страницу. (Свойство Url возвращает объект Uri, который ссылается на текущую страницу.) Вскоре будет создан код на странице содержимого, имеющей то же имя, что и главная страница.
Перейдите на страницу Master1.master или откройте ее в представлении Конструктор.
Добавьте элемент управления LinkButton, как на шаге 1 и 2, и задайте для его свойства Text значение Plain.
Дважды нажмите кнопку Plain, чтобы создать обработчик события Click, а затем добавьте следующий выделенный код:
Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As EventArgs)_ Handles LinkButton1.Click Session("masterpage") = "Master2.master" Response.Redirect(Request.Url.ToString()) End Sub
void LinkButton1_Click(Object sender, EventArgs e) { Session["masterpage"] = "Master2.master"; Response.Redirect(Request.Url.ToString()); }
Это такой же код, как для кнопки на странице Master2.master, за исключением того, что он загружает альтернативную главную страницу.
Теперь напишите код на странице содержимого, которая динамически загрузит главную страницу, выбранную пользователем.
Написание кода для динамического выбора главной страницы
Перейдите к странице About.aspx или откройте ее.
Примечание. Уже созданная страница Home содержит директиву @ MasterType, которая фактически привязывает ее к одной главной странице (Master1.master). Поэтому невозможно динамически назначать главные страницы странице Home и работать с другими созданными страницами вместо нее.
В обозревателе решений щелкните правой кнопкой мыши файл About.aspx и выберите команду Просмотреть код, чтобы открыть редактор кода.
Добавьте в определение класса следующий код:
Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) _ Handles Me.PreInit If Not Session("masterpage") Is Nothing Then Me.MasterPageFile = CType(Session("masterpage"), String) End If End Sub
void Page_PreInit(Object sender, EventArgs e) { if(Session["masterpage"] != null) { this.MasterPageFile = (String) Session["masterpage"]; } }
Код задает значение свойства MasterPageFile текущей страницы значению в переменной сеанса, если имеет место. Этот код должен выполняться в обработчике Page_PreInit; он не может выполняться в обработчике, который запускается несколько позже, чем обработчик Page_PreInit (например, в обработчике Page_Init), потому что главная страница должна быть установлена так, чтобы страница могла создать ее экземпляр до любой следующей инициализации.
Теперь можно протестировать динамические главные страницы.
Тестирование динамических главных страниц
На странице About.aspx нажмите клавиши CTRL+F5, чтобы запустить страницу.
Страница откроется в обозревателе, объединенная с главной страницей по умолчанию Master1.master.
Щелкните ссылку Plain.
Страница будет отображена повторно, теперь объединенная со страницей Master2.master, которая не содержит фоновый цвет.
Щелкните ссылку Colorful.
Страница снова отобразится с использованием Master1.master.
Замечания по использованию главных страниц
Существует несколько проблем, о которых нужно знать при работе с главной страницей.
В реальном приложении такие сведения, как имя компании, вероятно, будут сохраняться в файле конфигурации и считываться напрямую на страницах содержимого. Однако представленный здесь сценарий является простой иллюстрацией того, как создавать ссылку на члены главной страницы на страницах содержимого.
К членам на главной странице можно обратиться даже без включения директивы @ MasterType. Однако для этого необходимо привести свойство Page.Master к соответствующему типу главной страницы (свойство Master имеет значение null, если страница не содержит главной страницы). Дополнительные сведения см. в разделе Работа с главными страницами ASP.NET программными средствами.
На элементы управления можно ссылаться на главной странице с помощью метода Master.FindControls. Дополнительные сведения см. в разделе Работа с главными страницами ASP.NET программными средствами.
Существует несколько проблем, о которых следует знать при работе с динамическими главными страницами:
Сценарий изменения главных страниц упрощен, чтобы в пошаговом руководстве уделить внимание главным страницам. В реальном приложении, скорее всего, больше потребуется отобразить выбор макетов и затем сохранение предпочтений пользователя с помощью профилей. Дополнительные сведения см. в разделе Общие сведения о свойствах профилей ASP.NET.
Можно сконфигурировать веб-узел таким образом, чтобы все страницы использовали одну и ту же главную страницу. Можно было бы иметь несколько страниц, которые могли бы использовать альтернативную главную страницу, которую можно настроить в коде таким же образом, как показано в этом разделе пошагового руководства. Подробные сведения см. в главе "Определение области главных страниц" в разделе Общие сведения о главных страницах ASP.NET.
Необходимо добавить код со страницы Home.aspx на каждую страницу, где нужно переопределить главную страницу по умолчанию.
Следующие действия
В этом пошаговом руководстве показаны базовые функциональные возможности главных страниц. Возможно потребуется поэкспериментировать с их дополнительными возможностями. Ниже перечислены некоторые возможности.
Создание главных страниц, имеющих несколько прототипов содержимого. Затем можно заполнить один или несколько прототипов содержимым каждой отображаемой страницы.
Определение прототипов содержимого с помощью содержимого по умолчанию. Если страница ASP.NET не поддерживает содержимое прототипа, главная страница отображает содержимое по умолчанию.
Программный доступ к членам главных страниц со страниц содержимого. Это позволяет динамически изменять внешний вид главной страницы во время выполнения. Дополнительные сведения см. в разделе Практическое руководство. Ссылка на содержимое главной страницы ASP.NET.
Используйте фильтрацию для устройств с помощью главных страниц, чтобы создавать различные макеты для разных устройств, например, один макет для обозревателя и другой — для отдельного типа телефона. Дополнительные сведения см. в разделе Общие сведения о фильтрации устройств в ASP.NET.
Узнайте, как можно поместить главные страницы внутри главных страниц, чтобы создавать компонентные части. Дополнительные сведения см. в разделе Вложенные главные страницы ASP.NET.
См. также
Основные понятия
Общие сведения о главных страницах ASP.NET
События на главных страницах и страницах содержимого ASP.NET