Параметры и свойства компонентов Blazor

Как мы уже определили, компоненты Blazor — это самодостаточные элементы, которые могут содержать в себе в том числе и определенные свойства (параметры), отвечающие, например, за то, как будет отрисовываться компонент в окне браузера. Сегодня рассмотрим то, как можно передавать различные параметры компонентам Blazor.

Когда мы рассматривали тему маршрутизации в ASP.NET Core Blazor, то задавали параметры компонента Counter, используя параметры адресной строки браузера. При этом, для любого компонента Blazor можно также, как и для любого класса C# задавать свой набор свойств и определять их в приложении Blazor, не используя параметры маршрута.

Код компонента со свойствами

Вернемся к компоненту счётчика, который уже имеется в шаблоне приложения Blazor Server:

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

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

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>@Message</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {

    [Parameter]
    public string Message { get; set; } = "Счётчик на странице /counter";

    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Здесь у компонента Counter определено публичное свойство Message, обозначенное атрибутом [Parameter]. Значение этого свойства выводится в заголовке h1 в визуальной части компонента. Теперь мы можем использовать это свойство при использовании компонента в других частях нашего приложения. Например, зададим свойство Message при рендеринге компонента на главной странице приложения. Для этого перепишем код страницы Index.razor следующим образом:

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter Message="Счётчик на главной странице"/>

<SurveyPrompt Title="How is Blazor working for you?" />

обратите внимание на то, как вызывается компонент Counter. Используя терминология HTML, мы прописали у компонента атрибут Message, который и есть наше публичной свойство. Теперь можно запустить приложение и посмотреть на результат:

Свойствам компонентов Blazor можно передавать и более ложные объекты, чем строки или числа. Например, добавим в компонент Counter новой свойство:

@page "/counter"
.....
{*Вывод содержимого нового свойства*}
<p>Содержимое списка строк (свойство Data)</p>
<ul>
@foreach(string element in Data)
    {
        <li>@element</li>
    }
</ul>
.....
@code {

    .....
    
    [Parameter]
    public List<string> Data { get; set; } = new List<string>();
    
    .....
}

Теперь добавим на странице Index.razor следующий код:

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

{* Компонент Counter с новым свойством *}
<Counter Message="@message" Data="@elements"/>

<SurveyPrompt Title="How is Blazor working for you?" />

@code{
    string message = "Пример передачи свойству списка строк";
    List<string> elements = new List<string> { "Первый элемент", "Второй элемент", "Третий элемент" };
}

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

Передача содержимого из родительского компонента в дочерний

В Blazor можно передавать некоторое содержимое из родительского компонента в дочерний. Для этого, у родительского компонента должно быть объявлено следующее свойство:

    [Parameter]
    public RenderFragment ChildContent{ get; set; }

Свойство должно определяться именно так и никак иначе, то есть: имя свойства ChildContent, а тип данных — RenderFragment. Теперь попробуем переписать код страницы SurveyPrompt.razor следующим образом:

<div class="alert alert-secondary mt-4">
    <span class="oi oi-pencil me-2" aria-hidden="true"></span>
    <strong>@Title</strong>

    <span class="text-nowrap">
        Please take our
        <a target="_blank" class="font-weight-bold link-dark" href="https://go.microsoft.com/fwlink/?linkid=2149017">brief survey</a>
    </span>
    and tell us what you think.
    
    
    <p>---------------------------</p>
             @ChildContent
    <p>---------------------------</p>
    
</div>

@code {
    // Demonstrates how a parent component can supply parameters
    [Parameter]
    public string? Title { get; set; }

    [Parameter]
    public RenderFragment ChildContent{ get; set; }
}

У компонента SurveyPrompt мы определили свойство ChildContent. Теперь мы можем передавать в  компонент SurveyPrompt некоторое содержимое.  Чтобы посмотреть как это происходит, перепишем код страницы Index.razor (так как именно на этой странице мы вызываем компонент SurveyPrompt):

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.


<SurveyPrompt Title="How is Blazor working for you?" >
     	Это свойство ChildElement у компонента SurveyPrompt
</SurveyPrompt>

Теперь запустим наше приложение и посмотрим как содержимое из родительского компонента (Index) обрабатывается в дочернем компоненте (SurveyPrompt):

Итого

Сегодня мы научились работать со свойства компонентов Blazor, а также передавать содержимое из родительского компонента в дочерний. Для определения свойств компонента мы можем использовать атрибуты элемента (как в HTML).