Создание макета сайта с помощью эталонных страниц (C#)Creating a Site-Wide Layout Using Master Pages (C#)

по Скотт Митчеллby Scott Mitchell

Скачать код или скачать PDFDownload Code or Download PDF

В этом учебнике будут показаны основные принципы работы с главной страницей.This tutorial will show master page basics. А именно, то, что такое главные страницы, как создать главную страницу, что такое заполнители содержимого, как одна из них создает страницу ASP.NET, использующую главную страницу, как изменение главной страницы автоматически отражается на связанных страницах содержимого и т. д.Namely, what are master pages, how does one create a master page, what are content place holders, how does one create an ASP.NET page that uses a master page, how modifying the master page is automatically reflected in its associated content pages, and so on.

ВведениеIntroduction

Одним из атрибутов хорошо спроектированного веб-сайта является единообразный макет страницы на уровне всего сайта.One attribute of a well-designed website is a consistent site-wide page layout. Возьмем для примера на веб-сайте www.asp.net.Take the www.asp.net website, for example. На момент написания этой статьи все страницы имеют одинаковое содержимое в верхней и нижней части страницы.At the time of this writing, every page has the same content at the top and bottom of the page. Как показано на рис. 1, в верхней части каждой страницы отображается серая линия со списком сообществ Майкрософт.As Figure 1 shows, the very top of each page displays a gray bar with a list of Microsoft Communities. Ниже приведен логотип сайта, список языков, на которые был переведен сайт, а также основные разделы: Домашняя страница, начало работы, обучение, загрузки и т. д.Beneath that is the site logo, the list of languages into which the site has been translated, and the core sections: Home, Get Started, Learn, Downloads, and so forth. Аналогичным образом в нижней части страницы содержатся сведения об объявлении в www.asp.net, заявлении об авторских правах и ссылка на заявление о конфиденциальности.Likewise, the bottom of the page includes information about advertising on www.asp.net, a copyright statement, and a link to the privacy statement.

веб-сайт www.asp.net применяет единообразный вид и поведение на всех страницахThe www.asp.net Website Employs a Consistent Look and Feel Across All Pages

Рис. 01. веб-сайт www.ASP.NET использует единообразный внешний вид и поведение всех страниц (щелкните, чтобы просмотреть изображение с полным размером)Figure 01: The www.asp.net Website Employs a Consistent Look and Feel Across All Pages (Click to view full-size image)

Другим атрибутом хорошо спроектированного сайта является простота, с которой можно изменить внешний вид узла.Another attribute of a well-designed site is the ease with which the site's appearance can be changed. На рис. 1 показана домашняя страница www.asp.net на 2008 марта, но между сейчас и публикацией этого учебника изменился внешний вид.Figure 1 shows the www.asp.net homepage as of March 2008, but between now and this tutorial's publication, the look and feel may have changed. Возможно, пункты меню в верхней части будут расширены, чтобы включить новый раздел для платформы MVC.Perhaps the menu items along the top will expand to include a new section for the MVC framework. Или, возможно, совершенно новая разработка с различными цветами, шрифтами и макетом, будет представила.Or maybe a radically new design with different colors, fonts, and layout will be unveiled. Применение таких изменений ко всему сайту должно быть быстрым и простым процессом, который не требует изменения тысяч веб-страниц, составляющих сайт.Applying such changes to the entire site should be a fast and simple process that does not require modifying the thousands of web pages that make up the site.

Создание шаблона страницы на уровне сайта в ASP.NET возможно благодаря использованию главных страниц.Creating a site-wide page template in ASP.NET is possible through the use of master pages. В двух словах, Главная страница — это специальный тип страницы ASP.NET, который определяет разметку, которая является общей для всех страниц содержимого , а также области, настраиваемые на основе содержимого страницы.In a nutshell, a master page is a special type of ASP.NET page that defines the markup that is common among all content pages as well as regions that are customizable on a content page-by-content page basis. (Страница содержимого — это страница ASP.NET, привязанная к главной странице.) При изменении макета или форматирования главной страницы все ее выходные данные также немедленно обновляются, что делает применение изменений внешнего вида на уровне сайта простым обновлением и развертыванием одного файла (а именно, главной страницы).(A content page is an ASP.NET page that is bound to the master page.) Whenever a master page's layout or formatting is changed, all of its content pages' output is likewise immediately updated, which makes applying site-wide appearance changes as easy as updating and deploying a single file (namely, the master page).

Это первый учебник из серии руководств, посвященных использованию главных страниц.This is the first tutorial in a series of tutorials that explore using master pages. В рамках этой серии руководств мы будем:Over the course of this tutorial series we:

  • Изучите создание главных страниц и связанных с ними страниц содержимого.Examine creating master pages and their associated content pages,
  • Обсуждение различных советов, приемов и ловушек,Discuss a variety of tips, tricks, and traps,
  • Выявление общих ловушек главной страницы и обзор решений,Identify common master page pitfalls and explore workarounds,
  • Узнайте, как получить доступ к главной странице со страницы содержимого и наоборот.See how to access the master page from a content page and vice-a-versa,
  • Сведения о том, как указать главную страницу страницы содержимого во время выполнения иLearn how to specify a content page's master page at runtime, and
  • Другие дополнительные статьи по главной странице.Other advanced master page topics.

Эти учебники предназначены для краткости и содержат пошаговые инструкции с большим количеством снимков экрана для визуального анализа процесса.These tutorials are geared to be concise and provide step-by-step instructions with plenty of screen shots to walk you through the process visually. Каждый учебник доступен в C# и Visual Basic версий, а также содержит загрузку полного кода.Each tutorial is available in C# and Visual Basic versions and includes a download of the complete code used.

В этом учебнике инаугурационный начинается изучение основ главной страницы.This inaugural tutorial starts with a look at master page basics. Мы обсудим работу главных страниц, рассмотрим создание главной страницы и связанных с ней страниц содержимого с помощью Visual Web Developer и посмотрим, как изменения на главной странице немедленно отражаются на страницах содержимого.We discuss how master pages work, look at creating a master page and associated content pages using Visual Web Developer, and see how changes to a master page are immediately reflected in its content pages. Приступим.Let's get started!

Основные сведения о работе главных страницUnderstanding How Master Pages Work

Для создания веб-сайта с единообразным макетом страницы на уровне сайта требуется, чтобы каждая веб-страница выдавала общее форматирование в дополнение к его пользовательскому содержимому.Building a website with a consistent site-wide page layout requires that each web page emit common formatting markup in addition to its custom content. Например, хотя у каждого руководства или форума в www.asp.net есть собственное уникальное содержимое, каждая из этих страниц также отображает ряд общих элементов <div>, отображающих ссылки на разделы верхнего уровня: Домашняя страница, начало работы, обучение и т. д.For example, while each tutorial or forum post on www.asp.net have their own unique content, each of these pages also render a series of common <div> elements that display the top-level section links: Home, Get Started, Learn, and so on.

Существует множество методов создания веб-страниц с единообразным видом и поведением.There are a variety of techniques for creating web pages with a consistent look and feel. Упрощенный подход заключается в простом копировании и вставке общей разметки макета на все веб-страницы, но этот подход имеет ряд недостатков.A naive approach is to simply copy and paste the common layout markup into all web pages, but this approach has a number of downsides. Для начинающих, каждый раз при создании страницы необходимо не забывать скопировать и вставить общее содержимое на страницу.For starters, every time a new page is created, you must remember to copy and paste the shared content into the page. Такие операции копирования и вставления готовых к ошибке, так как вы можете случайно скопировать только подмножество общей разметки на новую страницу.Such copying and pasting operations are ripe for error as you may accidentally copy only a subset of the shared markup into a new page. И, как и прежде, этот подход делает замену существующего внешнего вида всего сайта на новое, что очень удобно, так как каждая отдельная страница на сайте должна быть изменена для использования нового внешнего вида и поведения.And to top it off, this approach makes replacing the existing site-wide appearance with a new one a real pain because every single page in the site must be edited in order to use the new look and feel.

До ASP.NET версии 2,0 разработчики страниц часто разместили общую разметку в пользовательских элементах управления , а затем добавили эти пользовательские элементы управления на каждую страницу.Prior to ASP.NET version 2.0, page developers often placed common markup in User Controls and then added these User Controls to each and every page. При таком подходе требовалось, чтобы разработчик страницы вручную не запомнил Добавление пользовательских элементов управления на каждую новую страницу, но он допускает более простые изменения в масштабах сайта, так как при обновлении общей разметки только те пользовательские элементы управления, которые необходимо изменить.This approach required that the page developer remember to manually add the User Controls to every new page, but allowed for easier site-wide modifications because when updating the common markup only the User Controls needed to be modified. К сожалению, Visual Studio .NET 2002 и 2003 — версии Visual Studio, используемые для создания приложений ASP.NET 1. x — отображаемые пользовательские элементы управления в представление конструирования в виде серых прямоугольников.Unfortunately, Visual Studio .NET 2002 and 2003 - the versions of Visual Studio used to create ASP.NET 1.x applications - rendered User Controls in the Design view as gray boxes. Следовательно, разработчики страниц, использующие этот подход, не работали с WYSIWYG-средой времени разработки.Consequently, page developers using this approach did not enjoy a WYSIWYG design-time environment.

Недостатки использования пользовательских элементов управления были устранены в ASP.NET версии 2,0 и Visual Studio 2005 с введением главных страниц.The shortcomings of using User Controls were addressed in ASP.NET version 2.0 and Visual Studio 2005 with the introduction of master pages. Главная страница — это специальный тип страницы ASP.NET, который определяет разметку на уровне сайта и регионы , в которых связанные страницы содержимого определяют свои собственные разметки.A master page is a special type of ASP.NET page that defines both the site-wide markup and the regions where associated content pages define their custom markup. Как будет показано на шаге 1, эти регионы определяются элементами управления ContentPlaceHolder.As we will see in Step 1, these regions are defined by ContentPlaceHolder controls. Элемент управления ContentPlaceHolder просто обозначает позицию в иерархии элементов управления главной страницы, где пользовательское содержимое может быть внедрено страницей содержимого.The ContentPlaceHolder control simply denotes a position in the master page's control hierarchy where custom content can be injected by a content page.

Note

Основные понятия и функциональность главных страниц не изменились после ASP.NET версии 2,0.The core concepts and functionality of master pages has not changed since ASP.NET version 2.0. Однако Visual Studio 2008 предлагает поддержку во время разработки для вложенных главных страниц — функции, которая отсутствовала в Visual Studio 2005.However, Visual Studio 2008 offers design-time support for nested master pages, a feature that was lacking in Visual Studio 2005. В следующем учебном курсе рассматривается использование вложенных главных страниц.We will look at using nested master pages in a future tutorial.

На рис. 2 показано, как может выглядеть Главная страница для www.asp.net.Figure 2 shows what the master page for www.asp.net might look like. Обратите внимание, что на главной странице определяется общий макет всего сайта — разметка в верхней, нижней и правой части каждой страницы, а также ContentPlaceHolder в середине слева, где размещается уникальное содержимое каждой отдельной веб-страницы.Note that the master page defines the common site-wide layout - the markup at the top, bottom, and right of every page - as well as a ContentPlaceHolder in the middle-left, where the unique content for each individual web page is located.

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

Рис. 02. Эталонная страница определяет макет на уровне сайта и области, изменяемые на странице содержимого страница по содержимомуFigure 02: A Master Page Defines the Site-Wide Layout and the Regions Editable on a Content Page-by-Content Page Basis

После определения главной страницы ее можно привязать к новым ASP.NET страницам с помощью такта флажка.Once a master page has been defined it can be bound to new ASP.NET pages through the tick of a checkbox. Эти страницы ASP.NET, называемые страницами содержимого, включают элемент управления содержимым для каждой из элементов управления ContentPlaceHolder главной страницы.These ASP.NET pages - called content pages - include a Content control for each of the master page's ContentPlaceHolder controls. При посещении страницы содержимого через браузер подсистема ASP.NET создает иерархию элементов управления главной страницы и внедряет иерархию элементов управления страницы содержимого в соответствующие места.When the content page is visited through a browser the ASP.NET engine creates the master page's control hierarchy and injects the content page's control hierarchy into the appropriate places. Эта объединенная иерархия элементов управления готовится к просмотру, а полученный код HTML возвращается браузеру конечного пользователя.This combined control hierarchy is rendered and the resulting HTML is returned to the end user's browser. Следовательно, страница содержимого выдает как общую разметку, определенную на главной странице, за пределы элементов управления ContentPlaceHolder, так и разметку страницы, определенную в собственных элементах управления содержимым.Consequently, the content page emits both the common markup defined in its master page outside of the ContentPlaceHolder controls and the page-specific markup defined within its own Content controls. Эта концепция показана на рис. 3.Figure 3 illustrates this concept.

разметке запрошенной страницы является плавкий предохранитель на главной страницеThe Requested Page's Markup is Fused into the Master Page

Рис. 03. Разметка запрошенной страницы — это значок с плавким предохранителем на главной странице (щелкните, чтобы просмотреть изображение с полным размером)Figure 03: The Requested Page's Markup is Fused into the Master Page (Click to view full-size image)

Теперь, когда мы обсуждали работу главных страниц, давайте взглянем на создание главной страницы и связанных с ней страниц содержимого с помощью Visual Web Developer.Now that we have discussed how master pages work, let's take a look at creating a master page and associated content pages using Visual Web Developer.

Note

Чтобы достичь самой широкой аудитории, веб-сайт ASP.NET, который мы создаем в рамках этой серии руководств, будет создан с помощью ASP.NET 3,5 с бесплатной версией Visual Studio 2008, Visual Web Developer 2008.In order to reach the widest possible audience, the ASP.NET website we build throughout this tutorial series will be created using ASP.NET 3.5 with Microsoft's free version of Visual Studio 2008, Visual Web Developer 2008. Если вы еще не выполнили обновление до ASP.NET 3,5, не беспокойтесь: концепции, обсуждаемые в этих учебниках, работают одинаково хорошо с ASP.NET 2,0 и Visual Studio 2005.If you have not yet upgraded to ASP.NET 3.5, don't worry - the concepts discussed in these tutorials work equally well with ASP.NET 2.0 and Visual Studio 2005. Однако некоторые демонстрационные приложения могут использовать новые возможности .NET Framework версии 3,5; При использовании компонентов, относящихся к 3,5, я включил замечание, в котором обсуждается реализация аналогичной функциональности в версии 2,0.However, some demo applications may use features new to the .NET Framework version 3.5; when 3.5-specific features are used, I include a note that discusses how to implement similar functionality in version 2.0. Помните, что демонстрационные приложения, доступные для загрузки из каждого руководства, предназначены для .NET Framework версии 3,5, что приводит к Web.config файлу, который содержит элементы конфигурации, относящиеся к 3,5, и ссылки на пространства имен 3,5 в инструкциях using в классах кода программной части ASP.NET Pages.Do keep in mind that the demo applications available for download from each tutorial target the .NET Framework version 3.5, which results in a Web.config file that includes 3.5-specific configuration elements and references to 3.5-specific namespaces in the using statements in ASP.NET pages' code-behind classes. Короткая история. Если вы еще не установили .NET 3,5 на компьютере, загружаемое веб-приложение не будет работать без предварительного удаления разметки, относящейся к 3,5, из Web.config.Long story short, if you have yet to install .NET 3.5 on your computer then the downloadable web application will not work without first removing the 3.5-specific markup from Web.config. Дополнительные сведения по этой теме см. в разделе которая разбила ASP.NET версии 3.5 Web.config File .See Dissecting ASP.NET Version 3.5's Web.config File for more information on this topic. Также необходимо удалить инструкции using, которые ссылаются на пространства имен, относящиеся к 3,5.You will also need to remove the using statements that reference 3.5-specific namespaces.

Шаг 1. Создание главной страницыStep 1: Creating a Master Page

Прежде чем мы сможем изучить создание и использование главных и страниц содержимого, нам сначала нужен веб-сайт ASP.NET.Before we can explore creating and using master and content pages, we first need an ASP.NET website. Начните с создания нового веб-сайта ASP.NET на основе файловой системы.Start by creating a new file system-based ASP.NET website. Для этого запустите Visual Web Developer, а затем перейдите в меню файл и выберите пункт Создать веб-сайт, в котором отображается диалоговое окно Новый веб-сайт (см. рис. 4).To accomplish this, launch Visual Web Developer and then go to the File menu and choose New Web Site, displaying the New Web Site dialog box (see Figure 4). Выберите шаблон веб-сайт ASP.NET, в раскрывающемся списке Расположение выберите Файловая система, укажите папку для размещения веб-сайта и задайте для C#параметра язык значение.Choose the ASP.NET Web Site template, set the Location drop-down list to File System, choose a folder to place the web site, and set the language to C#. При этом будет создан новый веб-сайт со страницей Default.aspx ASP.NET, App_Data папкой и Web.configным файлом.This will create a new web site with a Default.aspx ASP.NET page, an App_Data folder, and a Web.config file.

Note

Visual Studio поддерживает два режима управления проектами: проекты веб-сайтов и проекты веб-приложений.Visual Studio supports two modes of project management: Web Site Projects and Web Application Projects. В проектах веб-сайтов отсутствует файл проекта, в то время как проекты веб-приложений имитирует архитектуру проекта в Visual Studio .NET 2002/2003 — они включают файл проекта и компилируются исходный код проекта в одну сборку, которая помещается в папку /bin.Web Site Projects lack a project file, whereas Web Application Projects mimic the project architecture in Visual Studio .NET 2002/2003 - they include a project file and compile the project's source code into a single assembly, which is placed in the /bin folder. В Visual Studio 2005 изначально поддерживаются только проекты веб-сайтов, хотя модель проекта веб-приложения была повторно введена с пакетом обновления 1 (SP1). Visual Studio 2008 предлагает обе модели проекта.Visual Studio 2005 initially only supported Web Site Projects, although the Web Application Project model was reintroduced with Service Pack 1; Visual Studio 2008 offers both project models. Однако выпуски Visual Web Developer 2005 и 2008 поддерживают только проекты веб-сайтов.The Visual Web Developer 2005 and 2008 editions, however, only support Web Site Projects. Я использую модель проекта веб-сайта для моих демонстраций в этой серии руководств.I use the Web Site Project model for my demos in this tutorial series. Если вы используете не Express Edition и хотите использовать модель проекта веб-приложения, вы можете сделать это, но имейте в виду, что на экране могут возникнуть некоторые несоответствия, а также действия, которые необходимо выполнить, а также отобразить снимки экрана и инструктио в этих учебниках указана служба NS.If you are using a non-Express edition and want to use the Web Application Project model instead, feel free to do so but be aware that there may be some discrepancies between what you see on your screen and the steps you must take versus the screen shots shown and instructions provided in these tutorials.

создать новый веб-сайт на основе файловой системыCreate a New File System-Based Web Site

Рис. 04. Создание нового веб-сайта на основе файловой системы (щелкните, чтобы просмотреть изображение с полным размером)Figure 04: Create a New File System-Based Web Site (Click to view full-size image)

Затем добавьте главную страницу к сайту в корневом каталоге, щелкнув правой кнопкой мыши имя проекта, выбрав Добавить новый элемент и выбрав шаблон главной страницы.Next, add a master page to the site in the root directory by right-clicking on the Project name, choosing Add New Item, and selecting the Master Page template. Обратите внимание, что главные страницы заканчиваются расширением .master.Note that master pages end with the extension .master. Назовите эту новую главную страницу Site.master и нажмите кнопку Добавить.Name this new master page Site.master and click Add.

добавить главную страницу с именем site. master на веб-сайтAdd a Master Page Named Site.master to the Website

Рис. 05. Добавление главной страницы с именем Site.master на веб-сайт (щелкните, чтобы просмотреть изображение с полным размером)Figure 05: Add a Master Page Named Site.master to the Website (Click to view full-size image)

При добавлении нового файла главной страницы с помощью Visual Web Developer создается Главная страница со следующей декларативной разметкой:Adding a new master page file through Visual Web Developer creates a master page with the following declarative markup:

<%@ 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.The first line in the declarative markup is the @Master directive. Директива @Master похожа на директиву@Page , которая отображается на страницах ASP.NET.The @Master directive is similar to the @Page directive that appears in ASP.NET pages. Он определяет язык на стороне сервера (C#) и сведения о расположении и наследовании класса кода программной части главной страницы.It defines the server-side language (C#) and information about the location and inheritance of the master page's code-behind class.

Под директивой @Master появляется DOCTYPE и декларативная разметка страницы.The DOCTYPE and the page's declarative markup appears beneath the @Master directive. Страница включает статический HTML и четыре элемента управления на стороне сервера:The page includes static HTML along with four server-side controls:

  • Веб-форма (<form runat="server">) — поскольку все страницы ASP.NET обычно имеют веб-форму, а Главная страница может содержать веб-элементы управления, которые должны отображаться в веб-форме, обязательно добавьте веб-форму на главную страницу (вместо того, чтобы добавлять веб-форму на каждую страницу содержимого).A Web Form (the <form runat="server">) - because all ASP.NET pages typically have a Web Form - and because the master page may include Web controls that must appear within a Web Form - be sure to add the Web Form to your master page (rather than adding a Web Form to each content page).
  • Элемент управления ContentPlaceHolder с именем ContentPlaceHolder1 — этот элемент управления ContentPlaceHolder отображается в веб-форме и выступает в качестве региона для пользовательского интерфейса страницы содержимого.A ContentPlaceHolder control named ContentPlaceHolder1 - this ContentPlaceHolder control appears within the Web Form and serves as the region for the content page's user interface.
  • Элемент <head> на стороне сервера — элемент <head> имеет атрибут runat="server", делая его доступным в коде на стороне сервера.A server-side <head> element - the <head> element has the runat="server" attribute, making it accessible through server-side code. Элемент <head> реализуется таким образом, чтобы заголовок страницы и другая разметка, связанная с <head>, могли быть добавлены или скорректированы программно.The <head> element is implemented this way so that the page's title and other <head>-related markup may be added or adjusted programmatically. Например, установка свойства Title страницы ASP.NET изменяет элемент <title>, отображаемый серверным элементом управления <head>.For example, setting an ASP.NET page's Title property changes the <title> element rendered by the <head> server control.
  • Элемент управления ContentPlaceHolder с именем head — этот элемент управления ContentPlaceHolder появляется в элементе управления <head> Server и может использоваться для декларативного добавления содержимого в элемент <head>.A ContentPlaceHolder control named head - this ContentPlaceHolder control appears within the <head> server control and can be used to declaratively add content to the <head> element.

Эта декларативная разметка главной страницы по умолчанию служит отправной точкой для разработки собственных главных страниц.This default master page declarative markup serves as a starting point for designing your own master pages. Вы можете изменить код HTML или добавить дополнительные веб-элементы управления или элементов управления ContentPlaceHolder на главную страницу.Feel free to edit the HTML or to add additional Web controls or ContentPlaceHolders to the master page.

Note

При проектировании главной страницы убедитесь, что эталонная страница содержит веб-форму и что в этой веб-форме отображается по крайней мере один элемент управления ContentPlaceHolder.When designing a master page make sure that the master page contains a Web Form and that at least one ContentPlaceHolder control appears within this Web Form.

Создание простого макета узлаCreating a Simple Site Layout

Развернув Site.masterдекларативную разметку по умолчанию, можно создать макет сайта, в котором все страницы имеют общий заголовок. левый столбец с навигацией, новостями и другим содержимым для всего сайта; и нижний колонтитул, отображающий значок "питание от Microsoft ASP.NET".Let's expand Site.master's default declarative markup to create a site layout where all pages share: a common header; a left column with navigation, news and other site-wide content; and a footer that displays the "Powered by Microsoft ASP.NET" icon. На рис. 6 показан конечный результат главной страницы при просмотре одной из страниц содержимого в браузере.Figure 6 shows the end result of the master page when one of its content pages is viewed through a browser. Красная круговая область на рис. 6 относится к посещаемой странице (Default.aspx); другое содержимое определяется на главной странице и, следовательно, согласовано на всех страницах содержимого.The red circled region in Figure 6 is specific to the page being visited (Default.aspx); the other content is defined in the master page and therefore consistent across all content pages.

на главной странице определена разметка для верхних, левых и нижних частейThe Master Page Defines the Markup for the Top, Left, and Bottom Portions

Рис. 06. Главная страница определяет разметку для верхних, левых и нижних частей (щелкните, чтобы просмотреть изображение с полным размером).Figure 06: The Master Page Defines the Markup for the Top, Left, and Bottom Portions (Click to view full-size image)

Чтобы получить макет сайта, показанный на рис. 6, начните с обновления главной страницы Site.master, чтобы она содержала следующую декларативную разметку:To achieve the site layout shown in Figure 6, start by updating the Site.master master page so that it contains the following declarative markup:

<%@ 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.The master page's layout is defined using a series of <div> HTML elements. topContent <div> содержит разметку, которая отображается в верхней части каждой страницы, а mainContent, leftContentи footerContent <div> s используются для отображения содержимого страницы, левого столбца и значка "питание от Microsoft ASP.NET" соответственно.The topContent <div> contains the markup that appears at the top of each page, while the mainContent, leftContent, and footerContent <div> s are used to display the page's content, the left column, and the "Powered by Microsoft ASP.NET" icon, respectively. Помимо добавления этих <div> элементов, я также переименовал свойство ID основного элемента управления ContentPlaceHolder из ContentPlaceHolder1 в MainContent.In addition to adding these <div> elements, I also renamed the ID property of the primary ContentPlaceHolder control from ContentPlaceHolder1 to MainContent.

Правила форматирования и макета для этих элементов <div> ассортимента написаны в каскадном файле таблицы стилей (CSS) Styles.css, который задается с помощью элемента <ссылки> в элементе <Head> главной страницы.The formatting and layout rules for these assorted <div> elements is spelled out in the Cascading Stylesheet (CSS) file Styles.css, which is specified via a <link> element in the master page's <head> element. Эти различные правила определяют внешний вид и поведение каждого элемента <div>, упомянутого выше.These various rules define the look and feel of each <div> element noted above. Например, элемент topContent <div>, который отображает текст и компоновку учебников по главным страницам, имеет правила форматирования, указанные в Styles.css следующим образом:For example, the topContent <div> element, which displays the "Master Pages Tutorials" text and link, has its formatting rules specified in Styles.css as follows:

#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 в проект.If you are following along at your computer, you will need to download this tutorial's accompanying code and add the Styles.css file to your project. Аналогичным образом также потребуется создать папку с именем Images и скопировать значок "питание на Microsoft ASP.NET" из скачанного демонстрационного веб-сайта в проект.Similarly, you will also need to create a folder named Images and copy the "Powered by Microsoft ASP.NET" icon from the downloaded demo website to your project.

Note

Обсуждение форматирования CSS и веб-страницы выходит за рамки этой статьи.A discussion of CSS and web page formatting is beyond the scope of this article. Дополнительные сведения о CSS см. в учебниках по CSS по адресу W3Schools.com.For more on CSS, check out the CSS Tutorials at W3Schools.com. Я также рекомендую скачать сопутствующий код этого учебника и воспроизвести параметры CSS в Styles.css, чтобы увидеть влияние различных правил форматирования.I also encourage you to download this tutorial's accompanying code and play with the CSS settings in Styles.css to see the effects of different formatting rules.

Создание главной страницы с помощью существующего шаблона проектаCreating a Master Page Using an Existing Design Template

В течение многих лет я создал ряд ASP.NET веб-приложений для компаний малого и среднего размера.Over the years I've built a number of ASP.NET web applications for small- to medium-sized companies. Для некоторых из моих клиентов существовала существующая структура сайта, которую они хотят использовать; другие лица, нанятые компетентного Graphics Designer.Some of my clients had an existing site layout they wanted to use; others hired a competent graphics designer. Несколько сохранность мне, чтобы разработать макет веб-сайта.A few entrusted me to design the website layout. Как можно узнать на рис. 6, задача разработки макета веб-сайта обычно так же хорошо, как и у вашего бухгалтера, хирургии на то время, когда врач выполняет свои налоги.As you can tell by Figure 6, tasking a programmer to design a website's layout is usually as wise as having your accountant perform open-heart surgery while your doctor does your taxes.

К счастью, существует множество веб-сайтов, которые предлагают бесплатные шаблоны проектирования HTML — Google вернул более 6 000 000 результатов поиска в термине "бесплатные шаблоны веб-сайтов".Fortunately, there are innumerous websites that offer free HTML design templates - Google returned more than six million results for the search term "free website templates." Одним из моих любимых является OpenDesigns.org. Найдя нужный шаблон веб-сайта, добавьте файлы CSS и изображения в проект веб-сайта и Интегрируйте HTML-код шаблона в главную страницу.One of my favorite ones is OpenDesigns.org. Once you find a website template you like, add the CSS files and images to your website project and integrate the template's HTML into your master page.

Note

Корпорация Майкрософт также предлагает ряд бесплатных шаблонов ASP.NET Design Kit , которые интегрируются в диалоговое окно Новый веб-сайт в Visual Studio.Microsoft also offers a number of free ASP.NET Design Start Kit Templates that integrate into the New Web Site dialog box in Visual Studio.

Шаг 2. Создание связанных страниц содержимогоStep 2: Creating Associated Content Pages

После создания главной страницы мы готовы приступить к созданию страниц ASP.NET, привязанных к главной странице.With the master page created, we are ready to start creating ASP.NET pages that are bound to the master page. Такие страницы называются страницами содержимого.Such pages are referred to as content pages.

Добавим новую страницу ASP.NET в проект и привяжите ее к главной странице Site.master.Let's add a new ASP.NET page to the project and bind it to the Site.master master page. Щелкните правой кнопкой мыши имя проекта в обозреватель решений и выберите команду "добавить новый элемент".Right-click on the project name in Solution Explorer and choose the Add New Item option. Выберите шаблон веб-формы, введите имя About.aspx, а затем установите флажок "выбрать главную страницу", как показано на рис. 7.Select the Web Form template, enter the name About.aspx, and then check the "Select master page" checkbox as shown in Figure 7. Это приведет к отображению диалогового окна Выбор главной страницы (см. рис. 8), где можно выбрать используемую эталонную страницу.Doing so will display the Select a Master Page dialog box (see Figure 8) from where you can choose the master page to use.

Note

Если вы создали веб-сайт ASP.NET, используя модель проекта веб-приложения, а не модель проекта веб-сайта, флажок "выбрать главную страницу" в диалоговом окне "Добавление нового элемента", показанном на рис. 7, не отображается.If you created your ASP.NET website using the Web Application Project model instead of the Web Site Project model you will not see the "Select master page" checkbox in the Add New Item dialog box shown in Figure 7. Чтобы создать страницу содержимого при использовании модели проекта веб-приложения, необходимо выбрать шаблон формы веб-содержимого вместо шаблона веб-формы.To create a content page when using the Web Application Project model you must choose the Web Content Form template instead of the Web Form template. После выбора шаблона формы веб-содержимого и нажатия кнопки «Добавить» появится диалоговое окно Выбор главной страницы, показанное на рис. 8.After selecting the Web Content Form template and clicking Add, the same Select a Master Page dialog box shown in Figure 8 will appear.

добавить новую страницу содержимогоAdd a New Content Page

Рис. 07. Добавление новой страницы содержимого (щелкните, чтобы просмотреть изображение с полным размером)Figure 07: Add a New Content Page (Click to view full-size image)

выберите главную страницу site. master.Select the Site.master Master Page

Рис. 08. Выбор главной страницы Site.master (щелкните, чтобы просмотреть изображение с полным размером)Figure 08: Select the Site.master Master Page (Click to view full-size image)

Как показано в следующей декларативной разметке, Новая страница содержимого содержит директиву @Page, которая указывает на главную страницу и элемент управления содержимым для каждой из элементов управления ContentPlaceHolder главной страницы.As the following declarative markup shows, a new content page contains a @Page directive that points back to its master page and a Content control for each of the master page's ContentPlaceHolder controls.

<%@ 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>

Note

В разделе "Создание простого макета сайта" на шаге 1 я переименовал ContentPlaceHolder1 MainContent.In the "Creating a Simple Site Layout" section in Step 1 I renamed ContentPlaceHolder1 to MainContent. Если не переименовать ID элемента управления ContentPlaceHolder таким же образом, декларативная разметка страницы содержимого будет немного отличаться от показанной выше разметки.If you did not rename this ContentPlaceHolder control's ID in the same way, your content page's declarative markup will differ slightly from the markup shown above. А именно, второй ContentPlaceHolderID элемента управления содержимым будет отражать ID соответствующего элемента управления ContentPlaceHolder на главной странице.Namely, the second Content control's ContentPlaceHolderID will reflect the ID of the corresponding ContentPlaceHolder control in your master page.

При подготовке страницы содержимого подсистема ASP.NET должна запредохранительить элементы управления содержимым страницы с помощью элементов управления ContentPlaceHolder главной страницы.When rendering a content page, the ASP.NET engine must fuse the page's Content controls with its master page's ContentPlaceHolder controls. Подсистема ASP.NET определяет эталонную страницу страницы содержимого на основе MasterPageFile атрибута директивы @Page.The ASP.NET engine determines the content page's master page from the @Page directive's MasterPageFile attribute. Как показано в приведенной выше разметке, эта страница содержимого привязана к ~/Site.master.As the above markup shows, this content page is bound to ~/Site.master.

Так как эталонная страница имеет два элемента управления ContentPlaceHolder — head и MainContent-Visual Web Developer создал два элемента управления содержимым.Because the master page has two ContentPlaceHolder controls - head and MainContent - Visual Web Developer generated two Content controls. Каждый элемент управления содержимым ссылается на конкретный ContentPlaceHolder через свойство ContentPlaceHolderID.Each Content control references a particular ContentPlaceHolder via its ContentPlaceHolderID property.

Когда главные страницы по-прежнему находятся на предыдущих методах шаблона всего сайта, они поддерживаются во время разработки.Where master pages shine over previous site-wide template techniques is with their design-time support. На рис. 9 показана страница About.aspx содержимого при просмотре с помощью представление конструирования Visual Web Developer.Figure 9 shows the About.aspx content page when viewed through Visual Web Developer's Design view. Обратите внимание, что в то время как содержимое главной страницы отображается серым и не может быть изменено.Note that while the master page content is visible, it is grayed out and cannot be modified. Однако элементы управления содержимым, соответствующие элементов управления ContentPlaceHolder главной страницы, могут быть изменены.The Content controls corresponding to the master page's ContentPlaceHolders are, however, editable. И, как и любая другая страница ASP.NET, можно создать интерфейс страницы содержимого, добавив веб-элементы управления с помощью представлений исходного кода или конструктора.And just like with any other ASP.NET page, you can create the content page's interface by adding Web controls through the Source or Design views.

в режиме конструктора страницы содержимого отображаются как содержимое страницы, так и страница главной страницы.The Content Page's Design View Displays Both the Page-Specific and Master Page Contents

Рис. 09. в конструкторе страницы содержимого отображается как содержимое страницы, так и страница главной страницы (щелкните, чтобы просмотреть изображение с полным размером).Figure 09: The Content Page's Design View Displays Both the Page-Specific and Master Page Contents (Click to view full-size image)

Добавление разметки и веб-элементов управления на страницу содержимогоAdding Markup and Web Controls to the Content Page

Уделите немного времени созданию содержимого для страницы About.aspx.Take a moment to create some content for the About.aspx page. Как можно увидеть на рис. 10, я указал заголовок «о авторе» и несколько абзацев текста, но также можете добавить веб-элементы управления.As you can see in Figure 10, I entered an "About the Author" heading and a couple of paragraphs of text, but feel free to add Web controls, too. После создания этого интерфейса посетите страницу About.aspx в браузере.After creating this interface, visit the About.aspx page through a browser.

посетить страницу About. aspx в браузереVisit the About.aspx Page Through a Browser

Рис. 10. посещение страницы About.aspx в браузере (щелкните, чтобы просмотреть изображение с полным размером)Figure 10: Visit the About.aspx Page Through a Browser (Click to view full-size image)

Важно понимать, что запрошенная страница содержимого и связанная с ней эталонная страница имеют плавкие предохранители и полностью подготовлены к просмотру на веб-сервере.It is important to understand that the requested content page and its associated master page are fused and rendered as a whole entirely on the web server. Затем браузер конечного пользователя отправляет полученный код HTML с плавким предохранителем.The end user's browser is then sent the resulting, fused HTML. Чтобы проверить это, просмотрите HTML-код, полученный браузером, выбрав в меню Вид пункт Источник.To verify this, view the HTML received by the browser by going to the View menu and choosing Source. Обратите внимание, что отсутствуют кадры или другие специализированные методы отображения двух разных веб-страниц в одном окне.Note that there are no frames or any other specialized techniques for displaying two different web pages in a single window.

Привязка главной страницы к существующей странице ASP.NETBinding a Master Page to an Existing ASP.NET Page

Как было показано на этом шаге, Добавление новой страницы содержимого в веб-приложение ASP.NET — это так же просто, как установка флажка "выбрать главную страницу" и выбор главной страницы.As we saw in this step, adding a new content page to an ASP.NET web application is as easy as checking the "Select master page" checkbox and picking the master page. К сожалению, преобразование существующей страницы ASP.NET в главную страницу не так просто.Unfortunately, converting an existing ASP.NET page to a master page is not as easy.

Чтобы привязать главную страницу к существующей странице ASP.NET, необходимо выполнить следующие действия.To bind a master page to an existing ASP.NET page you need to perform the following steps:

  1. Добавьте атрибут MasterPageFile в директиву @Page страницы ASP.NET, указывающую на соответствующую главную страницу.Add the MasterPageFile attribute to the ASP.NET page's @Page directive, pointing it to the appropriate master page.
  2. Добавьте элементы управления содержимым для каждого элементов управления ContentPlaceHolder на главной странице.Add Content controls for each of the ContentPlaceHolders in the master page.
  3. Выборочно вырезать и вставить существующее содержимое страницы ASP.NET в соответствующие элементы управления содержимым.Selectively cut and paste the ASP.NET page's existing content into the appropriate Content controls. Я говорю «выборочно», так как страница ASP.NET, вероятно, содержит разметку, уже выраженную главной страницей, например DOCTYPE, элемент <html> и веб-форму.I say "selectively" here because the ASP.NET page likely contains markup that's already expressed by the master page, such as the DOCTYPE, the <html> element, and the Web Form.

Пошаговые инструкции по этому процессу вместе с снимками экрана см. в статье Руководство по использованию главных страниц и навигации по веб-узлу Скотта Гатри (.For step-by-step instructions on this process along with screen shots, check out Scott Guthrie's Using Master Pages and Site Navigation tutorial. Эти действия описаны в разделе "обновление Default.aspx и DataSample.aspx для использования главной страницы".The "Update Default.aspx and DataSample.aspx to use the Master Page" section details these steps.

Поскольку гораздо проще создавать новые страницы содержимого, чем преобразование существующих страниц ASP.NET в страницы содержимого, я рекомендую, что при создании нового веб-сайта ASP.NET на него будет добавлена эталонная страница.Because it is much easier to create new content pages than it is to convert existing ASP.NET pages into content pages, I recommend that whenever you create a new ASP.NET website add a master page to the site. Привяжите все новые страницы ASP.NET к этой эталонной странице.Bind all new ASP.NET pages to this master page. Не беспокойтесь, если начальная Главная страница очень простая или обычная. Вы можете обновить главную страницу позже.Don't worry if the initial master page is very simple or plain; you can update the master page later.

Note

При создании нового приложения ASP.NET в Visual Web Developer добавляется страница Default.aspx, которая не привязана к главной странице.When creating a new ASP.NET application, Visual Web Developer adds a Default.aspx page that isn't bound to a master page. Если вы хотите попрактиковаться в преобразовании существующей страницы ASP.NET в страницу содержимого, сделайте это с помощью Default.aspx.If you want to practice converting an existing ASP.NET page into a content page, go ahead and do so with Default.aspx. Кроме того, можно удалить Default.aspx, а затем повторно добавить его, но на этот раз установив флажок "выбрать главную страницу".Alternatively, you can delete Default.aspx and then re-add it, but this time checking the "Select master page" checkbox.

Шаг 3. обновление разметки главной страницыStep 3: Updating the Master Page's Markup

Одно из основных преимуществ главных страниц состоит в том, что одну главную страницу можно использовать для определения общего макета для множества страниц на сайте.One of the primary benefits of master pages is that a single master page may be used to define the overall layout for numerous pages on the site. Таким образом, обновление внешнего вида сайта требует обновления одного файла — главной страницы.Therefore, updating the site's look and feel requires updating a single file - the master page.

Чтобы продемонстрировать это поведение, обновите главную страницу, включив в нее текущую дату в верхней части левого столбца.To illustrate this behavior, let's update our master page to include the current date in at the top of the left column. Добавьте метку с именем DateDisplay в <div>``leftContent.Add a Label named DateDisplay to the 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 для главной страницы и добавьте следующий код:Next, create a Page_Load event handler for the master page and add the following code:

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

Приведенный выше код задает для свойства Text метки текущую дату и время в формате дня недели, название месяца и двузначное обозначение дня (см. рис. 11).The above code sets the Label's Text property to the current date and time formatted as the day of the week, the name of the month, and the two-digit day (see Figure 11). После этого изменения перейдите на одну из страниц содержимого.With this change, revisit one of your content pages. Как показано на рис. 11, полученная разметка немедленно обновляется для включения изменений на главную страницу.As Figure 11 shows, the resulting markup is immediately updated to include the change to the master page.

изменения на главной странице отображаются при просмотре страницы содержимогоThe Changes to the Master Page are Reflected When Viewing the a Content Page

Рис. 11. изменения, внесенные в главную страницу, отображаются при просмотре страницы содержимого (щелкните, чтобы просмотреть изображение с полным размером)Figure 11: The Changes to the Master Page are Reflected When Viewing the a Content Page (Click to view full-size image)

Note

Как показано в этом примере, главные страницы могут содержать веб-элементы управления, код и обработчики событий на стороне сервера.As this example illustrates, master pages may contain server-side Web controls, code, and event handlers.

СводкаSummary

Главные страницы позволяют разработчикам ASP.NET создавать единообразные макеты всего сайта, которые легко обновлять.Master pages enable ASP.NET developers to design a consistent site-wide layout that is easily updateable. Создание главных страниц и связанных с ними страниц содержимого сводится к созданию стандартных страниц ASP.NET, так как Visual Web Developer обеспечивает расширенную поддержку во время разработки.Creating master pages and their associated content pages is as simple as creating standard ASP.NET pages, as Visual Web Developer offers rich design-time support.

Пример главной страницы, созданный в этом руководстве, содержал два элемента управления ContentPlaceHolder, head и MainContent.The master page example we created in this tutorial had two ContentPlaceHolder controls, head and MainContent. Однако мы указали разметку для элемента управления MainContent ContentPlaceHolder на странице содержимого.We only specified markup for the MainContent ContentPlaceHolder control in our content page, however. В следующем учебном курсе мы рассмотрим использование нескольких элементов управления содержимым на странице содержимого.In the next tutorial we look at using multiple Content controls in the content page. Мы также посмотрим, как определить разметку по умолчанию для элементов управления содержимым на главной странице, а также как переключаться между использованием разметки по умолчанию, определенной на главной странице, и предоставлением пользовательской разметки на странице содержимое.We also see how to define default markup for Content controls within the master page, as well as how to toggle between using the default markup defined in the master page and providing custom markup from the content page.

Поздравляем с программированием!Happy Programming!

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

Дополнительные сведения о разделах, обсуждаемых в этом руководстве, см. в следующих ресурсах:For more information on the topics discussed in this tutorial, refer to the following resources:

Об автореAbout the Author

Скотт Митчелл, автор нескольких книг по ASP/ASP. NET и основатель 4GuysFromRolla.com, работал с веб-технологиями майкрософт с 1998.Scott Mitchell, author of multiple ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies since 1998. Скотт работает как независимый консультант, преподаватель и модуль записи.Scott works as an independent consultant, trainer, and writer. Его последняя книга — Sams обучать себя ASP.NET 3,5 за 24 часа.His latest book is Sams Teach Yourself ASP.NET 3.5 in 24 Hours. Скотт можно получить по адресу mitchell@4GuysFromRolla.com или через свой блог по адресу http://ScottOnWriting.NET.Scott can be reached at mitchell@4GuysFromRolla.com or via his blog at http://ScottOnWriting.NET.

Специальная благодарностьSpecial Thanks To

Хотите ознакомиться с моими будущими статьями MSDN?Interested in reviewing my upcoming MSDN articles? Если это так, расположите строку в mitchell@4GuysFromRolla.com.If so, drop me a line at mitchell@4GuysFromRolla.com.