Главные страницы

От Майкрософт

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Установка контент-контроля по умолчанию на содержимое мастер-страниц

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

Подключение главной страницы и страниц контента

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

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

Атрибут MasterPageFile

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

Настройка Page.MasterPageFile в коде

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

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

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

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

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

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

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

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

Вложенные мастер-страницы

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

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

<%@ 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 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>

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

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

Откройте видео на весь экран

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