Ctrl+K
Ctrl+K
Ctrl+K

Blazor

Blazor#

Blazor — это разработанный Microsoft фреймворк, позволяющий создавать веб-приложения с помощью C# и Razor. Использует компоненты, предназначенные для запуска на стороне клиента в браузере на основе WebAssembly (Blazor WebAssembly) или на стороне сервера в ASP.NET Core (Blazor Server).

Примечание

Модели Blazor WebAssembly и Blazor Server нельзя использовать одновременно.

Основные пакеты#

Пакет

Версия

Репозиторий

Описание

dotnet-sdk-8.0

8.0.100-1astra~1.8.0+b2

extended

Комплект разработки ПО на .NET 8.0

Microsoft.AspNetCore.Components

8.0.0

microsoft

Пакет, содержащий основы Blazor

Microsoft.AspNetCore.Components.WebAssembly

8.0.0

microsoft

Предоставляет инфраструктуру для работы Blazor WebAssembly и интеграции с ASP.NET Core.

Пакет Microsoft.AspNetCore.Components, содержащий основы Blazor, является базовым и устанавливается вместе с SDK .NET.

Шаблоны веб-приложений с пакетом расширений Blazor#

  1. Blazor Server App (Тонкий клиент):

    Создает серверное приложение Blazor, которое использует SignalR для взаимодействия с клиентом и позволяет работать с компонентами на сервере.

dotnet new blazor -n MyBlazorServerApp

Структура проекта MyBlazorServerApp (структура с Razor-страницами, общими компонентами и статическими файлами):

MyBlazorServerApp/
├──Components/                   # UI приложения
│  ├── Pages/                    # Razor-страницы
│  │   ├── Home.razor            # Главная страница
│  │   └── Counter.razor         # Пример страницы с счётчиком
│  ├── Layout/                   # Общие компоненты
│  │   ├── MainLayout.razor      # Основной макет
│  │   ├── MainLayout.razor.css  # Стилизация компонентов основного макета (необязательный файл)
│  │   └── NavMenu.razor         # Меню навигации
├── wwwroot/                     # Статические файлы (CSS, JS, изображения)
├── App.razor                    # Корневой компонент (как обрабатываются маршруты и отображаются компоненты)
├── Routers.razor                # Определение маршрутов в приложении и отображение компонент
├── Program.cs                   # Точка входа
├── appsettings.json             # Конфигурации
└── MyBlazorServerApp.csproj     # Файл проекта

  1. Blazor WebAssembly App (Толстый клиент):

    Создает клиентское приложение Blazor, работающее в браузере, и использует WebAssembly. Это позволяет выполнять C# код непосредственно в браузере без необходимости в серверной части.

dotnet new blazorwasm -n MyBlazorWasmApp

Структура проекта MyBlazorWasmApp аналогична Blazor Server, но выполняется в браузере.

Razor страницы#

Razor — это мощный движок представления, который используется в .NET для создания динамических веб-приложений. Он позволяет писать HTML с возможностью внедрения C# кода, что делает процесс создания веб-страниц более простым и эффективным. Razor используется в различных приложениях на платформе .NET, включая ASP.NET MVC, ASP.NET Core, а также в Blazor, который представляет собой фреймворк для создания веб-приложений с использованием C#.

Примечание

Пример создания простого компонента Razor в Blazor

<h3>Welcome to my Blazor App!</h3>

<button @onclick="IncrementCounter">Click me</button>
<p>Current count: @count</p>

@code {
    private int count = 0;

    private void IncrementCounter()
    {
        count++;
    }
}

В компоненте создаются заголовок, кнопка и параграф, который отображает текущее значение счетчика.
При нажатии на кнопку вызывается метод IncrementCounter, который увеличивает значение переменной count.
Вся логика компонентов Blazor написана на C#, а результаты отрисовываются как HTML.

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

Одной из особенностей Razor является то, что он обрабатывает C# код на стороне сервера и возвращает HTML в браузер клиента.

Примечание

Пример Razor Pages для веб-приложения Blazor описан ниже.

Особенности использования Razor Pages#

  • включение Razor Pages в Program.cs:

builder.Services.AddRazorPages();   //  добавление в приложение службы для Razor Pages.
var app = builder.Build();          // создание приложения
app.MapRazorPages();                // добавление для маршрутизации IEndpointRouteBuilder Pages

Создание серверного приложения с Blazor#

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

Пункт 1#

  • создать шаблонный проект и перейти в папку проекта:

dotnet new blazor -n MyBlazorServerApp
cd MyBlazorServerApp

Пункт 2#

  • запустить приложение:

dotnet run

Перейти по ссылке http://localhost:5000 на стартовую страницу приложения. Порт может отличаться — он указан в файле launchSettings.json. При переходе по адресу откроется домашняя страница приложения с сообщением «Hello, world!», через меню можно перейти на страницу Counter со счетчиком кликов по кнопке и страницу Weather с таблицей температур по дням.

Объяснение кода#

Program.cs#

При создании из шаблона blazor файл Program.cs содержит следующий код:

using MyBlazorServerApp.Components;

var builder = WebApplication.CreateBuilder(args);

// Добавление сервисов в контейнер
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents(); // добавление сервисов интерактивного рендеринга

// Сборка приложения
var app = builder.Build();

// Настройка обработки HTTP-запросов
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    app.UseHsts();
}

// Перенаправление на HTTPS
app.UseHttpsRedirection();

// Использование статических файлов
app.UseStaticFiles();
// Защита от подделки запросов
app.UseAntiforgery();

// Настройка маршрутизации для компонент
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();   // устанавка поддержки рендеринга на сервере

app.Run();

где:

  • импорт пространства имен, содержащее компоненты приложения:

using MyBlazorServerApp.Components;

  • точка входа в приложение Main находится в главном классе приложения Program;

Counter.razor#

Описание страницы Counter на Razor с комментариями:

@page "/counter"                         @* Маршрут *@
@rendermode InteractiveServer            @* Режим рендеринга (реальное время) *@

<PageTitle>Counter</PageTitle>

<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++;
    }
}

Данный файл представляет собой страницу многостраничного приложения, описывая расположение компонент и их функционал.

Routes.razor#

Файл Routes.razor отвечает за настройку маршрутизации и управление отображением компонентов в зависимости от URL:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">                         <! -- Определяет, что делать, если маршрут найден -->
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />  <! -- Отображает компонент, связанный с найденным маршрутом -->
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />  <! -- Автоматически фокусируется на заголовке <h1> при переходе на новую страницу -->
    </Found>
</Router>
Содержание