Blazor — первая программа

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Архитектору

Blazor — первая программа

Blazor — SPA на C# и Razor: UI пишется на .NET, рендер в браузере через WebAssembly или на сервере (SignalR).

Обзор: ASP.NET · API: ASP.NET Core — первая программа.

---

Создание проекта

dotnet new blazor -n HelloBlazor -int Server
cd HelloBlazor
dotnet run

Откройте https://localhost:5xxx — шаблон уже содержит счётчик.

Флаги:

• -int Server — интерактивность на сервере (проще для старта);
• -int WebAssembly — клиентский .NET в браузере;
• -int Auto — Server + WASM.

---

Свой компонент

Components/Notes.razor:

@page "/notes"

<h1>Заметки</h1>

<input @bind="newText" placeholder="Текст" />
<button @onclick="Add">Добавить</button>

<ul>
    @foreach (var note in items)
    {
        <li>@note</li>
    }
</ul>

@code {
    private string newText = "";
    private List<string> items = new();

    private void Add()
    {
        if (string.IsNullOrWhiteSpace(newText)) return;
        items.Add(newText.Trim());
        newText = "";
    }
}

В Components/Layout/NavMenu.razor добавьте ссылку:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="notes">Заметки</NavLink>
</div>

---

Модель компонента

Элемент	Назначение
@page	маршрут
@bind	двусторонняя привязка
@onclick	обработчик события
@code	поля и методы C#

Параметры извне: [Parameter] public string Title { get; set; }.

---

Когда что выбирать

Режим	Плюсы	Минусы
Server	быстрый старт, маленький payload	нужна постоянная связь
WebAssembly	работа офлайн после загрузки	большой первый download

Для публичных сайтов с SEO часто комбинируют Blazor с SSR (статические страницы + islands).

---

Дальше

• вызов REST API через HttpClient и DI;
• MAUI — первая программа для мобильного/десктопного UI на том же C#;
• мобильный раздел: /encyclopedia/4-code-dev/4-12-mobilnye-prilozheniya/1133.

---