Создание макета сайта с помощью эталонных страниц (C#)

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

Скачать в формате PDF

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

Введение

Одним из атрибутов хорошо разработанного веб-сайта является согласованный макет страницы на уровне сайта. Например, воспользуйтесь веб-сайтом www.asp.net . На момент написания этой статьи каждая страница имеет одинаковое содержимое в верхней и нижней части страницы. Как показано на рисунке 1, в верхней части каждой страницы отображается серая полоса со списком сообществ Майкрософт. Под ним находится логотип сайта, список языков, на которых был переведен сайт, и основные разделы: Главная, Начало работы, Обучение, Загрузки и т. д. Аналогичным образом, в нижней части страницы содержатся сведения о рекламе на www.asp.net, заявлении об авторских правах и ссылке на заявление о конфиденциальности.

Рис. 01. Веб-сайт www.asp.net использует согласованный внешний вид и ощущение на всех страницах (щелкните, чтобы просмотреть изображение полного размера)

Другим атрибутом хорошо разработанного сайта является легкость, с помощью которой можно изменить внешний вид сайта. На рисунке 1 показана домашняя страница www.asp.net по состоянию на март 2008 года, но в период с момента публикации этого руководства внешний вид и ощущение, возможно, изменились. Возможно, элементы меню в верхней части будут развернуты, чтобы включить новый раздел для платформы MVC. Или может быть, радикально новый дизайн с различными цветами, шрифтами и макетом будет представлен. Применение таких изменений ко всему сайту должно быть быстрым и простым процессом, который не требует изменения тысяч веб-страниц, составляющих сайт.

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

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

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

Эти учебники предназначены для того, чтобы быть краткими и предоставить пошаговые инструкции с большим количеством снимков экрана, чтобы провести процесс визуально. Каждое руководство доступно в версиях C# и Visual Basic и включает скачивание всего используемого кода.

Это инаугурационное руководство начинается с просмотра основных страниц. Мы обсудим, как работают главные страницы, посмотрите на создание главной страницы и связанных страниц содержимого с помощью Visual Web Developer, а также узнайте, как изменения на главной странице немедленно отражаются на ее страницах контента. Приступим.

Общие сведения о работе главных страниц

Создание веб-сайта с согласованным макетом страницы на уровне сайта требует, чтобы каждая веб-страница выдает общую разметку форматирования в дополнение к пользовательскому содержимому. Например, в то время как каждый учебник или публикация форума на www.asp.net имеют собственное уникальное содержимое, каждая из этих страниц также отображает ряд общих <div> элементов, которые отображают ссылки раздела верхнего уровня: Главная, Начало работы, Обучение и т. д.

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

До ASP.NET версии 2.0 разработчики страниц часто размещают общую разметку в пользовательских элементах управления , а затем добавляют эти элементы управления пользователем на каждую и каждую страницу. Этот подход требует, чтобы разработчик страницы не забывал вручную добавлять пользовательские элементы управления на каждую новую страницу, но позволил упростить изменения на уровне сайта, так как при обновлении общей разметки необходимо изменить только элементы управления пользователем. К сожалению, Visual Studio .NET 2002 и 2003 — версии Visual Studio, используемые для создания приложений ASP.NET 1.x, — отрисовывает пользовательские элементы управления в представлении конструктора как серые прямоугольники. Следовательно, разработчики страниц, использующие этот подход, не наслаждались средой времени разработки WYSIWYG.

Недостатки использования пользовательских элементов управления были устранены в ASP.NET версии 2.0 и Visual Studio 2005 с введением главных страниц. Эталонная страница — это специальный тип страницы ASP.NET, которая определяет как разметку на уровне сайта, так и регионы , в которых связанные страницы содержимого определяют их настраиваемую разметку. Как видно на шаге 1, эти регионы определяются элементами управления ContentPlaceHolder. Элемент управления ContentPlaceHolder просто обозначает позицию в иерархии элементов управления главной страницы, где пользовательское содержимое можно внедрить на странице содержимого.

Примечание.

Основные понятия и функциональные возможности главных страниц не изменились с ASP.NET версии 2.0. Однако Visual Studio 2008 предлагает поддержку времени разработки для вложенных главных страниц, не хватает функции в Visual Studio 2005. Мы рассмотрим использование вложенных главных страниц в будущем руководстве.

На рисунке 2 показано, как выглядит эталонная страница для www.asp.net . Обратите внимание, что эталонная страница определяет общий макет на уровне сайта — разметку в верхней, нижней и правой части каждой страницы, а также ContentPlaceHolder в левом углу, где находится уникальное содержимое для каждой отдельной веб-страницы.

Рис. 02. Эталонная страница определяет макет на уровне сайта и регионы, редактируемые на странице содержимого по содержимому.

После определения главной страницы его можно привязать к новым ASP.NET страницам с помощью галочки флажка. Эти ASP.NET страницы , называемые страницами содержимого, включают элемент управления "Содержимое" для каждого элемента управления ContentPlaceHolder главной страницы. Когда страница содержимого просматривается через браузер, подсистема ASP.NET создает иерархию элементов управления главной страницы и внедряет иерархию элементов управления страницы контента в соответствующие места. Эта объединенная иерархия элементов управления отображается, и полученный HTML возвращается в браузер конечного пользователя. Следовательно, страница содержимого выдает как общую разметку, определенную на главной странице, за пределами элементов управления ContentPlaceHolder, так и разметку, определенную в собственных элементах управления Content. Рис. 3 иллюстрирует эту концепцию.

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

Теперь, когда мы обсудили работу главных страниц, давайте рассмотрим создание главной страницы и связанных страниц содержимого с помощью Visual Web Developer.

Примечание.

Чтобы достичь максимально возможной аудитории, веб-сайт ASP.NET, созданный в рамках этой серии учебников, будет создан с помощью ASP.NET 3.5 с бесплатной версией Visual Studio 2008, Visual Web Developer 2008. Если вы еще не обновились до ASP.NET 3.5, не волнуйтесь. Основные понятия, описанные в этих руководствах, работают одинаково хорошо с ASP.NET 2.0 и Visual Studio 2005. Однако некоторые демонстрационные приложения могут использовать функции, новые для платформа .NET Framework версии 3.5; когда используются специальные функции 3.5, я включаю примечание, которое описывает, как реализовать аналогичные функции в версии 2.0. Имейте в виду, что демонстрационные приложения, доступные для скачивания из каждого руководства, предназначены для платформа .NET Framework версии 3.5, что приводит к Web.config файлу, включающем элементы конфигурации 3.5 и ссылки на пространства имен 3.5 в инструкциях в using классах кода ASP.NET страниц. Короткий рассказ, если вы еще не установили .NET 3.5 на компьютере, скачиваемое веб-приложение не будет работать без первого удаления разметки Web.config3.5 из. Дополнительные сведения об этом разделе см Web.config . в разделе "Файл ". Вам также потребуется удалить using инструкции, ссылающиеся на пространства имен 3.5.

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

Прежде чем мы можем изучить создание и использование главных и контентных страниц, сначала нам нужен веб-сайт ASP.NET. Начните с создания веб-сайта ASP.NET на основе файловой системы. Для этого запустите Visual Web Developer и перейдите в меню "Файл" и выберите "Новый веб-сайт", отображая диалоговое окно "Новый веб-сайт" (см. рис. 4). Выберите шаблон веб-сайта ASP.NET, установите раскрывающийся список "Расположение" в файловой системе, выберите папку для размещения веб-сайта и задайте язык на C#. При этом будет создан новый веб-сайт с Default.aspx ASP.NET страницей, App_Data папкой и файлом Web.config .

Примечание.

Visual Studio поддерживает два режима управления проектами: проекты веб-сайта и проекты веб-приложений. Проекты веб-сайта не имеют файла проекта, а проекты веб-приложений имитируют архитектуру проекта в Visual Studio .NET 2002/2003. Они включают файл проекта и компилируют исходный код проекта в одну сборку, которая помещается в папку /bin . Visual Studio 2005 изначально поддерживает только проекты веб-сайта, хотя модель проекта веб-приложения была повторно введена с пакетом обновления 1 (SP1); Visual Studio 2008 предлагает обе модели проектов. Однако выпуски Visual Web Developer 2005 и 2008 поддерживают только проекты веб-сайта. Я использую модель проекта веб-сайта для демонстраций в этой серии учебников. Если вы используете выпуск, отличный от Express, и хотите использовать модель проекта веб-приложения, вы можете сделать это, но помните, что могут быть некоторые несоответствия между тем, что вы видите на экране, и шаги, которые необходимо предпринять, и снимки экрана, показанные и инструкции, приведенные в этих руководствах.

Рис. 04. Создание веб-сайта на основе файловой системы (щелкните, чтобы просмотреть изображение полного размера)

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

Рис. 05. Добавление главной страницы с именем Site.master на веб-сайт (щелкните, чтобы просмотреть изображение полного размера)

Добавление нового главного файла страницы с помощью Visual Web Developer создает главную страницу со следующей декларативной разметкой:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<!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>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
 
 </asp:ContentPlaceHolder>
 </div>
 </form>
</body>
</html>

Первая строка в декларативной разметке — директива@Master. Директива @Master аналогична @Page директиве , которая отображается на страницах ASP.NET. Он определяет серверный язык (C#) и сведения о расположении и наследовании класса кода главной страницы.

Декларативная DOCTYPE разметка страницы отображается под директивой @Master . Страница включает статический HTML-код вместе с четырьмя элементами управления на стороне сервера:

• Веб-форма (а <form runat="server"> ) — так как все ASP.NET страницы обычно имеют веб-форму, и поскольку эталонная страница может включать веб-элементы управления, которые должны отображаться в веб-форме, обязательно добавьте веб-форму на главную страницу (а не добавление веб-формы на каждую страницу содержимого).
• Элемент управления ContentPlaceHolder с именем ContentPlaceHolder1 — этот элемент управления ContentPlaceHolder отображается в веб-форме и служит регионом для пользовательского интерфейса страницы контента.
• Серверный <head> элемент — <head> элемент имеет runat="server" атрибут, что делает его доступным через серверный код. Элемент <head> реализуется таким образом, чтобы заголовок страницы и другие <head>связанные разметки могли быть добавлены или скорректированы программным способом. Например, установка свойства страницы Title ASP.NET изменяет <title> элемент, отображаемый серверным элементом <head> управления.
• Элемент управления ContentPlaceHolder с именем head — этот элемент управления ContentPlaceHolder отображается в серверном <head> элементе управления и может использоваться для декларативного добавления содержимого в <head> элемент.

Эта эталонная страница по умолчанию декларативная разметка служит отправной точкой для разработки собственных главных страниц. Вы можете изменить HTML или добавить дополнительные веб-элементы управления или ContentPlaceHolders на главную страницу.

Примечание.

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

Создание простого макета сайта

Давайте разверните Site.masterдекларативную разметку по умолчанию, чтобы создать макет сайта, где все страницы совместно используются: общий заголовок, левый столбец с навигацией, новостями и другим контентом на уровне сайта, а также нижний колонтитул, который отображает значок "Powered by Microsoft ASP.NET". На рисунке 6 показан конечный результат главной страницы при просмотре одной из страниц содержимого через браузер. Красный кружок в рис. 6 относится к просматриваемой странице (Default.aspx); другое содержимое определяется на главной странице и поэтому согласовано на всех страницах содержимого.

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

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

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<!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>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
 <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <form id="form1" runat="server">
 <div id="topContent">
 <a href="Default.aspx">Master Pages Tutorials</a>
 </div>
 
 <div id="mainContent">
 <asp:ContentPlaceHolder id="MainContent" runat="server">
 </asp:ContentPlaceHolder>
 </div>
 
 <div id="leftContent">
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 </div>
 
 <div id="footerContent">
 <img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
 </div>
 </form>
</body>
</html>

Макет главной <div> страницы определяется с помощью ряда элементов HTML. Содержит topContent <div> разметку, которая отображается в верхней части каждой страницы, а mainContentleftContentfooterContent <div> также используется для отображения содержимого страницы, левого столбца и значка "Powered by Microsoft ASP.NET" соответственно. Помимо добавления этих <div> элементов, я также переименовал ID свойство основного элемента управления ContentPlaceHolder в ContentPlaceHolder1 MainContent.

Правила форматирования и макета для этих элементов assorted <div> описаны в файле Styles.cssКаскадной таблицы стилей (CSS), который указывается с помощью <элемента ссылки> в головном элементе главной> страницы<. Эти различные правила определяют внешний вид и внешний вид каждого <div> элемента, указанного выше. Например, topContent <div> элемент, в котором отображается текст и ссылка master Pages, содержит правила форматирования, указанные в Styles.css следующих примерах:

#topContent {
 text-align: right;
 background-color: #600;
 color: White;
 font-size: x-large;
 text-decoration: none;
 font-weight: bold;
 padding: 10px;
 height: 50px;
}

Если вы следуют на компьютере, вам потребуется скачать сопровождающий код этого руководства и добавить Styles.css файл в проект. Аналогичным образом необходимо также создать папку с именем Images и скопировать значок "Powered by Microsoft ASP.NET" на скачанный демонстрационный веб-сайт в проект.

Примечание.

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

Создание главной страницы с помощью существующего шаблона конструктора

На протяжении многих лет я построил ряд веб-приложений ASP.NET для малых и средних компаний. У некоторых моих клиентов был существующий макет сайта, который они хотели использовать; другие наняли компетентный графический дизайнер. Несколько доверили мне разработать макет веб-сайта. Как вы можете сказать на рис. 6, задача программиста разработать макет веб-сайта обычно так же мудро, как если ваш бухгалтер выполняет операцию с открытым сердцем, пока ваш врач делает ваши налоги.

К счастью, есть множество веб-сайтов, которые предлагают бесплатные шаблоны дизайна HTML - Google вернул более шести миллионов результатов для поискового термина "бесплатные шаблоны веб-сайтов". Один из моих любимых - это OpenDesigns.org. После того как вы найдете шаблон веб-сайта, добавьте CSS-файлы и изображения в проект веб-сайта и интегрируйте HTML-код шаблона в главную страницу.

Примечание.

Корпорация Майкрософт также предлагает ряд бесплатных ASP.NET шаблонов начального пакета средств разработки, которые интегрируются в диалоговое окно "Новый веб-сайт" в Visual Studio.

Шаг 2. Создание связанных страниц содержимого

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

Давайте добавим новую страницу ASP.NET в проект и привязываем ее к главной Site.master странице. Щелкните правой кнопкой мыши имя проекта в Обозреватель решений и выберите параметр "Добавить новый элемент". Выберите шаблон веб-формы, введите имя About.aspxи установите флажок "Выбрать главную страницу", как показано на рис. 7. Это приведет к отображению диалогового окна "Выбор главной страницы" (см. рис. 8), где можно выбрать главную страницу для использования.

Примечание.

Если вы создали веб-сайт ASP.NET с помощью модели проекта веб-приложения, а не модели проекта веб-сайта, флажок "Выбор главной страницы" в диалоговом окне "Добавление нового элемента", показанном на рис. 7. Чтобы создать страницу содержимого при использовании модели проекта веб-приложения, необходимо выбрать шаблон формы веб-контента вместо шаблона веб-формы. После выбора шаблона формы веб-содержимого и нажатия кнопки "Добавить" появится то же диалоговое окно "Выбор главной страницы", показанное на рисунке 8.

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

Рис. 08. Выберите Site.master главную страницу (щелкните, чтобы просмотреть изображение полного размера)

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

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

Примечание.

В разделе "Создание простого макета сайта" в шаге 1 я переименовывался ContentPlaceHolder1 MainContentв . Если вы не переименовали этот элемент управления ID ContentPlaceHolder таким же образом, декларативная разметка страницы контента будет немного отличаться от разметки, показанной выше. А именно второй элемент управления содержимым будет отражать ID соответствующий элемент управления ContentPlaceHolderID ContentPlaceHolder на главной странице.

При отрисовке страницы содержимого подсистема ASP.NET должна использовать элементы управления "Содержимое" страницы с элементами управления ContentPlaceHolder главной страницы. Модуль ASP.NET определяет главную страницу страницы содержимого из @Page атрибута MasterPageFile директивы. Как показано в приведенной выше разметке, эта страница содержимого привязана к ~/Site.master.

Так как эталонная страница содержит два элемента управления ContentPlaceHolder и head MainContent — Visual Web Developer создал два элемента управления Content. Каждый элемент управления Content ссылается на определенный ContentPlaceHolder через его ContentPlaceHolderID свойство.

Где главные страницы сияют над предыдущими методами шаблонов на уровне сайта с поддержкой времени разработки. На рисунке 9 показана About.aspx страница содержимого при просмотре с помощью представления конструктора Visual Web Developer. Обратите внимание, что в то время как содержимое главной страницы отображается, оно неактивно и не может быть изменено. Однако элементы управления содержимым, соответствующие значениям ContentPlaceHolders главной страницы, доступны для редактирования. Как и любая другая страница ASP.NET, вы можете создать интерфейс страницы контента, добавив веб-элементы управления с помощью представлений "Источник" или "Конструктор".

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

Добавление разметки и веб-элементов управления на страницу содержимого

Создайте некоторое содержимое для About.aspx страницы. Как видно на рисунке 10, я ввел заголовок "О авторе" и несколько абзацев текста, но вы также можете добавить веб-элементы управления. После создания этого интерфейса посетите страницу About.aspx через браузер.

Рис. 10. Посетите About.aspx страницу через браузер (щелкните, чтобы просмотреть изображение полного размера)

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

Привязка главной страницы к существующей странице ASP.NET

Как мы видели на этом шаге, добавление новой страницы содержимого в веб-приложение ASP.NET проще, чем проверка флажка "Выбор главной страницы" и выбор главной страницы. К сожалению, преобразование существующей ASP.NET страницы в главную страницу не так просто.

Чтобы привязать главную страницу к существующей ASP.NET странице, необходимо выполнить следующие действия:

1. Добавьте атрибут в MasterPageFile директиву ASP.NET страницы @Page , указав ее на соответствующую главную страницу.
2. Добавьте элементы управления содержимым для каждого элемента ContentPlaceHolders на главной странице.
3. Выборочно вырезать и вставить существующее содержимое страницы ASP.NET в соответствующие элементы управления содержимым. Я говорю "выборочно" здесь, потому что страница ASP.NET, вероятно, содержит разметку, которая уже выражается главной страницей, например DOCTYPE<html> элементом и веб-формой.

Пошаговые инструкции по этому процессу вместе с снимками экрана см. в руководстве по использованию эталонных страниц и навигации по сайтам Скотта Гатри. В разделе "Обновление Default.aspx и DataSample.aspx использование главной страницы" описаны эти действия.

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

Примечание.

При создании нового приложения ASP.NET Visual Web Developer добавляет Default.aspx страницу, которая не привязана к главной странице. Если вы хотите на практике преобразовать существующую страницу ASP.NET на страницу содержимого, перейдите к ней и сделайте это.Default.aspx Кроме того, можно удалить Default.aspx и повторно добавить его, но на этот раз установите флажок "Выбрать главную страницу".

Шаг 3. Обновление разметки главной страницы

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

Чтобы проиллюстрировать это поведение, давайте обновим главную страницу, чтобы включить текущую дату в верхней части левого столбца. Добавьте метку с именем DateDisplay в объект leftContent <div>.

<div id="leftContent">
 <p>
 <asp:Label ID="DateDisplay" runat="server"></asp:Label>
 </p>
 
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
</div>

Затем создайте обработчик событий для главной Page_Load страницы и добавьте следующий код:

protected void Page_Load(object sender, EventArgs e)
{
    DateDisplay.Text = DateTime.Now.ToString("dddd, MMMM dd");
}

Приведенный выше код задает свойству Label Text текущее значение даты и времени, отформатированного как день недели, имя месяца и двухзначный день (см. рис. 11). С помощью этого изменения вернитесь к одной из страниц содержимого. Как показано на рисунке 11, результирующая разметка немедленно обновляется, чтобы включить изменение на главную страницу.

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

Примечание.

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

Итоги

Главные страницы позволяют разработчикам ASP.NET разрабатывать согласованный макет на уровне сайта, который легко обновляется. Создание эталонных страниц и связанных страниц содержимого так же просто, как создание стандартных ASP.NET страниц, так как Visual Web Developer предлагает многофункциональную поддержку во время разработки.

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

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

Дополнительные материалы

Дополнительные сведения о разделах, описанных в этом руководстве, см. в следующих ресурсах:

• ASP.NET для дизайнеров: бесплатные шаблоны проектирования и рекомендации по созданию веб-сайтов ASP.NET с помощью веб-стандартов
• Обзор главных страниц ASP.NET
• Учебники по каскадным таблицам стилей (CSS)
• Динамическое задание заголовка страницы
• Главные страницы в ASP.NET
• Руководства по кратким руководствам по эталонным страницам

Об авторе

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

Особое спасибо

Хотите просмотреть мои предстоящие статьи MSDN? Если да, упадите меня линию в mitchell@4GuysFromRolla.com.

Далее