Пошаговое руководство. Создание веб-сайта с использованием синтаксиса 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

В этом разделе приведены инструкции по установке средств 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. Нажмите кнопку Установить, чтобы выполнить установку.

После установки 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

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

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

    
    var weekDay = DateTime.Now.DayOfWeek;
    

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

  3. После закрывающего тега </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>
    
    
  6. Нажмите сочетание клавиш CTRL+F5, чтобы запустить страницу. На следующем рисунке показано, как страница выглядит в браузере.

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

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

Показ: