Основы Master Pages
С помощью шаблонов страниц вы определяете некоторое общее содержание и помещаете его в страницу с расширением .master. Естественно, таких страниц в приложении может быть несколько. Этот шаблон могут использовать любое количество дочерних страниц, которые, как и обычные страницы, имеют расширение aspx.
Начиная с этой лекции, будем разбирать проект, который Visual Studio 2005 создает по шаблону Personal Web Site Starter Kit. В нем показаны шаблоны страниц, темы и персонализация, навигация. Элементы управления навигации сосредоточены на странице шаблона Default.master. И это естественное решение, так как навигация нужна везде.
В страницу шаблона также включают общие заголовки и нижние колонтитулы.
Это единственный тип страниц, где возможно разместить специальные элементы управления ContentPlaceHolder. Они определяют место, в которое дочерние страницы данного мастера могут помещать свое собственное содержание. Когда ASP .NET получает запрос отобразить дочернюю страницу, она сливает ее код с кодом главной страницы, в результате генерируется HTML, в котором не видно никаких "швов".
Когда дочерняя страница редактируется в среде разработки, на вкладке Design видна полная страница вместе с элементами из шаблона, но они показаны серым цветом. Их редактировать нельзя. Можно редактировать то, что находится в элементах Content.
В диалоге Add New Item выберите тип страницы Master Page. Как и обычные страницы, их можно создавать с отделенным кодом или кодом, встроенным в страницу.
Это никак не влияет на модель разделения кода дочерних страниц. Кроме того, главная и дочерняя страницы могут разрабатываться на разных языках.
Чтобы получить четкое разделение страницы на логические части, используют таблицы. Построим таблицу с тремя строками, где в верхней строке находится заголовок всех страниц, а во второй — произвольное содержание; она состоит из двух ячеек, в каждой из которых по одному ContentPlaceHolder. В нижнем ряду располагается правовая информация. Таблица создается очень легко из меню Layout-Insert Table. Создайте таблицу 2 на 3. После этого объедините ячейки верхней и нижней строк, а в среднюю вставьте ContentPlaceHolder. Создайте содержание заголовка и подвала. Должна получиться подобная страница:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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>Привет!</title> </head> <body> <form id="form1" runat="server"> <div> <table> <tr bgcolor="#6699cc"> <td colspan="2" style="vertical-align: middle; color: white; text-align: center;">Школа программирования ASP.NET 2.0 </td> </tr> <tr> <td style="width: 100px" valign="top"> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder> </td> <td style="width: 100px" valign="top"> <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"> </asp:ContentPlaceHolder> </td> </tr> <tr> <td colspan="2"> <span style="font-size: 8pt">Copyright © 2006 - Школа ASP.NET 2.0</span></td> </tr> </table> </div> </form> </body> </html>
Первое отличие этой страницы от обычной в том, что она начинается с директивы Master, а не Page. Класс мастер-страницы определен в файле MasterPage.master.cs:
public partial class MasterPage : System.Web.UI.MasterPage { protected void Page_Load(object sender, EventArgs e) {
} }
Класс шаблона — наследник System.Web.UI.MasterPage, который в свою очередь наследует от System.Web.UI.UserControl.
В ней могут находиться любые элементы управления и HTML-код. В ней могут обрабатываться и события страницы. Два элемента ContentPlaceHolder обозначают места, куда вставляется содержание страницы-наследницы.
Первое отличие этой страницы от обычной в том, что она начинается с директивы Master, а не Page. Класс мастер-страницы определен в файле MasterPage.master.cs:
public partial class MasterPage : System.Web.UI.MasterPage { protected void Page_Load(object sender, EventArgs e) {
} }
Класс шаблона — наследник System.Web.UI.MasterPage, который в свою очередь наследует от System.Web.UI.UserControl.
В ней могут находиться любые элементы управления и HTML-код. В ней могут обрабатываться и события страницы. Два элемента ContentPlaceHolder обозначают места, куда вставляется содержание страницы-наследницы.
Теперь нужно создать страницу содержания. Она создается как обычно, только отмечается флажок с надписью Select Master Page. Появляется диалог, в котором необходимо выбрать шаблон страницы:
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="MainSchool.aspx.cs" Inherits="MainSchool" Title="Untitled Page" %>
Атрибут MasterPage директивы Page определяет шаблон дизайна, или эталонную страницу данной страницы.
Возможно настроить приложение так, чтобы все страницы наследовали одну страницу шаблона дизайна. В конфигурационном файле в секцию web.config нужно вставить элемент:
<pages masterPageFile="~/ MasterPage.master " />
Но и в этом случае назначение главной страницы в директиве Page имеет приоритет над назначением на уровне приложения. Установка web.config действует на тех страницах, в которых masterPageFile не указан, но определены элементы управления Content.
Эта установка не действует на обычные aspx-страницы.
Шаблон можно назначить не всем страницам, а выборочно, например, расположенным в определенной папке приложения:
<location path="Lections"> <system.web> <pages masterPageFile="~/Lections.master" /> </system.web>
Элемент location вставляется в главный узел configuration. Здесь указано, что все страницы из папки Lections используют шаблонную страницу Lections.master.
На странице-наследнице шаблона могут быть только элементы типа Content, каждый из который соответствует одному элементу ContentPlaceHolder шаблона. Нельзя вставлять содержание вне этих элементов, иначе ASP .NET не сможет объединить главную страницу со страницей содержания. Идентификатор ContentPlaceHolder должен совпадать с атрибутом ContentPlaceHolderID соответствующего элемента Content:
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server"> </asp:Content>
Программа создала дочернюю страницу с двумя элементами управления Content. Если переключиться на вкладку Design, эти два элемента Content будут показаны в виде пустых прямоугольников, расположенных рядом друг с другом, так как в шаблоне они находятся в двух соседних ячейках таблицы. Директива Page отличается от обычной, кроме атрибута MasterPageFile, наличием атрибута Title.
Так как теги <head>, <title>, <body> наследуются из файла шаблона, это единственная возможность переопределить заголовок браузера. Заменим значение атрибута:
Title="Главная"
Если посмотреть на результирующую страницу в браузере, увидим, что заголовок браузера отразил изменение. В HTML-коде страницы записано
<title> Главная </title>
На самой странице отображается только содержание, заданное в странице шаблона.
Шаблон можно в любой момент отредактировать, и изменения отразятся на всех производных страницах. Например, добавим картинку перед текстом заголовка:
<img src=" images/ASPdotNET_logo.jpg" />
(Ее можно найти в установке .NET "Microsoft.NET\Framework\ v2.0.xxx\ASP.NETWebAdminFiles\Images)
Дочерняя страница в браузере теперь выглядит так:
Рис. 12.1.
Содержание страницы должно быть строго внутри элементов Content. В один из них можно поместить, например, картинку, а во второй — текст:
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:Image ID="Image1" runat="server" ImageUrl="Images/photo_home_01.jpg" /> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server"> Вы решили изучить ASP.NET?<br />
Преимущество технологии ASP.NET перед остальными состоят в высокой степени абстракции, построенной над стандартным HTML-кодом: применение объектно-ориентированной парадигмы, поддержка нескольких языков программирования, наличие универсального основания, содержащего тысячи уже готовых для использования в проектах решений — Microsoft .NET Framework.
<br /> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="Voting.aspx">Дальше</asp:HyperLink> </asp:Content>
Есть еще один способ поменять заголовок браузера программно. У страницы, имеющей шаблон, есть свойство Master. Конечно, оно есть у всех страниц, но у обычных страниц оно равно Null. Через него можно обращаться ко всем свойствам главной страницы. Это свойство только для чтения.
public MasterPage Master { get; }
public partial class MainSchool : System.Web.UI.Page { protected void Page_LoadComplete(object sender, EventArgs e) { Master.Page.Title = "Школа веб-программирования"; }
Последовательность событий
Когда составная страница формируется на сервере, происходят события и страницы шаблона, и страницы содержания. Порядок этих событий полезно знать, если мы хотим программировать их обработчики.
Инициализация вложенных элементов управления главной страницы.Инициализация вложенных элементов управления страницы содержания.Инициализация самой главной страницы.Инициализация страницы содержания.Загрузка (Page_Load) страницы содержания.Загрузка (Page_Load) главной страницы.Событие Page_LoadComplete страницы содержания.Загрузка дочерних элементов управления управления главной страницы.Загрузка дочерних элементов управления управления страницы содержания.
Событие LoadComplete было введено для того, чтобы можно было обратиться из страницы содержания к элементам главной страницы, созданным в ее Page_Load. Это нельзя сделать в обработчике Page_Load страницы содержания, так как она загружается до главной страницы.
Страницы шаблонов для конкретных платформ
Во многих случаях приложения разрабатываются для просмотра на разных видах контейнеров. Это могут быть различные браузеры или программы просмотра web-сайтов на карманных компьютерах и мобильных телефонах.
Поэтому ASP .NET 2.0 позволяет в атрибуте MasterPageFile директивы Page определить разные страницы шаблона для конкретных контейнеров:
<%@ Page Language="VB" MasterPageFile="~/Wrox.master" Mozilla:MasterPageFile="~/WroxMozilla.master" Opera:MasterPageFile="~/WroxOpera.master" %>
Программное назначение главной страницы
В странице содержания можно переназначить ее главную страницу программно. Для этого нужно присвоить нужное значение свойству Page.MasterPageFile. Шаблон поменяется независимо от того, какой шаблон был назначен в директиве @Page. Но если попробуете проделать это в функциях Page_Load или Page_Init, получите ошибку времени выполнения.
Это свойство можно изменить только во время обработки события Page_PreInit. Событие Page_PreInit — самая ранняя фаза жизненного цикла страницы, к которой можно получить доступ. Во время события Init главная и дочерняя страница уже сливаются в одну, поэтому поздно менять шаблон. По этой причине событие Page_PreInit — единственное, в обработчике которого можно работать с главной страницей отдельно от страницы содержания:
protected void Page_PreInit(object sender, EventArgs e) { Page.MasterPageFile = "~/MyMasterPage.master"; }
Для того чтобы из страницы содержания обратиться к элементам управления главной страницы, можно воспользоваться функцией FindControl. Непосредственно обратиться к ним нельзя, так как это защищенные члены.
Label mpLabel = (Label) Master.FindControl("masterPageLabel"); if(mpLabel != null) { //Set content page title to master page control Title.Text = mpLabel.Text }
Страницы шаблона могут иметь методы и свойства. Чтобы можно было обращаться к ним, нужно использовать директиву @MasterType. При этом становится доступен класс страницы шаблона дизайна через строго типизированную ссылку. Атрибут TypeName задает имя типа, а VirtualPath — путь относительно корневого каталога web-приложения к файлу шаблона:
<%@ page language="C#" masterpagefile="~/Site3.master" %> <%@ mastertype virtualpath="~/Site3.master" %>
Свойства могут быть определены в классе главной страницы:
public String FooterText { get { return Footer.Text; } set { Footer.Text = value; } }
Таким образом, страница разрешает доступ извне к свойствам своих элементов.
Страница содержания меняет это свойство, а элемент управления AdRotator находит с помощью FindControl:
void Page_Load() { Master.FooterText = "This is a custom footer"; AdRotator ad = (AdRotator)Master.FindControl("MyAdRotator"); if (ad != null) { ad.BorderColor = System.Drawing.Color.Purple; ad.BorderWidth = 10; } }
Содержание по умолчанию
В главной странице может быть определено содержание, которое будет отображаться по умолчанию. Оно помещается в элементах ContentPlaceHolder и наследуется всеми дочерними страницами. Если дочерняя страница не переопределит содержание по умолчанию, оно будет использоваться при ее отображении. Создадим элемент управления SiteMapPath, который поместим в ContentPlaceHolder1:
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> <asp:SiteMapPath ID="SiteMapPath1" runat="server"> </asp:SiteMapPath> </asp:contentplaceholder>
На странице MainSchool.aspx он отображаться не будет, так как в ней определены оба элемента Content. Однако, если в следующей странице определен только один из элементов Contentѕ
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Voting.aspx.cs" Inherits="Voting" MasterPageFile="~/MasterPage.master" %> <asp:Content ContentPlaceHolderID="ContentPlaceHolder2" runat="server"> Какой язык программирования Вы предпочитаете?<br /> <asp:RadioButtonList ID="rblVoting" runat="server" DataSourceID="SqlDataSource1" DataTextField="variant" DataValueField="id"> </asp:RadioButtonList><br /> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:PollsConnectionString %>" SelectCommand="SELECT [id], [variant] FROM [poll] ORDER BY [variant] "></asp:SqlDataSource> <br /> <asp:Button ID="Button1" runat="server" Text="Выбрать" /><br /> </asp:Content>
Если посмотреть ее в браузере, увидим, что в ее левой части "хлебные крошки" отображаются.
Вложенные мастер-страницы
Шаблоны дизайна могут наследовать другие шаблоны. Например, сайт состоит из нескольких разделов. Все страницы сайта имеют общие элементы, и все страницы раздела имеют другие общие элементы. Сайт цветочного магазина состоит из разделов многолетних и однолетних цветов. Для них созданы шаблоны, которые наследуют общий шаблон сайта:
<%@ master language="C#" masterpagefile="~/Site4.master"%>
<asp:content contentplaceholderid="SectionContents" runat="serv- er"> <h3>Perrenials</h3> <asp:contentplaceholder id="FlowerText" runat="server"/> <br /><br /> <asp:contentplaceholder id="FlowerPicture" runat="server"/> </asp:content>
Страница, описывающая нарциссы, находится в разделе многолетних цветов и наследует шаблон SectionPerrenials:
<%@ page language="C#" masterpagefile="~/SectionPerrenials.master" %> <asp:content id="FlowerText" ContentPlaceHolderId="FlowerText" runat="server"> Daffodils bloom early in spring and welcome the growing sea- son. </asp:content> <asp:content id="FlowerPicture" ContentPlaceHolderId="FlowerPicture" runat="server"> <asp:image id="image1" runat=server imageurl="~/images/daf- fodil.jpg"/> </asp:content>
в которых все страницы включают
При создании приложений, в которых все страницы включают общие заголовки, подвалы и систему навигации, жизнь могут облегчить шаблоны дизайна. Их легко применять и можно изменять в любой момент, обновляя при этом все приложение.
