Razor движок веб-страниц

Razor - интеллектуальный и понятный

Razor - это интеллектуальный обработчик программного кода динамических веб-страниц ASP.NET. Имеет простой, интуитивно понятный, синтаксис встраивания программного кода в веб-страницы. Razor - механизм визуализации (view engine) поддерживаемый .NET Framework, .NET Core в рамках ASP.NET и специально предназначен для создания веб-приложений.

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

Краткая история Razor

Разработку движка Razor начали в июне 2010 года и в январе 2011 года он был выпущен для Microsoft Visual Studio 2010 как часть ASP.NET MVC 3 и набора инструментов Microsoft WebMatrix. Целью создания нового механизма визуализации было обеспечение возможности разработчикам использовать свои существующие C# и Visual Basic языковые навык. А также возможности быстрого интегрирования серверного кода в разметку HTML с минимальным количеством разграничивающих символов.

Свойства движка Razor

С помощью механизма визуализации Razor можно интуитивно легко создавать сложные композиции программного кода, гармонирующего с разметкой HTML. Когда сервер "читает страницу", движок Razor обрабатывает код веб-страницы прежде, чем сервер отправит сгенерированные данные в браузер. Загруженная в браузер веб-страница, порожденная серверным кодом, ничем не отличается от статического контента HTML. Файлы веб-страниц ASP.NET с синтаксисом Razor имеют специфическое расширение .cshtml (Razor с использованием C #) и .vbhtml (Razor с помощью Visual Basic).

Синтаксис Razor

Ниже показаны фрагменты исходников на движке Razor. Более подробно программные коды веб-страниц можно посмотреть, загрузив прикрепленные исходники. Если работать в MS Visual Studio .NET и Visual Studio Code, то программирование на Razor можно освоить буквально за несколько часов. Встроенные в студии анализаторы кода оказывают существенную помощь в освоении механизма визуализации.

Блок объявления типов, методов, объектов и переменных, обозначенный как @functions{…} дает возможность создавать любой, синтаксически корректный код на языках .NET, что равносильно созданию кода в файле с расширением .cs. Программный код в блоке @functions{…} воспринимается как составляющая класса с именем идентичным названию файла .cshtml. Разместив данный файл папке App_Code и создав переменные, методы и классы с модификатором public можно получить доступ к этому коду с любой страницы сайта. Например, вы создали файл Utility.cshtml, то код будет доступен на других страницах через @Utility.название_метода(), @Utility.название_переменной и т.д.

Создание типов с помощью движка Razor

@functions{
 
    // Новый класс
    static class MyClass
    {
        /// <summary>
        /// Описание метода для документирования
        /// </summary>
        /// <returns>описание возвращаемого значения</returns>
        public static string GetTicks()
        {
            return DateTime.Now.Ticks.ToString();
        }
 
        private static string s = "123456";
    }
 
 
    // Функция с возвратом
    public string Function1()
    {
        return "Привет!!!";
    }
 
    // Функция без возврата
    void Function2()
    {
        // Задержка для разности результатов при многократных
        // последовательных вызовах функции GetTicks()
        Thread.Sleep(1);
    }
 
}

Внедрение объектов из других пространств имен

@using System.Threading; 
@using System.Text;

Объявление переменных

@{
    // -- Создание переменных различных типов ---
    
    // Универсальная переменная var
    var universalString = "Поезд прибудет вовремя.";
    var universalInteger = 567;
 
    // Можно использовать и переменные конкретных типов
    string str = "Урожай грибов в этом году впечатляет.";
    int intNumber = 289;
    DateTime timeNow = DateTime.Now;
}

Вывод зарезервированных слов

@{
    // В html-тегах зарезервированные слова отображаются как простой текст
    <p>
        int double string new null if for  class delegate Request Response DateTime
    </p>
 
    // Следующий способ преобразования ключевых слов в простой текст
    @:int double string new null if for  class delegate Request Response DateTime
 
    // Использование не отображаемых тегов <text>
    <text>
        int double string new null if for  class delegate Request Response DateTime
    </text>
 
 
    // Если раскомментировать строку ниже, то интерпретатор известит об ошибочном коде
    // int double string new null if for  class delegate DateTime
}

Пример динамического создания html кода

<div>
     <table>
        @for (int row = 1; row <= 4; row++)
        {
            <tr>
            @for(int column = 1; column <= 10; column++)
            {
                <td>@row x @column</td>
            }
            </tr>
        }
     </table>
</div>

Поддержка макетов веб страниц

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

Страница макета на движке Razor

<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>
<body>
    <div>@RenderSection("Верхний блок", true)</div>
    <div style="height:300px;">
        <div>@RenderSection("Left", true)</div>
        <div>@RenderBody()</div>
        <div>@RenderSection("Right", false)</div>
    </div>
 
    <div>@RenderSection("Нижний блок", true)</div>
</body>
</html>

Дочерние страницы макета

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

@{
    // Определение макета текущего представления
    Layout = "~/LayoutPages/_LayoutMain.cshtml";
}
 
<h1>Тело веб-страницы</h1>
 
<p>
    <strong>Абзац №1</strong>
</p>
<p>
    Абзац №2
</p>
 
 
@section Верхний блок{
    Верхняя строка сайта
}

@section Нижний блок{
    Нижняя строка веб-страницы
}
 
@section Left{
    Левый столбец
}
 
@section Right{
    Правый столбец
}

Исходники веб страниц на движке Razor

Ниже прикреплены исходники веб-страниц с обработчиком кода Razor. Исходники созданы в MS Visual Studio .NET 2013 и могут быть протестированы в Visual Studio Code, SharpDevelop, WebMatrix. Поддержка Razor включена в Visual Studio 2012 и Visual Studio 2013 по умолчанию.