Многократное использование компонентов Blazor

Как мы уже знаем, логика компонентов Blazor компилируется в классы .NET. Соответственно, и относится к компонентам Blazor мы с вами можем точно так же, как и к любым компонентам платформы .NET, то есть: мы можем создавать повторно используемые компоненты Blazor, переносить компоненты из проекта в проект, определять для компонентов свойства, методы, события и так далее.

 Компонент счётчика из шаблона проекта Blazor Server

Вернемся к нашему первому приложению Blazor Server и посмотрим на компонент Counter, расположенный в папке Pages. Код файла Counter.razor:

@page "/counter"

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

Логика компонента, следуя синтаксису Razor, содержится в блоке @code{...}. В визуально части компонента мы обращаемся к полю компонента currentCount, чтобы вывести значение счётчика на экран, а также определили обработчик события onclick кнопки, используя атрибуты Razor (строка @onclick="IncrementCount").

По сути, перед нами хоть и простой, но вполне самодостаточный компонент Blazor, который мы можем повторно использовать в нашем приложении. Рассмотрим, как можно использовать компонент Counter в нашем приложении.

Повторное использование компонента Blazor в приложении

Для повторного использования компонента Blazor можно использоваться теги (наподобие HTML-тегов) у которых имя в точности совпадает с именем компонента. Например, сделаем так, чтобы компонент Counter отображался не только при переходе на страницу /counter, но и на главной странице, которая у нас, кстати, также является компонентом с названием Index и содержится в файле Index.razor.

Открываем в VS Code файл Index.razor и добавляем в него наш компонент Counter:

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />
@*Добавляем компонент Counter*@
<Counter/>

Теперь можно сохранить изменения и убедиться, что наш компонент Counter используется и на главной странице приложения и при переходе по адресу /counter:

Компоненты ASP.Net Core 6.0

В ASP.Net Core 6.0 имеются готовые компоненты, которые мы можем использовать в своих приложениях. Например, посмотрим на файл NavMenu.razor, который определяет элементы меню в сайдбаре:

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">BlazorApp</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="age">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Калькулятор возраста
            </NavLink>
        </div>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

В HTML-разметке меню встречаются теги NavLink, которые по сути являются компонентами Blazor и содержатся в пространстве имен Microsoft.AspNetCore.Components.Routing.

В других частях шаблона приложения Blazor Server также можно обнаружить использование уже готовых компонентов Blazor, например, в главном компоненте приложения App.razor используется компонент Router с определенными в нем параметрами и так далее. В дальнейшем мы познакомимся с этими и другими компонентами Blazor более подробно.

Итого

Компоненты Blazor — это самодостаточные элементы приложения, которые мы можем многократно использовать в наших приложениях Blazor. Для вызова компонента в приложении необходимо определить тег содержащий точное имя компонента. В ASP.NET Core 6.0 имеется ряд готовых компонентов Blazor, которые мы можем использовать для разработки своих приложений.