Краткий обзор мастер-страниц (Master Pages) в ASP.NET 2.0
ОГЛАВЛЕНИЕ
При создании веб-приложений ASP.NET 1.x вам часто придется использовать пользовательские элементы управления для верхней (header) и нижней (footer) частей страниц (User Control). Пользовательские элементы управления для верхней части страницы обычно содержат начальный <html> элемент вместе с тем содержимым, которое мы желаем отображать в верхней части каждой страницы. Пользовательские элементы управления для нижней части страницы могут содержать общую для всех страниц информацию, отображенную в нижней части, закрывающий </html>, а также все сопутствующие тэги. Это применимо тогда, когда верстка вашего сайта может быть разделена на верхний и нижний HTML-блоки, но что делать в других случаях?
При использовании ASP.NET 1.x у вас не будет возможности создать сайт, обладающий соответствующим сценарием диалога с пользователем. Да, вы можете применить пользовательские элементы управления как описано выше, но вам придется вручную добавлять стандартные пользовательские элементы управления на каждую страницу. Более того, пользовательские элементы управления не обрабатываются в Visual Studio .NET в виде маленьких серых прямоугольников, тем самым нейтрализуются достоинства VS.NET Designer относительно способа редактирования WYSIWYG. Более практичной техникой предоставления соответствующей верстки сайта в ASP.NET 1.x является использование мастер-страниц (MasterPages). Уже не раз говорилось, что мастер-страница предоставляет средства для определения общего сценария диалога с пользователем при помощи редактируемых областей содержимого. Страница может использовать мастер-страницу, тем самым унаследовать стандартизированный сценарий диалога с пользователем, и все что останется разработчику, это настроить редактируемые области.
К сожалению, ASP.NET 1.x не предоставляет поддержку для мастер-страниц в Visual Studio .NET. Однако это было исправлено в ASP.NET 2.0. Visual Studio 2005 обладает богатой WYSIWYG поддержкой мастер-страниц. В данной статье мы ознакомимся с поддержкой мастер-страниц в Visual Studio 2005 и ASP.NET 2.0. Данная статья не углубляется во всю суть мастер-страниц. В добавок, данная статья была написана во время существования Beta 1 версии ASP.NET 2.0; скриншоты/инструкции, рассматриваемые здесь, могут отличаться от версий, выполненных в ASP.NET 2.0/Visual Studio 2005. Вы можете загрузить последнюю версию 2.0 beta по данной ссылке http://labs.msdn.microsoft.com/.
Краткое ознакомление с мастер-страницами (MasterPages)
Назначением мастер-страниц является предоставление легкого пути создания шаблона сайта. Работа с мастер-страницами подразумевает создание HTML-страницы с редактируемыми областями. Данные области, называемые местами для информации (content placeholders), представляют собой части шаблона, которые впоследствии будут настроены для каждой страницы. Область, находящаяся за данными местами, будет общей для всех страниц на сайте и не редактируется для каждой из страниц.
Например, представьте, что мы хотим создать шаблон сайта, похожий на следующее изображение.
С данной разметкой, давайте предположим, что шапка статическая и отображает один и тот же текст на всех страницах. Тем не менее, основное содержимое и область меню будут различиться. Помните, что используя ASP.NET 1.x и Visual Studio .NET единственным выходом для реализации такой идеи будет выполнение одного из следующих вариантов:
- Реализовать необходимый HTML на каждой странице сайта
- За: Visual Studio .NET обладает богатой средой разработки WYSIWYG.
- Против: Если мы хотим изменить вид нашего сайта, нам придется редактировать каждую его страницу!
- Реализовать верстку при помощи пользовательских элементов управления для верхней и нижней частей страниц (User Control), добавленных на каждую страницу
- За: Чтобы произвести изменения на сайте необходимо изменить максимум два файла - содержащие пользовательские элементы управления для верхней и нижней частей страниц.
- Против: Вам нужно вручную добавить данные элементы управления на все страницы; никакой поддержки WYSIWYG.
- Использовать поддержку мастер-страниц в ASP.NET 1.x
- За: Вы легко сможете изменить верстку вашего сайта путем редактирования только мастер-страницы ; предоставляет более гибкую верстку, по сравнению с использованием пользовательских элементов управления для верхней и нижней частей страниц.
- Против: Никакой поддержки способа WYSIWYG во время редактирования в VS.NET.
К счастью, при использовании ASP.NET 2.0 и Visual Studio 2005 мастер-страницы предоставляют поддержку различных возможностей во время редактирования. Тем самым, мы можем испытать на себе все достоинства наличия способа WYSIWYG во время разработки, в то время как верстка сайта и содержимое страницы будут существовать раздельно друг от друга, что позволяет произвести изменения на сайте с наименьшими усилиями. Остальная часть данной статьи демонстрирует способ реализации приведенного примера верстки сайта при помоши мастер-страниц в ASP.NET 2.0.
Создание мастер-страницы в Visual Studio 2005
При создании нового веб-сайта в Visual Studio 2005, вы наверняка захотите сначала создать мастер-страницу. Чтобы создать новую мастер-страницу, вам необходимо просто добавить новый объект в проект (Project), который отобразит окно добавления нового объекта (Add New Item), как на изображении внизу. Находясь в данном диалоговом окне, просто выберите и добавьте объект под названием MasterPage (мастер-страница). Как вы уже могли заметить на изображении, мастер-страницы имеют расширение .master.
Заметьте, что когда вы добавляете мастер-страницу, вам необходимо выбрать для нее язык программирования (Visual Basic, C#, или J#). Как вы уже могли догадаться, мастер-страницы поддерживают код серверной стороны. Например, вы можете добавить код в обработчик события Page_Load. Это также полезно в случае, если вы хотите создать мастер-страницу, обладающую содержимым, которое не должно быть редактируемо на каждой странице, но, тем не менее, будет динамическим. К примеру, вы хотите отобразить имя авторизированного пользователя в правом верхнем углу; или же вам нужно отобразить количество авторизированных на данный момент пользователей в верхней части страницы.
После создания новой мастер-страницы, вы можете добавить содержимое на данную мастер-страницу при помощи конструктора (Designer), как показано в следующем изображении, либо воспользоваться декларативным методом. Как показано в следующем изображении, новая мастер-страница содержит только область содержимого. Вспомните, что место для содержимого в мастер-странице оформляется для каждой из страниц отдельно.
Мастер страница может обладать несколькими областями для содержимого. Чтобы добавить новую область для содержимого в конструкторе (Designer), просто перетащите и киньте элемент управления ContentPlaceholder из Toolbox. Вы также можете добавить элемент ContentPlaceholder декларативным методом в режиме просмотра HTML. Элемент ContentPlaceholder, как и любые другие элементы управления, имеет свой собственный декларативный синтаксис, как показано ниже:
<asp:contentplaceholder id="mainContent" runat="server"> </asp:contentplaceholder>
Для того чтобы создать дизайн, похожий на тот, что мы рассмотрели ранее, я создал мастер-страницу с двумя областями содержимого: одну область - для основной информации слева, и другую - для меню справа. Также на мастер-страницу была добавлена статическая шапка. На данном этапе все выглядит так, как показано на изображении, приведенном ниже:
Вы можете заметить, что шапка статическая, и на ней написано "Welcome to My Web Site!" ("Добро пожаловать на мой веб-сайт!"). Далее следуют две области содержимого: mainContent – область, находящаяся слева, и menuContent - находящаяся справа. На данном этапе мы завершили создание нашей мастер-страницы. Как мы увидим далее, при создании новой ASP.NET- страницы мы можем указать то, что страница ASP.NET должна использовать определенную мастер-страницу. Оттуда мы можем настроить определенные редактируемые области содержимого на странице.
Создание страницы ASP.NET на основании мастер-страницы
Как только вы создали мастер-страницу, при создании страницы ASP.NET вам нужно будет указать, какие именно страницы должны унаследовать верстку от данной мастер-страницы. При добавлении новой веб-страницы в проект, вы можете указать, что она использует определенную мастер-страницу, как это показано в следующем изображении:
Если вы выберете опцию "Select master page" ("Выбрать мастер-страницу") , вы будете переведены в диалоговое окно, которое попросит вас выбрать ту мастер-страницу, которая будет основой для страницы ASP.NET. Следующее изображение показывает данное диалоговое окно. Так как мы создали только одну мастер-страницу (она называется MasterPage.master), то в списке доступна только одна мастер-страница. Тем не менее, на сайте может быть несколько мастер-страниц, так как вам может понадобиться наличие различного дизайна для различных областей сайта.
Как только вы выберете мастер-страницу, будет создана новая страница ASP.NET. Содержимое страницы ASP.NET очень минималистично - вместо того, чтобы хранить стандартный текст HTML-разметки, которую имеет новая страница ASP.NET без мастер-страницы, наша новая страница ASP.NET просто содержит ссылку на выбранную мастер-страницу:
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %>
Это все, что касается страницы ASP.NET! Если вы откроете конструктор, то вы сможете увидеть полную верстку данной мастер-страницы. Отсюда же вы можете добавить элементы управления и разметку для областей содержимого, но разметка, находящаяся за пределами данной области недоступна, а следовательно, ее невозможно изменить, находясь на данной странице. Следующее изображение демонстрирует нашу страницу ASP.NET после того, как была добавлена информация в область содержимого.
После того, как вы добавили необходимую информацию на странице ASP.NET, при переходе обратно в режим просмотра HTML вы сможете увидеть добавленные элементы управления содержимого (Content controls), которые хранят в себе элементы и разметку, указанную вами в конструкторе. После внесения некоторой информации в обе области содержимого декларативный синтаксис нашей страницы ASP.NET должен выглядеть следующим образом:
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="mainContent" Runat="server">Welcome
to my Web site. You are visiting the home page. You can visit other
pages by clicking the links on the right.</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="menuContent" Runat="server">Home<br />
<a href="Sports.aspx">Sports</a><br />
<a href="FavFolks.aspx">My Favorite People</a><br />
<a href="http://www.google.com/">Google</a></asp:Content>
Заметьте, как использование мастер-страниц разделяет верстку, и содержимое страницы ASP.NET. HTML-верстки хранится в мастер-странице; страница ASP.NET содержит лишь содержимое конкретной страницы. Данное разделение предоставляет возможность изменения верстки и стиля сайта целиком путем редактирования только мастер-страницы. То есть, если вы хотите изменить текст, например, в шапке, вам всего лишь придется отредактировать файл MasterPage.master. После внесения данного изменения любой пользователь, зашедший на вашу ASP.NET-страницу, использующую мастер-страницу, увидит новый текст.
Вывод
В данной статье мы привели краткий обзор мастер-страниц (MasterPages) в ASP.NET 2.0. Мастер-страницы уже не являются новинкой, так как ASP.NET 1.x уже поддерживало их. Интересным фактом является то, что Visual Studio 2005 предоставляет богатую поддержку мастер-страниц в режиме проектирования - то, чего так не хватало в Visual Studio .NET. Используя мастер-страницы, вы можете достичь истинного разделения между разметкой верстки и разметкой содержимого вашего сайта. Теперь вы сможете создать сайт, обладающий соответствующим сценарием диалога с пользователем, а также с легкостью обновить весь сайт иным стилем.
Веселого программирования!
Scott Mitchell