Эталонные страницы

от Корпорации Майкрософт

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

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

в ASP.NET 2.0 представлены главные страницы как способ поддержания единообразного внешнего вида, и, как вы скоро увидите, главные страницы представляют собой значительное улучшение по сравнению с методом пользовательского управления.

Зачем нужны главные страницы?

Возможно, вам интересно, зачем нужны master страницы в ASP.NET 2.0. В конце концов, разработчики веб-сайтов уже используют пользовательские элементы управления в ASP.NET 1.x для совместного использования областей содержимого между страницами. На самом деле существует несколько причин, по которым пользовательские элементы управления являются менее оптимальным решением для создания общего макета.

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

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

Обе эти проблемы (и многие другие) хорошо решаются на master страницах в ASP.NET 2.0.

Как работают главные страницы

Страница master аналогична шаблону для других страниц. Элементы страницы, которые должны быть общими для других страниц (например, меню, границы и т. д.), добавляются на страницу master. При добавлении новых страниц на сайт их можно связать с master страницей. Страница, связанная со страницей master, называется страницей содержимого. По умолчанию страница содержимого принимает вид со страницы master. Однако при создании master страницы можно определить части страницы, которые страница содержимого может заменить собственным содержимым. Эти части определяются с помощью нового элемента управления, представленного в ASP.NET 2.0; Элемент управления ContentPlaceHolder .

Страница master может содержать любое количество элементов управления ContentPlaceHolder (или вообще ни одно из них). На странице содержимого содержимое содержимое из элементов управления ContentPlaceHolder отображается внутри элемента управления Контентом, еще одного нового элемента управления в ASP.NET 2.0. По умолчанию элементы управления контентом страницы содержимого пусты, поэтому вы можете предоставить собственное содержимое. Если вы хотите использовать содержимое со страницы master в элементах управления Контент, это можно сделать, как показано далее в этом модуле. Элемент управления Контентом сопоставляется с элементом управления ContentPlaceHolder с помощью атрибута ContentPlaceHolderID элемента управления Контент. Приведенный ниже код сопоставляет элемент управления Содержимое с элементом управления ContentPlaceHolder с именем mainBody на странице master.

<asp:Content ID="Content1" ContentPlaceHolderID="mainBody" Runat="Server">

Примечание

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

На рисунке 1 показана страница master и связанная страница содержимого в Visual Studio 2005. Элемент управления ContentPlaceHolder можно увидеть на странице master и соответствующий элемент управления Контент на странице содержимого. Обратите внимание, что содержимое страниц master, которое находится за пределами ContentPlaceHolder, отображается, но неактивно на странице содержимого. Только содержимое в ContentPlaceHolder может быть заменено страницей содержимого. Все остальное содержимое страницы master неизменяемо.

Рис. 1. Страница master и связанная с ней страница содержимого

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

Чтобы создать новую страницу master, выполните следующие действия.

1. Откройте Visual Studio 2005 и создайте веб-сайт.
2. Щелкните Файл, Создать, Файл.
3. Выберите Главный файл в диалоговом окне Добавление нового элемента, как показано на рисунке 2.
4. Нажмите кнопку "Добавить".

Рис. 2. Создание новой эталонной страницы

Обратите внимание, что расширение файла для страницы master — .master. Это один из способов, которыми страница master отличается от обычной страницы. Другое основное отличие заключается в том, что вместо @Page директивы страница master содержит директиву @Master . Перейдите в представление исходного кода для только что созданной страницы master и просмотрите код.

На новой странице master по умолчанию будет один элемент управления ContentPlaceHolder. В большинстве случаев имеет смысл сначала создать общие элементы страницы, а затем вставить элементы управления ContentPlaceHolder там, где требуется пользовательское содержимое. В таких случаях разработчикам потребуется удалить элемент управления ContentPlaceHolder по умолчанию и вставить новые элементы управления по мере разработки страницы. Элементы управления ContentPlaceHolder не изменяются, несмотря на то, что они отображают маркеры изменения размера. Размер элемента управления ContentPlaceHolder автоматически зависит от содержимого, содержащегося в нем с одним исключением; Если поместить элемент управления ContentPlaceHolder внутри блочного элемента, например ячейки таблицы, размер элемента будет соответствовать размеру элемента.

Лабораторная работа 1 с эталонными страницами

В этом задании вы создадите новую страницу master и определите три элемента управления ContentPlaceHolder. Затем вы создадите новую страницу Содержимое и замените содержимое по крайней мере из одного из элементов управления ContentPlaceHolder.

1. Создайте страницу master и вставьте элементы управления ContentPlaceHolder.

   1. Создайте новую страницу master, как описано выше.
   2. Удалите элемент управления ContentPlaceHolder по умолчанию.
   3. Выберите элемент управления ContentPlaceHolder, щелкнув затененую верхнюю границу элемента управления, а затем удалите его, нажав клавишу DEL на клавиатуре.
   4. Вставьте новую таблицу с помощью шаблона Заголовка и боковой стороны , как показано на рисунке 3. Измените ширину и высоту на 90 %, чтобы вся таблица была видна в конструкторе.

Рис. 3

1. Поместите курсор в каждую ячейку таблицы и установите для свойства valignзначение top.
2. На панели элементов вставьте элемент управления ContentPlaceHolder в верхнюю ячейку таблицы (ячейку заголовка).
3. При вставке этого элемента управления ContentPlaceHolder вы заметите, что высота строки займет почти всю страницу, как показано на рисунке 4. Не беспокойтесь об этом на данный момент.

Рис. 4. Пустое пространство находится в той же ячейке, что и ContentPlaceHolder

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

Рис. 5. Мастер со всеми элементами управления ContentPlaceHolder. Обратите внимание, что высота ячейки заголовка теперь соответствует ее значению.

1. Введите текст по своему выбору в каждый из трех элементов управления ContentPlaceHolder.
2. Сохраните страницу master как exercise1.master.
3. Создайте новую веб-форму и свяжите ее с упражнением1. страница master master.
4. Выберите Файл, Создать, Файл в Visual Studio 2005.
5. Выберите Веб-форма в диалоговом окне Добавление нового элемента.
6. Убедитесь, что установлен флажок Выбрать страницу master, как показано на рисунке 6.

Рис. 6. Добавление новой страницы содержимого

1. Нажмите кнопку "Добавить".
2. Выберите упражнение1. master в диалоговом окне Выбор страницы master, как показано на рисунке 7.
3. Нажмите кнопку ОК, чтобы добавить новую страницу содержимого.

Новая страница содержимого появится в Visual Studio с одним элементом управления Контентом для каждого элемента управления ContentPlaceHolder на странице master. По умолчанию элементы управления Контент пусты, поэтому вы можете добавить собственное содержимое. Если вы хотите, чтобы они использовали содержимое из элемента управления ContentPlaceHolder на странице master, просто щелкните символ смарт-тега (маленькая черная стрелка в правом верхнем углу элемента управления) и выберите по умолчанию значение Содержимое образцов из смарт-тега, как показано на рисунке 8. При этом пункт меню изменится на Create Custom Content (Создать пользовательское содержимое). Щелкнув его на этом этапе, содержимое удаляется со страницы master, что позволяет определить пользовательское содержимое для этого элемента управления контентом.

Рис. 7. Установка по умолчанию для элемента управления содержимым главных страниц

Соединение главной страницы и страниц содержимого

Связь между страницей master и страницей содержимого можно настроить одним из четырех способов:

• Атрибут MasterPageFile директивы @Page
• Задание свойства Page.MasterPageFile в коде.
• Элемент <pages> в файле конфигурации приложений (web.config в корневой папке приложения).
• Элемент <pages> в файле конфигурации вложенных папок (web.config во вложенной папке)

Атрибут MasterPageFile

Атрибут MasterPageFile упрощает применение страницы master к определенной странице ASP.NET. Он также используется для применения master страницы при проверка флажка Выбрать эталонную страницу, как это было в упражнении 1.

Задание Page.MasterPageFile в коде

Задав свойство MasterPageFile в коде, можно применить определенную страницу master к содержимому во время выполнения. Это полезно в тех случаях, когда может потребоваться применить определенную master страницу на основе роли пользователя или других критериев. Свойство MasterPageFile должно быть задано в методе PreInit. Если он задан после метода PreInit, будет выдано исключение InvalidOperationException. Страница, на которой задается это свойство, также должна иметь элемент управления Содержимое в качестве элемента управления верхнего уровня для страницы. В противном случае при установке свойства MasterPageFile будет создано исключение HttpException.

<Использование элемента pages>

Вы можете настроить master страницы для своих страниц, задав атрибут masterPageFile в элементе <pages> файла web.config. При использовании этого метода имейте в виду, что web.config файлы ниже в структуре приложения могут переопределить этот параметр. Любой атрибут MasterPageFile, заданный в директиве @Page , также переопределяет этот параметр. <Использование элемента pages> упрощает создание master master страницы, которую при необходимости можно переопределить в определенных папках или файлах.

Свойства на главных страницах

Страница master может предоставлять свойства, просто делая эти свойства общедоступными на странице master. Например, следующий код определяет свойство с именем SomeProperty:

private string _SomeProperty; public string SomeProperty { get { return _SomeProperty; } set { _SomeProperty = value; } }

Чтобы получить доступ к свойству SomeProperty со страницы Содержимое, необходимо использовать свойство Master следующим образом:

void Page_Load() { Master.SomeProperty = "Master Page Property"; }

Вложенные главные страницы

Эталонные страницы — это идеальное решение для обеспечения общего внешнего вида в большом веб-приложении. Однако нередки случаи, когда некоторые части большого сайта имеют общий интерфейс, в то время как другие части используют другой интерфейс. Для решения этой проблемы идеально подходит несколько master страниц. Однако это по-прежнему не относится к тому факту, что в большом приложении могут быть определенные компоненты (например, меню), которые являются общими для всех страниц и других компонентов, которые используются только в определенных разделах сайта. Для такого типа ситуации вложенные master страницы хорошо заполняют потребность. Как вы уже видели, обычная страница master состоит из страницы master и страницы содержимого. Во вложенной master странице имеется две master страницы: родительская master и дочерняя master. Дочерняя страница master также является страницей содержимого, а ее master является родительской страницей master.

Ниже приведен код для типичной страницы master:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="parent.master.cs" Inherits="parent" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Typical Master Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:contentplaceholder id="MainMenuContent" runat="server" /> </div> </form> </body> </html>

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

<%@ Master Language="C#" MasterPageFile="~/parent.master" AutoEventWireup="true" CodeFile="child.master.cs" Inherits="child" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainMenuContent" Runat="Server"> <span>From the Child Master.</span> <asp:contentplaceholder id="ChildPlaceHolder1" runat="server" /> </asp:Content>

Обратите внимание, что в этом сценарии дочерний master также является страницей содержимого для родительского master. Все содержимое дочернего master отображается внутри элемента управления Контент, который получает свое содержимое из родительского элемента управления ContentPlaceHolder.

Примечание

Designer поддержка для вложенных страниц master недоступна. При разработке с использованием вложенных образцов необходимо использовать исходное представление.

В этом видео показано пошаговое руководство по использованию вложенных master страниц.

Открыть видео Full-Screen

Рис. 8. Выбор главной страницы