Опубликован: 13.07.2010 | Уровень: специалист | Доступ: платный
Самостоятельная работа 31:

Стилевое оформление страниц

Контекстная страница Satellite2.aspx

Страница имеет все контейнеры переопределяющего содержимого, поэтому от мастер-страницы проявляются только заполнители.

<%@ Page Language="C#" MasterPageFile="~/MasterPages/Title.master" Title="Untitled Page" %>
  
<asp:Content ID="Content1" runat="Server" ContentPlaceHolderID="ContentPlaceHolder1">
    <div style="font-weight: bold; font-size: xx-large; color: red; text-align: center">
        Сведения о филиале в Центральном районе
    </div>
</asp:Content>
  
<asp:Content ID="Content2" runat="Server" ContentPlaceHolderID="ContentPlaceHolder2">
    Филиал в Центральном районе такой хороший!<br />
    ..........................<br />
    и т.д.
</asp:Content>
  
<asp:Content ID="Content3" runat="Server" ContentPlaceHolderID="ContentPlaceHolder3">
    <strong>
        Филиал в Центральном районе работает с перерывом на обед и с выходными!!!
    </strong>
</asp:Content>
  
<asp:Content ID="Content4" runat="Server" ContentPlaceHolderID="ContentPlaceHolder4">
    <strong><em>Вы уж, пожалуйста, наведывайтесь к нам почаще в филиал Центрального района!</em>
    </strong>
</asp:Content>

Контекстная страница Satellite3.aspx

Третий контейнер страницы содержимого отсутствует, поэтому на его месте проявится содержимое третьего шаблона мастер-страницы. Четвертый контейнер содержимого существует, но пустой, поэтому на его месте ничего не проявится.

<%@ Page Language="C#" MasterPageFile="~/MasterPages/Title.master" Title="Untitled Page" %>
  
<asp:Content ID="Content1" runat="Server" ContentPlaceHolderID="ContentPlaceHolder1">
    <div style="font-weight: bold; font-size: xx-large; color: red; text-align: center">
        Сведения о филиале в Свердловком районе
    </div>
</asp:Content>
  
<asp:Content ID="Content2" runat="Server" ContentPlaceHolderID="ContentPlaceHolder2">
    Филиал в Свердловском районе такой хороший!<br />
    ..........................<br />
    и т.д.
</asp:Content>
  
<asp:Content ID="Content4" runat="Server" ContentPlaceHolderID="ContentPlaceHolder4">
</asp:Content>

Контекстная страница Satellite4.aspx

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

<%@ Page Language="C#" MasterPageFile="~/MasterPages/Title.master" Title="Untitled Page" %>
  
<asp:Content runat="Server" ContentPlaceHolderID="ContentPlaceHolder1">
    <div style="font-weight: bold; font-size: xx-large; color: red; text-align: center">
        Сведения о филиале в Октябрьском районе
    </div>
</asp:Content>
  
<asp:Content runat="Server" ContentPlaceHolderID="ContentPlaceHolder3">
</asp:Content>
  
<asp:Content runat="Server" ContentPlaceHolderID="ContentPlaceHolder4">
</asp:Content>

Управление элементами мастер-страницы из контекстной страницы

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

  1. Вначале ASP.NET создает элементы управления мастер-страницы, а потом дочерние элементы на контекстной странице
  2. Затем генерируется событие Page.Init мастер-страницы, вслед за которым возбуждается событие Page.Init контекстной страницы
  3. Затем срабатывает событие Page.Load мастер-страницы, а за ним то же событие контекстной страницы

Такой порядок означает, что если мы программно меняем одни и те же настройки в мастер-странице и в контекстной странице , то последними останутся изменения, выполненные в коде контекстной страницы.

В контекстной странице мы можем менять только содержимое контейнеров <asp:Content>, а содержимое заполнителей мастер-страницы и ее заголовок являются недоступными на этапе проектирования. Но именно они участвуют в формировании HTML-вывода. Иногда, не трогая спроектированную мастер-страницу, нужно в ее заполнителях что-то изменить из конкретной контекстной страницы. Это можно сделать программно на этапе выполнения.

Упражнение 15. Программирование заголовка мастер-страницы

Вначале рассмотрим вопросы программирования заголовка мастер-страницы, который генерирует содержимое дескрипторов <head> в HTML-выводе. Мастер-страница имеет заголовок <head>...</head> обычной страницы, где можно задавать все составляющие его дескрипторы и это появится на результирующей странице.

Но иногда на контекстной странице нужно определить свои дескрипторы заголовка. Декларативно (на этапе проектирования) в контекстной странице можно переопределить только дескриптор <title>, добавив в директиву @Page атрибут Title="..." контекстной страницы. В этом случае дескриптор <head> мастер-страницы должен обязательно быть серверным (что и делает по умолчанию мастер заготовок оболочки).

Программно можно переопределять не только дескриптор <title>, но и другие дескрипторы заголовка мастер-страницы. И опять, дескриптор <head> мастер-страницы должен обязательно быть серверным. Для программного управления элементами заголовка <head> мастер-страницы из текущей контекстной страницы нужно в контекстной странице получить ссылку на объект Page мастер-страницы. Это делается через свойство Page.Master объекта текущей контекстной страницы, у которого, в свою очередь, свойство Master.Page и определяет ссылку на объект Page мастер-страницы.

Ниже приведены равноценные коды получения ссылки на объект Page мастер-страницы из контекстной страницы

Page masterPage = base.Master.Page;
            Page masterPage = this.Master.Page;
            Page masterPage = Master.Page;

Ключевые слова base или this не являются обязательными. Они напоминают, что Master является свойством объекта текущей страницы.

Декларативное переопределение <title>

  • Создайте копию страницы Satellite.aspx, назначьте ей имя SatelliteExt.aspx и сделайте стартовой

Попробуем на контекстной странице SatelliteExt.aspx переопределить дескриптор <title> мастер-страницы. Исходный код страницы SatelliteExt.aspx такой

<%@ Page Language="C#" MasterPageFile="~/MasterPages/Title.master" 
    Title="Untitled Page" %>
  • Замените атрибут Title директивы @Page на следующий
<%@ Page Language="C#" MasterPageFile="~/MasterPages/Title.master" 
    Title="Декларативный заголовок SatelliteExt.aspx" %>
  • Исполните страницу с новым заголовком окна броузера - результат будет таким

Программное переопределение <title>

Поскольку мы не создавали для страницы SatelliteExt.aspx отдельный файл кода поддержки, то код переопределения заголовка будем писать в скриптах страницы

  • Переведите страницу SatelliteExt.aspx в режим Design и щелкните дважды на притушенной области проступающего заполнителя мастер-страницы

Оболочка автоматически создаст блок скрипта и вставит в него заготовку обработчика события Page.Load.

  • Заполните обработчик так
<%@ Page Language="C#" MasterPageFile="~/MasterPages/Title.master" 
    Title="Декларативный заголовок SatelliteExt.aspx" %>
  
<script runat="server">
  
    protected void Page_Load(object sender, EventArgs e)
    {
        // Получаем ссылку на мастер-страницу
        Page masterPage = Master.Page;
        
        // Переопределяем строку заголовка
        masterPage.Header.Title = "Программный заголовок SatelliteExt.aspx";
    }
</script>
Листинг 31.51. Файл SatelliteExt.aspx после добавления обработчика Page_Load()
  • Исполните страницу - результат будет таким

Несмотря на то, что мы оставили декларативный атрибут Title, обработчик переопределил его в окончательном выводе. Это и понятно: декларативный атрибут инициируется при создании объекта заголовка, а обработчик Page_Load() срабатывает позднее.

Управление другими элементами мастер-страницы

Рассмотрим управление элементами заполнителя мастер-страницы из контекстной страницы на примере дескриптора <h1>, определенного в заполнителе так

<h1 style="color: Green">
    Мы приветствуем Вас на нашем сайте!!!
</h1>
Листинг 31.52. Дескриптор h1 мастер-страницы ~/MasterPages/Title.master

Его отображение в броузере будет следующим


  • Дополните дескриптор <h1> мастер-страницы Title.master необходимыми для программного управления атрибутами
<h1 style="color: Green" runat="server" id="Header1">
    Мы приветствуем Вас на нашем сайте!!!
</h1>
Листинг 31.53. Дополнительные атрибуты дескриптора <h1> в файле Title.master

Управлять будем из страницы SatelliteExt.aspx одним из двух способов:

  1. Инкапсулируем (упакуем) в мастер-странице дескриптор <h1> в отдельное свойство с именем MyHeader1 и из контекстной страницы будем обращаться к нему через это свойство
  2. Не трогая код мастер-страницы, найдем из контекстной страницы дескриптор <h1> по его ID и будем обращаться к нему напрямую
Александр Очеретяный
Александр Очеретяный
Украина, Киев
Анастасия Балыбердина
Анастасия Балыбердина
Украина, Киев, НТУУ КПИ