19.12.2011
Примечание автора: данный урок так же, как и предыдущий будет разбит на 2 части (начало, окончание). К сожалению, если оставлять их единым целым, то текст получается слишком большой и тяжело воспринимается (проверено на коллегах)
До этого момента вы узнали то, как использовать WebMatrix для создания простой веб-страницы, и то, как эта страница будет работать в различных браузерах. Используя моделирование CSS, вы научились изменять основную страницу так, чтобы она выглядела более симпатичной.
В этой главе необходимо будет применить эти знания, чтобы перейти к следующему уровню и начать использовать программирование серверной части. Вы уже привыкли к разработке клиентского приложения, которое работает в телефоне, на рабочем столе, или даже к приложениям JavaScript, которые работают в пределах браузера. При программировании серверной части большой недостаток заключается в том, что вам необходимо написать большую часть кода программы, которая не работает на клиентском устройстве. Во избежании такой ситуации конечному пользователю достаточно сделать запрос к странице на сервере. Если эта страница окажется "активной", код выполнится на сервере, сгенерируется разметка HTML и значения переменных, которые отправляются браузеру. В этом случае браузер обработает HTML-код, и пользователи увидят результат.
Так как вы уже улучшили свои навыки, вы поймете, что иногда имеет смысл смешивать некоторые вещи с кодом, работающим в вашем браузере (обычно используется JavaScript, или такая технология Rich Internet Application (RIA), как Silverlight), и остальные приложения, работающие на вашем сервере.
WebMatrix представляет синтаксис Razor для того, чтобы разработать веб-страницы. Одна из функций, которая позволяет делать это, является мощным, но все же простым, механизмом размещения. В этой статье мы рассмотрим использование функций размещения, чтобы поместить весь HTML-код от заголовка до контента нижнего колонтитула в одно место и сгенерировать его автоматически для вашей страницы. Когда вы создаете такую страницу, в которой отображаете список фильмов, файл этой страницы будет иметь основное содержание фильмов для этой страницы, а остальные будут добавлены под вашим чутким руководством.
Создание страницы CSHTML, с использованием Razor
До сих пор вы создавали страницы HTML, которые используют расширение .htm или .html. Это статические страницы, когда при каждом обращении к адресу браузера, сервер просто отправляет их браузеру. Сервер при этом не обрабатывает каждый раз страницу.
Возможно, вы уже слышали о веб-страницах, называющихся «Динамическими». Это страницы, собирающиеся сервером, основанные также на HTML, который работает на сервере, чтобы определить, как необходимо создавать страницу с выводом HTML. Динамические страницы дают вам действительно мощные возможности. В остальных частях статьи вы так же будете использовать именно динамические страницы. По сравнению с уже приведёнными примерами, они позволяют сохранять фильмы в базе данных и иметь доступ к серверу, генерирующему контент для страницы с данными. Существует возможность вывода списка заголовков фильмов вместо вас на вашей HTML странице, и есть возможность изменения вашей страницы каждый раз, когда хотите изменить свой список фильмов.
В этом разделе вы создадите свою первую динамическую страницу.
В WebMatrix у динамических веб-страниц есть расширение .CSHTML или.VBHTML. Это эффективные файлы HTML со встроенным кодом, записанным или в C7gN5dS (CS), или в Visual Basic (VB). Я буду использовать файлы CSHTML, которые позволяют мне писать встроенный код на странице с использованием языка C7gN5dS. Эта методология и синтаксис, которые позволяет мне встроить код в HTML называется 'Razor'.
Итак, давайте создадим свою первую динамическую страницу.
Используя WebMatrix, в рабочем пространстве Files создадим новую страницу CSHTML под названием movies.cshtml:
WebMatrix создаст страницу, которая похожа на основную страницу HTML. Замените контент этой страницы следующим:
<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>
Разве он не выглядит странным? Нет никаких тегов, ни <head> , ни <body>. Представьте, что это еще и работает! Или по крайней мере немного. Запустите этот код и увидете следующее:
Заголовок и Нижний колонтитул
Теперь вышепоказанная страница выглядит подобно тому, что мы делали ранее. Давайте определим верхний колонтитул страницы, как и в HTML перед <div>, содержащий список фильмов, и нижний колонтитул страницы, как и в HTML страницах предыдущих частей после <div>, содержащий список фильмов. Не путайте это с тегами <header> и <footer> на странице default.cshtml, с которыми вы работали до этого.
Создайте новую страницу с именем 'PageHeader.cshtml' и скопируйте в нее все, что было написано выше moviesList <div> из default.chtml. Должно получиться вот так:
<!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>
По аналогии создайте новую страницу с именем 'PageFooter.cshtml' и скопируйте в нее все, что ниже moviesList <div> из default.chtml. Должно получиться вот так::
<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>
Используйте Razor, чтобы динамически добавить заголовок и нижний колонтитул
Теперь, когда у вас есть этот результат, запишите свою первую часть серверного кода, используя 'Razor'. WebMatrix определяет отличия между HTML и кодом 'Razor' при помощи символа @. Вы помещаете этот символ перед любыми строками кода, которые являются инструкциями к серверу, сообщая серверу, что необходимо сделать.
Вот, например, следующая команда:
@RenderPage ("pagename") заставляет сервер загружать HTML из файла 'pagename' и помещать его (Html код конечно, а не файл) в пределах текущего файла. Так, для примера, после изменений movies.cshtml код должен быть похож на этот:
@RenderPage("PageHeader.cshtml")
<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> @RenderPage("PageFooter.cshtml")
Когда вы запустите страницу, она будет похожа на эту:
Также появился статический файл HTML. Это не удивительно, потому что у него теперь есть тот же самый заголовок и нижний колонтитул (включая код, запроса на то, чтобы страница загрузила CSS), и такой же основной текст. Но как вы могли заметить, теперь намного легче работать со страницей, поскольку весь код для заголовка и нижнего колонтитула не берётся из самого файла, и у любых новых страниц, которые вы создаете, будут те же самые заголовок, нижний колонтитул и таблица стилей.
Во второй половине данного урока я расскажу о создании страницы, когда мы сперва создаём слои и правила для CSS, а потом уже собираем страницу (т.е. по сути, выполняем все операции с точностью до наоборот). Данный способ так же имеет право на существование и некоторым он удобнее в работе с WebMatrix.
19 декабря 2011 г
Задойный А.В.
