Веб разработка 101: Часть 4, Использование размещения (начало)


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:

Веб разработка 101: Часть 4, Использование размещения (начало)

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>. Представьте, что это еще и работает! Или по крайней мере немного. Запустите этот код и увидете следующее:

Веб разработка 101: Часть 4, Использование размещения (начало)

Заголовок и Нижний колонтитул

Теперь вышепоказанная страница выглядит подобно тому, что мы делали ранее. Давайте определим верхний колонтитул страницы, как и в 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")

Когда вы запустите страницу, она будет похожа на эту:

Веб разработка 101: Часть 4, Использование размещения (начало)

Также появился статический файл HTML. Это не удивительно, потому что у него теперь есть тот же самый заголовок и нижний колонтитул (включая код, запроса на то, чтобы страница загрузила CSS), и такой же основной текст. Но как вы могли заметить, теперь намного легче работать со страницей, поскольку весь код для заголовка и нижнего колонтитула не берётся из самого файла, и у любых новых страниц, которые вы создаете, будут те же самые заголовок, нижний колонтитул и таблица стилей.

Во второй половине данного урока я расскажу о создании страницы, когда мы сперва создаём слои и правила для CSS, а потом уже собираем страницу (т.е. по сути, выполняем все операции с точностью до наоборот). Данный способ так же имеет право на существование и некоторым он удобнее в работе с WebMatrix.

19 декабря 2011 г

 Задойный А.В.


автоматы Вулкан Удачи

Веб разработка 101: Часть 4, Использование размещения (начало)

<p style="text-align: justify; "><i><font color="#00a650">Примечание автора:</font> данный урок так же, как и предыдущий будет разбит на 2 части (</i><a href="/information/veb_razrabotka_101_chast_3_sozdanie_stiley_nachalo/" >начало</a><i>, </i><a href="/information/veb_razrabotka_101_chast_3_sozdanie_stiley_okonchanie/" >окончание</a><i>). К сожалению, если оставлять их единым целым, то текст получается слишком большой и тяжело воспринимается (проверено на коллегах) </i></p> <p style="text-align: justify; ">До этого момента вы узнали то, как использовать WebMatrix для создания простой веб-страницы, и то, как эта страница будет работать в различных браузерах. Используя моделирование CSS, вы научились изменять основную страницу так, чтобы она выглядела более симпатичной.</p> <p style="text-align: justify; ">В этой главе необходимо будет применить эти знания, чтобы перейти к следующему уровню и начать использовать программирование серверной части. Вы уже привыкли к разработке клиентского приложения, которое работает в телефоне, на рабочем столе, или даже к приложениям JavaScript, которые работают в пределах браузера. При программировании серверной части большой недостаток заключается в том, что вам необходимо написать большую часть кода программы, которая не работает на клиентском устройстве. Во избежании такой ситуации конечному пользователю достаточно сделать запрос к странице на сервере. Если эта страница окажется &quot;активной&quot;, код выполнится на сервере, сгенерируется разметка HTML и значения переменных, которые отправляются браузеру. В этом случае браузер обработает HTML-код, и пользователи увидят результат.</p> <p style="text-align: justify; ">Так как вы уже улучшили свои навыки, вы поймете, что иногда имеет смысл смешивать некоторые вещи с кодом, работающим в вашем браузере (обычно используется JavaScript, или такая технология Rich Internet Application (RIA), как Silverlight), и остальные приложения, работающие на вашем сервере.</p> <p style="text-align: justify; ">WebMatrix представляет синтаксис Razor для того, чтобы разработать веб-страницы. Одна из функций, которая позволяет делать это, является мощным, но все же простым, механизмом размещения. В этой статье мы рассмотрим использование функций размещения, чтобы поместить весь HTML-код от заголовка до контента нижнего колонтитула в одно место и сгенерировать его автоматически для вашей страницы. Когда вы создаете такую страницу, в которой отображаете список фильмов, файл этой страницы будет иметь основное содержание фильмов для этой страницы, а остальные будут добавлены под вашим чутким руководством.</p> <h2>Создание страницы CSHTML, с использованием Razor</h2> <p style="text-align: justify; ">До сих пор вы создавали страницы HTML, которые используют расширение .htm или .html. Это статические страницы, когда при каждом обращении к адресу браузера, сервер просто отправляет их браузеру. Сервер при этом не обрабатывает каждый раз страницу.</p> <p style="text-align: justify; ">Возможно, вы уже слышали о веб-страницах, называющихся «Динамическими». Это страницы, собирающиеся сервером, основанные также на HTML, который работает на сервере, чтобы определить, как необходимо создавать страницу с выводом HTML. Динамические страницы дают вам действительно мощные возможности. В остальных частях статьи вы так же будете использовать именно динамические страницы. По сравнению с уже приведёнными примерами, они позволяют сохранять фильмы в базе данных и иметь доступ к серверу, генерирующему контент для страницы с данными. Существует возможность вывода списка заголовков фильмов вместо вас на вашей HTML странице, и есть возможность изменения вашей страницы каждый раз, когда хотите изменить свой список фильмов.</p> <p style="text-align: justify; "><b>В этом разделе вы создадите свою первую динамическую страницу.</b></p> <p style="text-align: justify; ">В WebMatrix у динамических веб-страниц есть расширение .CSHTML или.VBHTML. Это эффективные файлы HTML со встроенным кодом, записанным или в C7gN5dS (CS), или в Visual Basic (VB). Я буду использовать файлы CSHTML, которые позволяют мне писать встроенный код на странице с использованием языка C7gN5dS. Эта методология и синтаксис, которые позволяет мне встроить код в HTML называется 'Razor'.</p> <p style="text-align: justify; ">Итак, давайте создадим свою первую динамическую страницу.</p> <p style="text-align: justify; ">Используя WebMatrix, в рабочем пространстве Files создадим новую страницу CSHTML под названием movies.cshtml:</p> <p style="text-align: justify; "><img src="/upload/medialibrary/3fc/3fc0692b87900c9e120bbb034136fc2b.PNG" title="Веб разработка 101: Часть 4, Использование размещения (начало)" border="0" alt="Веб разработка 101: Часть 4, Использование размещения (начало)" width="700" height="476" /></p> <p style="text-align: justify; ">WebMatrix создаст страницу, которая похожа на основную страницу HTML. Замените контент этой страницы следующим: </p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); ">&lt;div id=&quot;movieslist&quot;&gt;&lt;ol&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;It's a wonderful life&lt;/a&gt;&lt;/li&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); ">&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lord of the Rings&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;The Fourth World&lt;/a&gt;&lt;/li&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;The Lion King&lt;/a&gt;&lt;/li&gt; &lt;/ol&gt; &lt;/div&gt; </span></p> <p style="text-align: justify; "> Разве он не выглядит странным? Нет никаких тегов, ни &lt;head&gt; , ни &lt;body&gt;. Представьте, что это еще и работает! Или по крайней мере немного. Запустите этот код и увидете следующее:</p> <p style="text-align: justify; "><img src="/upload/medialibrary/256/256b73f3d3927c75ecd24f1377564347.PNG" title="Веб разработка 101: Часть 4, Использование размещения (начало)" border="0" alt="Веб разработка 101: Часть 4, Использование размещения (начало)" width="700" height="386" /></p> <h3>Заголовок и Нижний колонтитул</h3> <p style="text-align: justify; ">Теперь вышепоказанная страница выглядит подобно тому, что мы делали ранее. Давайте определим верхний колонтитул страницы, как и в HTML перед &lt;div&gt;, содержащий список фильмов, и нижний колонтитул страницы, как и в HTML страницах предыдущих частей после &lt;div&gt;, содержащий список фильмов. Не путайте это с тегами &lt;header&gt; и &lt;footer&gt; на странице default.cshtml, с которыми вы работали до этого.</p> <p style="text-align: justify; ">Создайте новую страницу с именем 'PageHeader.cshtml' и скопируйте в нее все, что было написано выше moviesList &lt;div&gt; из default.chtml. Должно получиться вот так:</p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot; /&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> &lt;title&gt;My Favorite Movies&lt;/title&gt; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;movies.css&quot; /&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;h1&gt;A list of my Favorite Movies&lt;/h1&gt; &lt;/header&gt; </span></p> <p style="text-align: justify; ">По аналогии создайте новую страницу с именем 'PageFooter.cshtml' и скопируйте в нее все, что ниже moviesList &lt;div&gt; из default.chtml. Должно получиться вот так::</p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> &lt;div id=”footer”&gt; &lt;footer&gt; This site was built using Microsoft WebMatrix. </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> &lt;a href=&quot;http://web.ms/webmatrix&quot;&gt;Download it now.&lt;/a&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> &lt;/footer&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</span></p> <p style="text-align: justify; ">Используйте Razor, чтобы динамически добавить заголовок и нижний колонтитул</p> <p style="text-align: justify; ">Теперь, когда у вас есть этот результат, запишите свою первую часть серверного кода, используя 'Razor'. WebMatrix определяет отличия между HTML и кодом 'Razor' при помощи символа @. Вы помещаете этот символ перед любыми строками кода, которые являются инструкциями к серверу, сообщая серверу, что необходимо сделать.</p> <p style="text-align: justify; ">Вот, например, следующая команда:</p> <p style="text-align: justify; ">@RenderPage (&quot;pagename&quot;) заставляет сервер загружать HTML из файла 'pagename' и помещать его (Html код конечно, а не файл) в пределах текущего файла. Так, для примера, после изменений movies.cshtml код должен быть похож на этот:</p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> @RenderPage(&quot;PageHeader.cshtml&quot;) </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> &lt;div id=&quot;movieslist&quot;&gt; &lt;ol&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;It's a wonderful life&lt;/a&gt;&lt;/li&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lord of the Rings&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;The Fourth World&lt;/a&gt;&lt;/li&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;The Lion King&lt;/a&gt;&lt;/li&gt; &lt;/ol&gt; &lt;/div&gt; @RenderPage(&quot;PageFooter.cshtml&quot;) </span></p> <p style="text-align: justify; ">Когда вы запустите страницу, она будет похожа на эту:</p> <p style="text-align: justify; "><img src="/upload/medialibrary/a33/a3300e9ad4b6049875e39148097043cf.PNG" title="Веб разработка 101: Часть 4, Использование размещения (начало)" border="0" alt="Веб разработка 101: Часть 4, Использование размещения (начало)" width="700" height="452" /></p> <p style="text-align: justify; ">Также появился статический файл HTML. Это не удивительно, потому что у него теперь есть тот же самый заголовок и нижний колонтитул (включая код, запроса на то, чтобы страница загрузила CSS), и такой же основной текст. Но как вы могли заметить, теперь намного легче работать со страницей, поскольку весь код для заголовка и нижнего колонтитула не берётся из самого файла, и у любых новых страниц, которые вы создаете, будут те же самые заголовок, нижний колонтитул и таблица стилей.</p> <p style="text-align: justify; ">Во второй половине данного урока я расскажу о создании страницы, когда мы сперва создаём слои и правила для CSS, а потом уже собираем страницу (т.е. по сути, выполняем все операции с точностью до наоборот). Данный способ так же имеет право на существование и некоторым он удобнее в работе с WebMatrix.</p> <p style="text-align: right; ">19 декабря 2011 г</p> <p style="text-align: right; "> Задойный А.В.</p>

Возврат к списку

Яндекс.Метрика