Несколько элементов управления ContentPlaceHolder и содержимое по умолчанию (C#)

  • Статья

Скотт Митчелл

Загрузить PDF-файл

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

Введение

В предыдущем руководстве мы рассмотрели, как master страницы позволяют разработчикам ASP.NET создать согласованный макет на уровне сайта. Главные страницы определяют как разметку, общую для всех страниц содержимого, так и регионы, которые настраиваются постранично. В предыдущем руководстве мы создали простую страницу master (Site.master) и две страницы содержимого (Default.aspx и About.aspx). Наша master страница состояла из двух ContentPlaceHolders с именами head и MainContent, которые были расположены в элементе <head> и Web Form соответственно. Хотя на каждой странице содержимого было два элемента управления Контент, мы указали только разметку для той, соответствующей .MainContent

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

Шаг 1. Добавление дополнительных элементов управления ContentPlaceHolder на главную страницу

Многие макеты веб-сайтов содержат несколько областей на экране, которые настраиваются постранично. Site.masterстраница master, созданная в предыдущем руководстве, содержит один объект ContentPlaceHolder в веб-форме с именем MainContent. В частности, этот Объект ContentPlaceHolder находится в элементе mainContent<div> .

На рисунке 1 показано Default.aspx при просмотре в браузере. Область, обведенная красным цветом, — это разметка страницы, соответствующая MainContent.

Область с кругом показывает область, которую можно настроить в настоящее время постранично

Рис. 01. В области обведений показана область, настраиваемая в настоящее время постранично (щелкните для просмотра полноразмерного изображения)

Представьте, что в дополнение к региону, показанного на рис. 1, нам также нужно добавить элементы, относящиеся к странице, в левый столбец под разделами Уроки и Новости. Для этого мы добавим еще один элемент управления ContentPlaceHolder на страницу master. Чтобы выполнить дальнейшие действия, откройте Site.master страницу master в Visual Web Developer и перетащите элемент управления ContentPlaceHolder с панели элементов в конструктор после раздела Новости. Задайте для ContentPlaceHolder значение IDLeftColumnContent.

Добавление элемента управления ContentPlaceHolder в левый столбец главной страницы

Рис. 02. Добавление элемента управления ContentPlaceHolder в левый столбец главной страницы (щелкните для просмотра полноразмерного изображения)

LeftColumnContent Добавив ContentPlaceHolder на страницу master, мы можем определить содержимое для этой области постранично, включив элемент управления Контент на страницу, для которого ContentPlaceHolderID задано значение LeftColumnContent. Мы рассмотрим этот процесс на шаге 2.

Шаг 2. Определение содержимого для нового contentPlaceHolder на страницах содержимого

При добавлении новой страницы контента на веб-сайт Visual Web Developer автоматически создает элемент управления Контент на странице для каждого ContentPlaceHolder на выбранной странице master. После добавления LeftColumnContent ContentPlaceHolder на страницу master на шаге 1 новые страницы ASP.NET теперь будут иметь три элемента управления Контент.

Чтобы проиллюстрировать это, добавьте новую страницу содержимого в корневой каталог с именем MultipleContentPlaceHolders.aspx , привязанный к Site.master странице master. Visual Web Developer создает эту страницу со следующей декларативной разметкой:

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="MultipleContentPlaceHolders.aspx.cs" Inherits="MultipleContentPlaceHolders" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="LeftColumnContent" Runat="Server">
</asp:Content>

Введите некоторое содержимое в элемент управления контентом, ссылающийся на MainContent ContentPlaceHolders (Content2). Затем добавьте следующую разметку в Content3 элемент управления Контент (который ссылается на LeftColumnContent ContentPlaceHolder):

<h3>Page-Specific Content</h3>
<ul>
 <li>This content is defined in the content page.</li>
 <li>The master page has two regions in the Web Form that are editable on a
 page-by-page basis.</li>
</ul>

После добавления этой разметки перейдите на страницу через браузер. Как показано на рисунке 3, разметка, помещенная в Content3 элемент управления Содержимое, отображается в левом столбце под разделом Новости (обведена красным). Разметка, помещенная в Content2 , отображается в правой части страницы (обведенной синим).

В левом столбце теперь содержится Page-Specific содержимое под разделом новостей

Рис. 03. Левый столбец теперь содержит Page-Specific содержимого под разделом новостей (щелкните, чтобы просмотреть полноразмерное изображение)

Определение содержимого на существующих страницах содержимого

При создании новой страницы контента автоматически включается элемент управления ContentPlaceHolder, добавленный на шаге 1. Но две существующие страницы содержимого — About.aspx и Default.aspx — не имеют элемента управления контентом LeftColumnContent для ContentPlaceHolder. Чтобы указать содержимое для этого ContentPlaceHolder на этих двух существующих страницах, необходимо добавить элемент управления Контент самостоятельно.

В отличие от большинства ASP.NET веб-элементов управления, панель элементов разработчика visual web не содержит элемент управления Контент. Мы можем вручную ввести декларативную разметку элемента управления контентом в представление источника, но проще и быстрее использовать представление конструктора. Откройте страницу About.aspx и перейдите в режим конструктора. Как показано на рисунке 4, LeftColumnContent ContentPlaceHolder отображается в представлении конструктора. Если навести на него указатель мыши, отображаемое название будет выглядеть следующим образом: LeftColumnContent (Master)." Включение "Master" в заголовок означает, что на странице для этого ContentPlaceHolder не определен элемент управления содержимым. Если для ContentPlaceHolder существует элемент управления ContentPlaceHolder, как в случае MainContentс , заголовок будет вычитывать: "ContentPlaceHolderID (Custom)".

Чтобы добавить элемент управления Контентом для ContentPlaceHolder About.aspxв LeftColumnContent , разверните смарт-тег ContentPlaceHolder и щелкните ссылку Создать пользовательское содержимое.

В режиме конструктора для About.aspx отображается элемент LeftColumnContent ContentPlaceHolder

Рис. 04. Конструктор для About.aspx показывает LeftColumnContent ContentPlaceHolder (щелкните, чтобы просмотреть полноразмерное изображение)

Щелкнув ссылку Создать пользовательское содержимое, на странице создается необходимый элемент управления Содержимое и присваивается его ContentPlaceHolderID свойству значение ContentPlaceHolder ID. Например, щелкнув ссылку Создать пользовательское содержимое для LeftColumnContent региона в , About.aspx на страницу добавляется следующая декларативная разметка:

<asp:Content ID="Content3" runat="server" contentplaceholderid="LeftColumnContent">
 
</asp:Content>

Пропуск элементов управления содержимым

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

В настоящее Default.aspx время содержит два элемента управления Содержимое head для и MainContent ContentPlaceHolders; он не имеет элемента управления Содержимое для LeftColumnContent. Следовательно, при Default.aspx подготовке к просмотру LeftColumnContent используется содержимое ContentPlaceHolder по умолчанию. Так как мы еще не определили содержимое по умолчанию для этого ContentPlaceHolder, в результате для этого региона не создается разметка. Чтобы проверить это поведение, посетите страницу Default.aspx в браузере. Как показано на рисунке 5, в левом столбце под разделом Новости разметка не создается.

Содержимое не отображается для LeftColumnContent ContentPlaceHolder

Рис. 05. Содержимое не отображается для LeftColumnContent ContentPlaceHolder (щелкните для просмотра полноразмерного изображения)

Шаг 3. Указание содержимого по умолчанию на главной странице

Некоторые макеты веб-сайтов включают регион, содержимое которого одинаково для всех страниц сайта, за исключением одного или двух исключений. Рассмотрим веб-сайт, поддерживающий учетные записи пользователей. Для такого сайта требуется страница входа, на которой посетители могут ввести свои учетные данные для входа на сайт. Чтобы ускорить процесс входа, разработчики веб-сайтов могут включать текстовые поля имени пользователя и пароля в верхнем левом углу каждой страницы, чтобы пользователи могли выполнять вход без необходимости явного посещения страницы входа. Хотя эти текстовые поля имени пользователя и пароля полезны на большинстве страниц, они избыточны на странице входа, которая уже содержит текстовые поля для учетных данных пользователя.

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

Лучшим решением является определение текстовых поля имени пользователя и пароля в качестве содержимого по умолчанию ContentPlaceHolder. Таким образом, нам нужно только переопределить это содержимое по умолчанию на тех нескольких страницах, где не отображаются текстовые поля имени пользователя и пароля (например, страница входа). Чтобы проиллюстрировать указание содержимого по умолчанию для элемента управления ContentPlaceHolder, давайте реализуем только что рассмотренный сценарий.

Примечание

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

Добавление ContentPlaceHolder и указание его содержимого по умолчанию

Откройте страницу Site.master master и добавьте следующую разметку в левый столбец между разделами DateDisplay Метка и Уроки:

<asp:ContentPlaceHolder ID="QuickLoginUI" runat="server">
 <asp:Login ID="QuickLogin" runat="server" 
    TitleText="<h3>Sign In</h3>"
    FailureAction="RedirectToLoginPage">
 </asp:Login>
</asp:ContentPlaceHolder>

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

Главная страница содержит элемент управления

Рис. 06. Главная страница содержит элемент управления для входа (щелкните для просмотра полноразмерного изображения)

Этот contentPlaceHolder, , QuickLoginUIимеет веб-элемент управления входа в качестве содержимого по умолчанию. Элемент управления Вход отображает пользовательский интерфейс, который запрашивает у пользователя имя пользователя и пароль, а также кнопку Входа. При нажатии кнопки Вход элемент управления "Вход" внутренне проверяет учетные данные пользователя на соответствие API членства. Чтобы использовать этот элемент управления входа на практике, необходимо настроить сайт для использования членства. Этот раздел выходит за рамки область этого руководства. Дополнительные сведения о создании веб-приложения, поддерживающего учетные записи пользователей, см. в моих руководствах по проверке подлинности, авторизации, учетным записям пользователей и ролям с помощью форм.

Вы можете настроить поведение или внешний вид элемента управления "Вход". Я установил два его свойства: TitleText и FailureAction. Значение TitleText свойства, которое по умолчанию имеет значение "Вход", отображается в верхней части пользовательского интерфейса элемента управления. Это свойство задано таким образом, чтобы в нем отображалось текст "Вход" в качестве <h3> элемента. Свойство FailureAction указывает, что делать, если учетные данные пользователя недопустимы. По умолчанию используется значение Refresh, которое оставляет пользователя на той же странице и отображает сообщение об ошибке в элементе управления Вход. Я изменил его на RedirectToLoginPage, который отправляет пользователя на страницу входа в случае недопустимых учетных данных. Я предпочитаю отправлять пользователя на страницу входа, когда пользователь пытается войти с другой страницы, но не получается, так как страница входа может содержать дополнительные инструкции и параметры, которые не помещаются в левый столбец. Например, страница входа может включать параметры для получения забытого пароля или создания новой учетной записи.

Создание страницы входа и переопределение содержимого по умолчанию

После завершения master страницы мы создадим страницу входа. Добавьте страницу ASP.NET в корневой каталог сайта с именем Login.aspx, привязав ее к Site.master странице master. При этом создается страница с четырьмя элементами управления контентом, по одному для каждого из ContentPlaceHolders, определенных в Site.master.

Добавьте элемент управления Вход в элемент управления Содержимое MainContent . Аналогичным образом вы можете добавлять любое содержимое в LeftColumnContent регион. Однако не забудьте оставить элемент управления Контент для QuickLoginUI ContentPlaceHolder пустым. Это гарантирует, что элемент управления "Вход" не отображается в левом столбце страницы входа.

После определения содержимого для MainContent регионов и LeftColumnContent декларативная разметка страницы входа должна выглядеть примерно так:

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
 <h2>
 Sign In</h2>
 <p>
 <asp:Login ID="Login1" runat="server" TitleText="">
 </asp:Login>
 </p>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="QuickLoginUI" Runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="LeftColumnContent" Runat="Server">
 <h3>Sign In Tasks</h3>
 <ul>
 <li>Create a New Account</li>
 <li>Recover Forgotten Password</li>
 </ul>
 <p>TODO: Turn the above text into links...</p>
</asp:Content>

На рисунке 7 показана эта страница при просмотре в браузере. Так как эта страница указывает элемент управления Контентом для QuickLoginUI ContentPlaceHolder, она переопределяет содержимое по умолчанию, указанное на странице master. В результате элемент управления "Вход", отображаемый в режиме конструктора страницы master (см. рис. 6), не отображается на этой странице.

Страница входа подавляет содержимое QuickLoginUI ContentPlaceHolder по умолчанию

Рис. 07. Страница входа подавляет QuickLoginUI содержимое ContentPlaceHolder по умолчанию (щелкните для просмотра полноразмерного изображения)

Использование содержимого по умолчанию в новых страницах

Мы хотим отобразить элемент управления Вход в левом столбце для всех страниц, кроме страницы Входа. Для этого все страницы содержимого, кроме страниц входа, должны пропускать элемент управления Содержимое QuickLoginUI для ContentPlaceHolder. Если опустить элемент управления Контент, вместо него будет использоваться содержимое ContentPlaceHolder по умолчанию.

Существующие страницы содержимого ( Default.aspx, About.aspxи MultipleContentPlaceHolders.aspx ) не включают элемент управления Контент для , QuickLoginUI так как они были созданы до того, как мы добавили этот элемент управления ContentPlaceHolder на страницу master. Таким образом, эти существующие страницы не нужно обновлять. Однако новые страницы, добавленные на веб-сайт, по умолчанию содержат элемент управления Контент для QuickLoginUI ContentPlaceHolder. Поэтому мы не забываем удалять эти элементы управления контентом каждый раз при добавлении новой страницы содержимого (если мы не хотим переопределить содержимое ContentPlaceHolder по умолчанию, как в случае со страницей входа).

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

На рисунке 8 показано Default.aspx при просмотре в браузере. Напомним, что Default.aspx в декларативной разметке указаны только два элемента управления Content — один для head и один для MainContent. В результате отображается содержимое по умолчанию для LeftColumnContent и QuickLoginUI ContentPlaceHolders.

Отображается содержимое по умолчанию для leftColumnContent и QuickLoginUI ContentPlaceHolders

Рис. 08. Отображается содержимое по умолчанию для LeftColumnContent и QuickLoginUI ContentPlaceHolders (Щелкните для просмотра полноразмерного изображения)

Сводка

Модель страниц ASP.NET master позволяет использовать произвольное количество объектов ContentPlaceHolders на странице master. Более того, ContentPlaceHolders включает содержимое по умолчанию, которое создается в случае отсутствия соответствующего элемента управления контентом на странице содержимого. В этом руководстве мы узнали, как включить дополнительные элементы управления ContentPlaceHolder на страницу master и как определить элементы управления контентом для этих новых элементов ContentPlaceHolders на новых и существующих страницах ASP.NET. Мы также рассмотрели указание содержимого по умолчанию в ContentPlaceHolder, что полезно в сценариях, когда только меньшинству страниц необходимо настроить стандартизированное содержимое в противном случае в определенном регионе.

В следующем руководстве мы head рассмотрим ContentPlaceHolder более подробно, чтобы узнать, как декларативно и программно определять заголовок, метатеги и другие заголовки HTML на разных страницах.

Счастливое программирование!

Об авторе

Скотт Митчелл (Scott Mitchell), автор нескольких книг ASP/ASP.NET и основатель 4GuysFromRolla.com, работает с веб-технологиями Майкрософт с 1998 года. Скотт работает независимым консультантом, тренером и писателем. Его последняя книга Sams Teach Yourself ASP.NET 3,5 в 24 часа. Скотт можно связаться по адресу mitchell@4GuysFromRolla.com или через его блог по адресу http://ScottOnWriting.NET.

Отдельная благодарность

Эта серия учебников была проверена многими полезными рецензентами. Ведущим рецензентом этого руководства был Сучи Банерджи. Хотите ознакомиться с моими предстоящими статьями MSDN? Если да, опустите мне строку в mitchell@4GuysFromRolla.com.

НазадВперед