19.12.2011
В первой половине этого урока мы разобрали базовые возможности инструмента 'Razor' для создания страниц. Теперь пришла пора взглянуть на него несколько с иной точки зрения.
Создание страницы размещения
Мы создали страницу, а затем использовали Razor для автоматического вывода той или иной информации - когда страница отображалась, появлялись заголовок и код нижнего колонтитула. Это называется подход "снизу вверх".
Другой, и, возможно, более эффективный подход заключён в обратном. Создается Layout (условно будем называть его "слой", поскольку вы накладываете их последовательно один за другим), который вы используете в качестве шаблона для каждой страницы, и затем вставляете в него определенный контент (какой хотите). Это большое преимущество данного подхода.
Давайте посмотрим, как это работает: создайте новую страницу CSHTML, и назовите ее _siteLayout.cshtml.
Замените контент страницы, которую создавали, на следующий. Это кажется вам знакомым, так как это все и есть содержание страницы default.html, которую вы создавали ранее:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />
<title>My Favorite Movies</title> <link rel="stylesheet" type="text/css" href="movies.css" />
</head> <body> <header> <h1>A list of my Favorite Movies</h1> </header>
<div id="movieslist"> <ol> <li><a href="#">It's a wonderful life</a></li>
<li><a href="#">Lord of the Rings</a></li> <li><a href="#">The Fourth World</a></li>
<li><a href="#">The Lion King</a></li> </ol> </div> <div id=”footer”> <footer>
This site was built using Microsoft WebMatrix.
<a href="http://web.ms/webmatrix">Download it now.</a> </footer> </div> </body> </html>
Теперь удалите ‘movieslist’ <div> и замените его следующим кодом:
@RenderBody()
Помните, ранее мы рассказывали, что символ @ дает команду WebMatrix выполнять код на сервере (соответствующий этой команде или функции). Функция RenderBody просто дает команду WebMatrix представлять контент страницы в этом слое.
Вот как должна выглядеть ваша страница _siteLayout.cshtml:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />
<title>My Favorite Movies</title> <link rel="stylesheet" type="text/css" href="movies.css" />
</head> <body> <header> <h1>A list of my Favorite Movies</h1>
</header> @RenderBody() <div id=”footer”> <footer>
This site was built using Microsoft WebMatrix.
<a href="http://web.ms/webmatrix">Download it now.</a> </footer> </div> </body> </html>
Когда дело касается страницы, называемой movies.cshtml, которую вы создавали до этого, необходимо использовать редактировать страницы, добавлять теги разметки <div>,<ol> и <li>. Задумайтесь над простым фактом - когда вы просматриваете страницу CSHTML, WebMatrix будет использовать файлы слоев, чтобы определить, как поменять страницу, таким образом, чтобы она содержала CSS и все элементы указанные в соответствующих слоях.
Перед проверкой не забывайте удалять команды @RenderPage ("PageHeader.cshtml") и @RenderPage ("PageFooter.cshtml") из movies.cshtml.
Сообщите WebMatrix, как использовать файл слоев
Теперь, вы, вероятно, думаете: "как он узнает, что необходимо использовать _siteLayout.cshtml для моей страницы movies.cshtml?" Ответ прост - он не делает этого. Мы должны сообщить WebMatrix о необходимости использования данной страницы.
К счастью, это довольно легко сделать.
Если вы создадите страницу под названием _PageStart.cshtml, то эта страница будет проименовываться каждый раз, когда WebMatrix будет запускать страницу CSTHML (или VBHTML).
Хорошо использовать это для установки глобальных переменных или функций. Здесь мы только сообщим webmatrix, что слои для всего сайта будет задаваться в _siteLayout.cshtml.
Двинемся дальше и создадим _PageStart.cshtml.
Замените этот контент следующим:
@{ Layout = "~/_siteLayout.cshtml"; }
Запустите movies.cshtml и посмотрите на нее теперь в браузере.
Если вы попытаетесь запустить свой _siteLayout.cshtml или _PageStart.cshtml, то получите ошибку. Если ошибка появится во время загрузки файла, убедитесь в том, что файл movies.cshtml правильно выбран в каталоге в WebMatrix.
Объединим все это
Так что только произошло? Давайте посмотрим пошагово, что сделал WebMatrix, чтобы загрузить вашу страницу:
- Браузер сделал запрос на сервер к movies.cshtml
- Сервер увидел, что _PageStart.cshtml существует, таким образом, понял, что использовать её возможно. Использовалась только одна строка кода, которая установила переменную слоя, сообщив о том, что Layout для сайта находится в файле siteLayout.cshtml
- Сервер запустил siteLayout.cshtml, чтобы собрать страницу. Использовались теги <head>, <body> а так же CSS в статической странице HTML
- Сервер добрался до кода, который содержит @RenderBody (), который выводил контент на страницу movies.cshtml
- Сервер получил остальную часть кода от siteLayout.cshtml, завершая страницу.
- Полная страница была возвращена браузеру, с полностью смоделированной информацией.
Добавление другой страницы.
Преимущества этого подхода на лицо, и мы можем продемонстрировать это, показав объем работы, который вы должны сделать, чтобы создать другую страницу.
Используя WebMatrix, создайте другую страницу под названием about.cshtml.
Замените весь контент about.cshtml следующим:
<h1>About me</h1>
<h2>I'm the author of this page. I should put something interesting here.</h2>
Теперь посмотрите about.cshtml. Выполнится тот же самый процесс, обрисованный в общих чертах в предыдущем разделе. Кроме этого, когда страница _siteLayout.cshtml достигнет @RenderBody ()и представит контент из вашей страницы about.cshtml, результат будет похож на следующий:
Заметили, что заголовок и нижний колонтитул страницы остались? Теперь, если я хочу отредактировать страницу, я не должен капаться в структуре страницы. Вместо этого достаточно отредактировать контент, который находится в пределах основной части страницы. Это поможет сэкономить вам много времени и усилий в написании кода для ваших сайтов.
Забавно как много можно сделать самостоятельно, в стиле похожем на включаемые области какой-нибудь системы управления контентом (например, 1С-Битрикс ASP.NET) и вставить в WebMatrix.
Заключение
В этой статье вы увидели, как использование встроенного механизма слоев в WebMatrix может облегчить создание сайтов, так как весь код для всех ваших страниц помещается в файлы слоев. Вы создавали свои первые динамические страницы (то есть страницы, которые создавались непрерывно вашим сервером вместо файлов в файловой системе сервера), используя C7gN5dS и синтаксис 'Razor'.
В следующем разделе вы копнете глубже в синтаксис Razor, заменяя статический список фильмов тем, который управляется от базы данных. WebMatrix интегрирует SQL-сервер в компактную базу данных, которая свободно управляется файлом базы данных, как рядом инструментов базы данных для создания и управления баз данных. Вы узнаете, как создавать базу данных, добавлять поля, добавлять данные, и затем писывать код, который будет брать ваши данные и загружать его на страницу каждый раз, когда пользователь вызывает вашу страницу!
К сожалению, эту статью пришлось разбить на 2 урока, однако я надеюсь, что прочитав её окончание вы поняли причину по которой мне пришлось на это пойти - мы использовали два совершенно разных подхода для использования слоём и включаемых областей (даже целых страниц!) в наш сайт.
В следующей части вы узнаете о создании данных с использованием вашего приложения WebMatrix, создаваемого в функциях управления данными.
19 декабря
Задойный А.В.
P.S. С каждой следующей статьёй я рассматриваю всё более и более сложные примеры. Возможно кому-то из читателей уже стали непонятны те или иные моменты. Прошу - не молчите - задавайте свои вопросы на форуме - я обязательно отвечу на них и внесу соответствующие правки в текст статьи, если это потребуется.
