Пошаговое руководство. Создание веб-сайта с использованием синтаксиса Razor в Visual Studio

  • Статья

Веб-страницы ASP.NET с синтаксисом Razor позволяют использовать простой синтаксис программирования для написания кода веб-страниц, при котором серверный код встраивается в HTML-код веб-страницы. Код Razor выполняется на сервере до отправки страницы в браузер. Этот серверный код может динамически создавать клиентское содержимое, т. е. генерировать разметку HTML или другое содержимое "на лету", а затем передавать его в браузер вместе со статическим HTML-кодом страницы.

Веб-страницы с синтаксисом Razor являются альтернативой веб-формам ASP.NET. В основе страниц веб-форм лежат элементы управления веб-сервера, которые автоматически создают HTML-код и эмулируют программную модель на основе событий, используемую в клиентских приложениях. Страницы Razor, напротив, больше похожи на обычные страницы HTML, на которых разработчик создает почти всю разметку HTML, а функциональность добавляется к этой разметке с помощью серверного кода. В общем случае страницы Razor занимают меньше места, чем страницы веб-форм. Из-за этого, а также из-за простоты синтаксиса, технология Razor может оказаться более легкой в освоении разработчиками, а скорость разработки динамических веб-страниц может увеличиться.

У веб-страниц с содержимым Razor имеется особое расширение файла — CSHTML или VBHTML. Сервер распознает эти расширения, запускает код, помеченный синтаксисом Razor, а затем отправляет полученную страницу в браузер.

Технология Razor была впервые применена на сайте Microsoft WebMatrix. В этом пошаговом руководстве показано, как использовать ASP.NET Razor при работе в Visual Studio.

Обязательные компоненты

Для выполнения этого пошагового руководства потребуется следующее.

  • Пакет SP1 Visual Studio 2010

Установка средств ASP.NET Razor

В этом разделе приведены инструкции по установке средств Visual Studio, поддерживающих ASP.NET Razor. Если среда Visual Studio 2010 с пакетом обновления 1 (SP1) была установлена с помощью средства Microsoft Web Platform Installer, этот раздел можно пропустить, поскольку необходимые средства уже имеются на компьютере. Если среда Visual Studio 2010 с пакетом обновления 1 (SP1) устанавливалась после загрузки с сайта MSDN, необходимо выполнить эту процедуру.

Установка средств ASP.NET Razor для Visual Studio

  1. Если у вас нет средства Web Platform Installer, загрузите его, воспользовавшись следующей ссылкой: Microsoft Web Platform Installer.

  2. Запустите Web Platform Installer.

    Установщик веб-платформы (Майкрософт)

  3. Найдите ASP.NET MVC 3 и щелкните Добавить. ASP.NET MVC 3 включает средства Visual Studio для построения веб-сайтов ASP.NET Razor.

  4. Нажмите кнопку Установить, чтобы выполнить установку.

Создание веб-сайта ASP.NET Razor

После установки Visual Studio 2010 с пакетом обновления 1 (SP1) и средств ASP.NET можно создать проект веб-приложения или веб-сайта ASP.NET Razor. В данном пошаговом руководстве будет создан проект веб-сайта.

Создание веб-сайта с использованием ASP.NET Razor

  1. Запустите Visual Studio.

  2. В меню Файл выберите пункт Новый веб-узел.

    Диалоговое окно "Новый веб-узел"

  3. В диалоговом окне Новый веб-узел выберите используемый язык (Visual C# или Visual Basic).

  4. Выберите .NET Framework 4.

  5. Выберите шаблон ASP.NET Web Site (Razor).

  6. В раскрывающемся списке Расположение в Интернете выберите Файловая система и перейдите к локальной папке, в которой требуется разместить файлы веб-сайта.

  7. Нажмите кнопку ОК.

Проверка синтаксиса ASP.NET Razor

В этом разделе на страницу по умолчанию нового веб-сайта будет добавлено несколько строк кода, чтобы продемонстрировать ASP.NET Razor в действии.

Проверка синтаксиса ASP.NET Razor

  1. Откройте страницу Default.cshtml или Default.vbhtml.

  2. В верхней части страницы после строки, начинающейся с Page.Title, добавьте следующую строку кода:

    var weekDay = DateTime.Now.DayOfWeek;

    Dim weekDay = DateTime.Now.DayOfWeek

    Этот код объявляет переменную и присваивает ей значение текущего дня недели.

  3. После закрывающего тега </p> добавьте следующую строку кода:

    <p>Today is: @weekDay</p>

    <p>Today is: @weekDay</p>

    Эта строка выводит текущий день недели. С символа @ начинаются встроенные выражения Razor, блоки из отдельных инструкций и блоки из нескольких инструкций. Этот символ отделяет разметку HTML от исполняемого кода.

  4. Добавьте следующий блок кода.

    @for(var i = 10; i < 16; i++)
{
    <p style="font-size: @(i + "pt")">My font size is now: @i</p>
}

    @For i = 10 To 15
    @<p style="font-size: @(i)pt">My font size is now: @i</p>
Next

  5. Добавьте следующий блок кода, использующий цикл foreach для отображения имени каждого элемента коллекции Request.ServerVariables, которая содержит сведения о веб-сервере.

    <ul>
@foreach (var myItem in Request.ServerVariables)
{
    <li>@myItem</li>
}
</ul>

    <ul>
@For Each myItem In Request.ServerVariables
    @<li>@myItem</li>
Next myItem
</ul>

  6. Нажмите сочетание клавиш CTRL+F5, чтобы запустить страницу. На следующем рисунке показано, как страница выглядит в браузере.

    Веб-страница по умолчанию

Следующие действия

Чтобы более подробно изучить синтаксис ASP.NET Razor, воспользуйтесь разделом Introduction to ASP.NET Web Programming Using the Razor Syntax.

См. также

Другие ресурсы

Новые возможности Visual Web Developer