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

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

Введение

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

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

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

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

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

Рис. 01: Обведенная область показывает зону, которую можно настроить для каждой страницы (щелкните, чтобы просмотреть изображение в полном размере)

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

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

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

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

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

Чтобы проиллюстрировать это, добавьте новую страницу содержимого в корневой каталог с именем MultipleContentPlaceHolders.aspx , привязанным к главной Site.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 Content, который ссылается на 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 , отображается в правой части страницы (кругом синим цветом).

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

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

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

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

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

Рис. 04: Режим конструктора для About.aspx показывает LeftColumnContent ContentPlaceHolder (Щелкните для просмотра в полном размере)

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

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

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

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

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

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

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

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

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

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

Примечание.

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

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

Site.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>

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

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

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

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

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

Добавьте элемент управления Login в MainContent элемент управления Content. Аналогичным образом, вы можете добавить любое содержимое в 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, он переопределяет содержимое по умолчанию, указанное на главной странице. Чистый эффект заключается в том, что элемент управления "Вход", отображаемый в представлении конструктора главной страницы (см. рис. 6), не отображается на этой странице.

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

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

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

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

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

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

Рис. 08. Содержимое по умолчанию для LeftColumnContentQuickLoginUI элементов ContentPlaceHolders отображается (щелкните, чтобы просмотреть изображение полного размера)

Итоги

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

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

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

Об авторе

Скотт Митчелл, автор нескольких книг ASP/ASP.NET и основатель 4GuysFromRolla.com, работает с технологиями Microsoft Web с 1998 года. Скотт работает независимым консультантом, тренером и писателем. Его последняя книга Изучите ASP.NET 3.5 за 24 часа с помощью Сэмс. С Скоттом можно связаться на mitchell@4GuysFromRolla.com или через его блог http://ScottOnWriting.NET.

Особое спасибо кому

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

Назад Далее

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2024-07-16