Чтобы поддерживать единый стиль дизайна и ускорить процесс разработки, структура сайта построена на основе страниц макета и страниц представления. Страница макета содержит общие дизайн и общий контент для других страниц сайта. Окончательный результат достигается слиянием макета и содержания, в результате в браузер отправляются страницы с единым HTML стилем. Возможность автоматического слияния контента нескольких страниц не доступна кодировании на чистом HTML, а только веб-технологиям с внедряемым программным кодом: ASP.NET, PHP, Python и др.
Страница макета это поле размещения общего контента для дочерних страниц содержания. Страницы макета уровневые и могут быть вложены в друг друга. Принадлежность веб-страницы к макету условна и определяется лишь наличием вызовов некоторых методов. Так на странице макета должны присутствовать вызов метода @RenderBody(...)
и необязательно одной и более секций @RenderSection(...)
.
Листинг страницы макета на движке Razor:
@*
Как видно из расширения файла уровневой страницы _Layout.cshtml
оно не отличается от других страниц .cshtml. Принадлежность к
странице макета определяется только наличием на ней обязательного запроса
тела страницы содержания:
@RenderBody(),
на странице макета возможно объявление одной или нескольких секций
внедрения кода со страниц содержания:
@RenderSection([название секции], required: [обязательность секции на странице содержания])
*@
@*
@Page.Title - динамически создаваемая переменная
в которой на дочерних страницах содержания
будет определяться контент Title веб-страницы
*@
<!DOCTYPE html>
<html>
<head>
<title>@Page.Title</title>
<meta charset="utf-8" />
@*
Объявление секции для
ключевых слов и мета-описания,
"required: false" - определение необязательности присутствия данной секции на страницах содержания.
Секций на странице уровня можно создавать сколько угодно много,
для большей динамичности и интерактивности сайта.
*@
@RenderSection("meta", required: false)
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="js/main.js" type="text/javascript"></script>
</head>
<body>
@*
Место для общего дизайна верхней части веб-страниц: заголовка,
меню, рекламного контента и т.д.
*@
@* Место вставки контента страницы содержания*@
@RenderBody()
@*
Место для общего дизайна нижней части веб-страниц:
дополнительного меню, подвала, рекламного контента и т.д.
*@
</body>
</html>
Страница представления на движке Razor должна иметь определение адреса макета между символами @{...}
, например: @{Layout = "~/_LayoutMain.cshtml";}
. И если в макете были объявлены обязательные секции: @RenderSection("meta", required: true)
, то в дочерних страницах также строго должны быть определены указанные секции. В случае если присутствие секций необязательно:
@RenderSection("meta", required: false)
, определение можно проигнорировать. Дочерняя страница, в свою очередь, сама может являться макетом для других страниц содержания при размещении в ее теле кода @RenderBody()
и возможного объявления секций @RenderSection(...)
.
Листинг дочерней страницы содержания на движке Razor:
@*
Страница содержания должна обязательно иметь адрес
страницы макета между символами @{...} :
Layout = "[название страницы макета].cshtml.
Кроме того, если в макете объявлены обязательные
секции (например, @RenderSection("meta", required: true)),
то на странице содержания обязательно должно быть
определение данной секции.
*@
@{
// Присвоение значения динамической переменной
Page.Title = "Пример сайта на движке Razor";
// Страница макета
Layout = "~/_Layout.cshtml";
// Определение программных объектов
Util _util = new Util();
}
@* Определим содержание секции meta для ключевых слов и мета-описания страницы *@
@section meta{
<meta content="ASP.NET,PHP,Perl,Ruby,Tomcat,Python,Django, razor" name="keywords" />
<meta content="Windows хостинг для ASP.NET, MVC, Razor, Web Forms.
UNIX хостинг для PHP, Perl, Ruby, Tomcat, Python, Django" name="description" />
}
@*
Тело страницы содержания,
вставляется в макет в месте размещения
*@