Содержание
Компоненты Razor могут содержать различные параметры, которые в разметке будут выглядеть как обычные атрибуты html-элементов или вложенные теги. Рассмотрим как мы можем использовать параметры компонентов Razor в наших приложениях Blazor Hybrid
Первый компонент
Для создания своего первого компонента воспользуемся шаблонным приложением Blazor Hybrid. Добавим в папку Components новый компонент. Для этого нажмем правую кнопку мыши на папке и выберем пункт «Компонент Razor»
В открывшемся окне зададим название «SmartCounter» и нажмем кнопку «Добавить»:
Откроется файл содержащий «скелет» нового компонента:
<h3>SmartCounter</h3>
@code {
}
Здесь у нас уже определена директива @code где мы можем размещать логику нашего компонента. В принципе, уже сейчас мы можем воспользоваться нашим компонентом на любой странице нашего компонента. Как мы уже знаем, компоненты Razor добавляются в разметку также, как и обычные html-теги. Например, откроем файл Home.razor и добавим на неё наш компонент:
@page "/" <h1>Hello, world!</h1> Welcome to your new app. <SmartCounter></SmartCounter>
Так как для нашего компонента не требуется никаких вложенных тегов, то мы можем воспользоваться сокращенной записью вот так:
@page "/" <h1>Hello, world!</h1> Welcome to your new app. <SmartCounter/>
В любом случае, компонент будет отображаться на главной странице приложения вот так:
Теперь воспользуемся эти компонентам для изучения темы «Параметры компонентов Razor».
Параметры компонента Razor
Параметры компонента Razor — это обычные публичные свойства C# с автосвойствами у которых определен специальный атрибут [Parameter]. Например, создадим для нашего компонента свойство, которое будет отвечать за заголовок:
<h3>@Title</h3>
@code {
[Parameter]
public string Title { get; set; }
}
Здесь мы добавили параметр компонента с именем Title и, затем, в разметке компонента используем неявное выражение Razor, чтобы вывести значение параметра.
Параметры компонента определяются в разметке Razor как обычные атрибуты html-компонента. Определим значение Title на странице Home.razor:
@page "/" <h1>Hello, world!</h1> Welcome to your new app. <SmartCounter Title="Smart-счётчик"/>
Теперь запустим приложение и посмотрим на результат:
Обязательные параметры
Сейчас для параметра Title не назначается никакого значения. При необходимости, мы можем сделать параметр обязательным, добавив к нему атрибут [EditorRequired].
<h3>@Title</h3>
@code {
[Parameter]
[EditorRequired]
public string Title { get; set; }
}
Стоит отметить, что атрибут [EditorRequired] не гарантирует, что параметр не будет содержать null, но в редакторе кода мы будем видеть следующее предупреждение:
Мы можем немного сократить определение обязательного параметра и записать атрибуты [Parameter] и [EditorRequired] в одну строку вот так:
[Parameter, EditorRequired]
public string Title { get; set; }
Доработка компонента
Добавим в наш компонент так, чтобы можно было и прибавлять и отнимать значения счётчика, а также задавать его начальное значение. Для этого нам потребуется ещё один параметр и пара методов:
<h3>@Title</h3>
<br />
<p>Значение: @Count</p>
<button @onclick="IncrementCounter">Прибавить 1</button>
<button @onclick="DecrementCounter">Отнять 1</button>
@code {
[Parameter, EditorRequired]
public string Title { get; set; }
[Parameter]
public int Count { get; set; }
private void IncrementCounter()
{
Count++;
}
private void DecrementCounter()
{
Count--;
}
}
Здесь мы определили новый параметр Count, а также два метода — IncrementCounter() и IncrementCounter(). В разметке компонента мы добавили строку в которой будем выводить значение счётчика:
<p>Значение: @Count</p>
а также две кнопки, которым назначили в качестве обработчиков события onclick наши методы:
<button @onclick="IncrementCounter">Прибавить 1</button> <button @onclick="DecrementCounter">Отнять 1</button>
Теперь мы можем задать для компонента начальное значение и проверить его работу:
@page "/" <h1>Hello, world!</h1> Welcome to your new app. <SmartCounter Title="Smart-счётчик" Count="10"/>
После запуска приложения мы увидим начальное значение счётчика:
а нажимая кнопки «Прибавить 1» и «Отнять 1» мы будем регулировать его значение.
Передача содержимого из родительского в дочерний компонент
Используя специальный делегат RenderFragment, мы можем передавать содержимое из родительского в дочерний компонент. При этом, в разметке компонента такая передача будет выглядеть как содержимое тега компонента. Делегат RenderFragment выглядит следующим образом:
public delegate void RenderFragment(RenderTreeBuilder builder);
Согласно условностям, свойству, принимающему содержимое RenderFragment, по соглашению необходимо присвоить имя ChildContent. Например, пусть наш счётчик из родительского компонента Home.razor принимает произвольную строку текста:
<h3>@Title</h3>
<p>@ChildContent</p>
<br />
<p>Значение: @Count</p>
<button @onclick="IncrementCounter">Прибавить 1</button>
<button @onclick="DecrementCounter">Отнять 1</button>
@code {
[Parameter, EditorRequired]
public string Title { get; set; }
[Parameter]
public int Count { get; set; }
[Parameter]
public RenderFragment? ChildContent { get; set; }
private void IncrementCounter()
{
Count++;
}
private void DecrementCounter()
{
Count--;
}
}
Параметр ChildContent в разметке компонента мы используем точно также, как и прочие параметры:
<p>@ChildContent</p>
Теперь добавим дочернее содержимое. Перейдем на страницу Home.razor и изменим добавление компонента SmartCounter следующим образом:
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SmartCounter Title="Smart-счётчик" Count="10">
<b>Это текст для смарт-счётчика</b>
</SmartCounter>
Запустим приложение и убедимся, что наш компонент выводит дополнительный текст, определенный в его параметре ChildContent:
Как можно видеть по рисунку, в качестве дочернего содержимого мы можем передавать не только строки, но и более сложные элементы, как например в нашем случае — html-код или другие компоненты Razor. Например, создадим ещё один компонент в папке Components с названием CounterFooter:
<h3>CounterFooter</h3>
@code {
}
Выведем содержимое CounterFooter в нашем компоненте счётчика:
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SmartCounter Title="Smart-счётчик" Count="10">
<b>Это текст для смарт-счётчика</b>
<CounterFooter></CounterFooter>
</SmartCounter>
Результат:
Итого
Параметры компонентов Razor — это публичные автосвойства C# для которых определен атрибут [Parameter]. Компоненты Razor могут быть вложенными, например, мы использовали наш компонент SmartCounter как вложенный для другого компонента — страницы Home. Также в компоненты Razor может передаваться содержимое из родительского компонента. Для этого используется специальный параметр с типом RenderFragment и именем ChildContent.