Blazor и Razor: шаблон и интерактивность по‑новому

Если вы .NET-разработчик, вы, вероятно, знакомы с Razor — синтаксисом, который позволяет встраивать C# прямо в HTML. Он удобен для формирования страниц на сервере, но интерактивность ограничивалась формами и перезагрузками страниц. А что, если хочется оживить веб-приложение и писать UI полностью на C#? Здесь приходит Blazor.

Razor: аккуратно «бритвой» формируем шаблон

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

@foreach(var item in Model.Products)
{
    <div>@item.Name - @item.Price</div>
}
@if(User.Identity.IsAuthenticated)
{
    <p>Привет, @User.Identity.Name!</p>
}

Razor удобен для серверных страниц и SEO. Он отвечает за структуру и содержание, но не за интерактивность — для этого приходилось подключать JavaScript.

Razor в контексте MVC и MVVM

Классический Razor обычно используется в ASP.NET MVC или ASP.NET Core MVC:

• Страница разделена на три части: Model (данные), View (Razor-шаблон) и Controller (логика).
• Razor (.cshtml) получает данные из модели и формирует HTML.
• Обычно нужны отдельные файлы: модель, контроллер и вьюха.

Пример Razor-файла в MVC:

@model ProductViewModel

<h2>@Model.Name</h2>
<p>Цена: @Model.Price</p>

Razor сам по себе не оживляет страницу — это делает логика из контроллера.

Blazor: оживляем шаблон

Blazor использует тот же синтаксис Razor, но добавляет интерактивность на клиенте или сервере. Компоненты Blazor (.razor файлы) объединяют HTML и C# в одном месте и реагируют на события без перезагрузки страницы.

Два режима работы:

• Blazor Server — логика выполняется на сервере, браузер получает обновления через SignalR.
• Blazor WebAssembly — код загружается в браузер и выполняется на клиенте.

Простой пример счётчика:

@page "/counter"
<h3>Счётчик</h3>
<p>Текущее значение: @currentCount</p>
<button @onclick="IncrementCount">Увеличить</button>

@code {
    private int currentCount = 0;
    private void IncrementCount() => currentCount++;
}

HTML и C# живут в одном файле, а кнопка обновляет интерфейс мгновенно, без JavaScript.

Razor и Blazor вместе

Можно сказать: Razor аккуратно «бритвой» формирует шаблон, а Blazor оживляет его интерактивностью. Razor Pages удобны для статических страниц, а Blazor позволяет создавать интерактивные SPA полностью на C#.

Когда что использовать

• Razor Pages — простые сайты, где важен SEO и серверный рендеринг.
• Blazor — динамичные, интерактивные приложения, где хочется писать на C# вместо JavaScript.

Заключение

Razor задаёт структуру и содержание, а Blazor добавляет интерактивность и поведение. Вместе они дают .NET-разработчику мощный инструмент для современных веб-приложений, где всё управляется C#.