Основы Razor

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

Razor — это легкий язык разметки, основанный на HTML и C#. С помощью Razor мы можем легко переходить от HTML-разметки к коду на C# для того, чтобы определить логику рендеринга компонентов Blazor. Когда файл .razor компилируется, то вся логика рендеринга собирается в класс .NET, а имя скомпилированного класса берется из имени файла .razor (поэтому и название этого файла должно начинаться с заглавной буквы).

Пространства имен для скомпилированных классов .NET

Пространство имен для класса берется из пространства имен по умолчанию для проекта и пути к папке, или вы можете явно указать пространство имен с помощью директивы @namespace. Например, если файл компонента MyComponent.razor располагается в папке Components, а приложение называется BlazorApp, то пространство имен для компонента по умолчанию будет BlazorApp.Components.

Как работает разметка Razor

Логика рендеринга компонента создается с использованием обычной HTML-разметки с добавлением динамической логики с использованием C#. 

Символ @ используется для перехода на C# и, как правило, Razor прекрасно разбирается в том, когда вы переключились на HTML, а когда переходите на C#. Например, следующий компонент отображает HTML-тег <p>тег с текущим временем:

<p>@DateTime.Now</p>

Если необходимо явно указать начало и конец выражения C#, то необходимо использовать круглые скобки:

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

Условный оператор if

Если вам необходимо в HTML-разметке определить какую-то простую логику с использованием C#, то можно использовать следующую конструкцию условного оператора if:

@if (value == 0) 
{ 
   <p>Значение переменной равно нулю</p> 
}

Razor «понимает», когда мы переключаемся снова на HTML-код, поэтому на экран будет выведена строка «Значение переменной равно нулю».

Цикл foreach

Если в HTML-разметке нам необходимо сформировать список или вывести таблицу каких-либо значений, то можно воспользоваться циклом foreach следующим образом:

<ul> 
   @foreach (var item in items) 
   { 
       <li>@item.Text</li> 
   } 
</ul>

Аналогичным образом вы можете использовать и другие циклы, например, for, while и т.д.

Директивы Razor

Директивы Razor используются для управления различными аспектами рендеринга компонентов. Все директивы Razor начинаются с символа @. Например, с помощью директивы @namespace мы можем подключить пространство имен в проект:

@namespace BlazorApp.MyComponents

Наиболее часто используемые директивы Razor представлены в таблице ниже

@code
  { 
     int i = 0;
     public void Inc()
     {
        i++;
     }
  }

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

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

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

где значения в скобках являются необязательными. Так, например, при разработке своего первого компонента Blazor мы использовали атрибут @bind:

<input type="date" @bind="data">

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

С этими и другими атрибутами в Razor мы познакомимся более подробно в следующих частях.

Итого

Razor — это достаточно простой и понятный язык разметки, с помощью которого мы можем совмещать в одном файле и HTML и код C#. Вся логика компонентов Blazor компилируется в классы .NET и, для того, чтобы определить члены классов (поля, методы, свойства и т.д.) используется блок @code{}. Используя синтаксис Razor, мы можем переключаться с HTML-разметки на код C#, устанавливать атрибуты и обработчики событий для визуальных элементов.