Синтаксис Razor

При разработке компонентов приложения Blazor Hybrid используется язык разметки Razor. Здесь мы рассмотрим основные возможности этого языка разметки на примере шаблонного приложения, а далее, по мере необходимости, будем пополнять свои знаниями новыми сведениями о способах работы с Razor

Символ @

Символ @ играет важную роль в Razor. С помощью этого символа мы переходим внутри компонента Razor с html-разметки на C#. Например, создадим новое приложение Blazor Hybrid, откроем файл Components/Pages/Home.razor и изменим его код следующим образом:

@page "/"

<h1>Hello, world!</h1>

<p>@DateOnly.FromDateTime(DateTime.Now)</p>

Здесь в третьей строке мы используем символ @. В этом случае Razor переходит на C#, вычисляет значение за символом @, встраивает полученное значение в HTML-код и снова переходит на HTML. Запустите приложение и убедитесь, что на странице отобразилась текущая дата:

В этом примере мы использовали так называемое неявное выражение Razor. Основное правило использование неявных выражений заключается в том, что после @ не должно быть пробелов. Исключением является только слово await после которого допускается ставить пробел, однако мы пока не будем касаться асинхронного кода.

Вполне может быть, что в процессе работы над приложением потребуется выводить символ @ на странице вашего приложения, например, в строке @UserName. Чтобы Razor не воспринимал это как неявное выражение, достаточно продублировать символ, например:

@page "/"

<h1>Hello, @@UserName!</h1>

<p>@DateOnly.FromDateTime( DateTime.Now )</p>

Результат

Также символ @ не воспринимается как символ перехода в адресах электронной почты, поэтому здесь нам даже не придется дублировать символ:

@page "/"

<h1>Hello, @@UserName!</h1>

E-mail: vlad@csharp.webdelphi.ru

<p>@DateOnly.FromDateTime( DateTime.Now )</p>

На экране увидим

Блоки кода Razor

В разметке Razor мы можем использовать не только отдельные инструкции C#, но и, при необходимости, целые блоки кода. Блок кода Razor начинается также с символа @ и заключается в фигурные скобки {}. Например,

@page "/"

@{
    string[] strings = ["Привет,", "Blazor", "Hybrid"];
    var data = string.Join(" ", strings);

    <h3>@data</h3>
}

здесь мы использовали блок кода внутри которого объявили массив строк, затем объединили все строки в одну и, используя неявное выражение Razor вывели полученную строку на страницу.

На странице может размещаться несколько блоков кода Razor и при этом, все блоки кода будут действовать как одно целое, например:

@page "/"

@{
    var data = Sum(10, 15);
}

<h3>@data</h3>

@{
    int Sum(int a, int b)
    {
        return a + b;   
    }
}

Здесь мы во втором блоке кода Razor объявили локальную функцию Sum(), которую затем использовали в первом блоке для сложения двух чисел. Результат будет следующим:

Явные выражения Razor

Явные выражения Razor начинаются с символа @ и заключаются в круглые скобки (). Преимуществом использования явных выражений является то, что они позволяют производить простые вычисления непосредственно внутри html-разметки, а также позволяют объединять результат своего вычисления с другим текстом. Например:

@page "/"

@{
    var data = Sum(10, 15);
}

<h3>Сумма@(data)</h3>

@{
    int Sum(int a, int b)
    {
        return a + b;   
    }
}

Здесь мы используем явное выражение Razor для объединения переменной data с текстом "Сумма":

<h3>Сумма@(data)</h3>

Результат:

Если бы мы попытались использовать неявное выражение, например, вот так:

<h3>Сумма@data</h3>

то увидели бы на экране:

Комментарии

Комментарии внутри разметки Razor размещаются между символами @* и *@, например

@* 
   Это многострочный комментарий 
   на странице Razor, 
   который не будет виден
*@

@page "/"

@{
    var data = Sum(10, 15);
}

<h3>Сумма@(data)</h3>

@{
    int Sum(int a, int b)
    {
        return a + b;   
    }
}

Циклы

Мы можем использовать в разметке Razor циклы for, foreach, while..do и do..while точно также, как и в обычном коде C#, за исключением того, что в Razor циклу предшествует всё тот же символ @. Например, нам требуется вывести список слов из массива:

@page "/"

@*Определяем массив в блоке кода*@

@{
    string[] words = ["Один","Два","Три","Четыре","Пять"];
}

<ul>
    @*Формиркем список слов*@
    @foreach (var word in words)
    {
       <li>@word</li>    
    }
</ul>

Результат

Основные директивы Razor

Директива Razor — это неявные выражения с зарезервированными ключевыми словами после символа @.

@code

Директива @code — одна из важнейших в контексте работы с фреймворком Blazor, в принципе. Эта директива позволяет компоненту Razor добавлять элементы C# (поля, свойства и методы) в компонент. Пример использования этой директивы в шаблонном приложении Blazor Hybrid демонстрируется на странице Counter.razor:

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Здесь, с использованием директивы @code определено поле currentCount и метод IncrementCount. В дальнейшем, мы будем часто использовать эту директиву в своих приложениях. Сейчас же для нас важно запомнить, что внутри блока кода с директивой @code мы можем работать также, как и в обычном приложении C#. Например,

@page "/counter"

<p>@person.Name</p>
<p>@person.Age</p>

@code {
    public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }


    Person person = new()
        {
            Name = "Vlad",
            Age = 30
        };

}

Здесь мы определили класс Person, создали новый объект этого класса и в html-разметке вывели значение свойств:

@using

Эта директива имеет тот же смысл, что и using в C#. Например,

@page "/counter"

@using System.Text.Json

<p>@person.Name</p>
<p>@person.Age</p>

<p>@JsonSerializer.Serialize(person)</p>

@code {
    public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }


    Person person = new()
        {
            Name = "Vlad",
            Age = 30
        };

}

Здесь, используя директиву @using мы подключили к нашему компоненту пространство имен System.Text.Json, чтобы сериализовать объект Person:

<p>@JsonSerializer.Serialize(person)</p>

@inject

Также является достаточно часто используемой директивой в Blazor. Эта директива позволяет внедрять в компонент сервисы из контейнера зависимостей.

@page "/counter"

@inject NavigationManager _navigation

<b>Путь: @_navigation.Uri</b>

здесь мы. используя директиву @inject запросили сервис NavigationManager и далее использовали его свойство URI для отображения пути адреса по которому мы находимся в данный момент

@page

В Blazor эта директива указывает шаблон маршрута. Например, в коде выше, директива @page указывает шаблон маршрута «/counter«. Шаблон маршрута в Blazor обязательно начинается с символа /.

Атрибуты директив

Razor также широко использует атрибуты директив для элементов. Атрибуты директив используются для управления различными аспектами компиляции компонентов (обработка событий, привязка данных, ссылки на компоненты и элементы и так далее). Синтаксис атрибутов следующий:

@directive(-suffix(:name))(="value")

где значения в скобках являются необязательными. Наиболее широко используемые атрибуты директив Razor представлены в таблице ниже:

Атрибут Описание Пример
@attributes
 Определяет словарь атрибутов для HTML-элемента
<input @attributes="ExtraAttributes" />
@bind
 Создает двустороннюю привязку данных
<input type="date" @bind="data">
@on{event}
 Добавляет обработчик события для указанного события
<button @onclick="IncrementCount">Click me!</button>

Наиболее широко атрибуты директив используются для привязки данных и обработки событий элементов. Опять же, наглядная демонстрация обработки событий представлена на странице Counter шаблонного приложения:

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Обратите внимание на кнопку:

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

здесь мы, используя атрибут @onclick назначаем кнопки обработчик события — метод IncrementCount(), который определен в @code.

Что касается привязки данных, то можно продемонстрировать такой пример:

@page "/counter"

<input role="textbox" @bind-value="data"></input>

<ul>
    @for (int i = 0; i < 5; i++)
    {
       <li>@data</li>   
    }
</ul>


@code {
    string data = "Это строка";

    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Здесь мы используем двустороннюю привязку в элементе <input>. Мы привязываем атрибут value элемента и переменную data. Изначально, в этом элементе будет содержаться строка «Это строка». В цикле пять раз выводится значение переменной data. Запустите приложение и перейдите на страницу Counter — вы увидите следующий результат:

Теперь введите в текстовое поле любую другу строку и нажмите клавишу Enter. Вы увидите, что список изменится — переменная data получит новое значение:

Итого

В этой части мы рассмотрели основные возможности языка разметки Razor. Конечно, на этом возможности Razor не заканчиваются — в нем также имеются и другие директивы, которые мы будем использовать в своей работе с Blazor Hybrid. На данный момент рассматривать эти возможности не имеет особого смысла, так как для этого потребуется писать отдельные примеры, часть кода которых вам будет непонятна. Однако, по мере необходимости, мы будем использовать максимум возможностей Razor и разбирать их подробно.

Подписаться
Уведомить о
guest
0 Комментарий
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии