День 2012. #BlazorBasics
Основы Blazor. Создание Компонента Blazor
Приложения Blazor состоят из нескольких слоёв компонентов. Все в Blazor является компонентом. Компонентная архитектура имеет много преимуществ, таких как простое повторное использование кода, изолированное программирование и компоновка, даже в нескольких приложениях Blazor.

Компоненты можно разделить на 3 категории: страницы, компоненты и элементы управления. Технически это всё компоненты Blazor, создающие в сочетании дерево компонентов.

Компонент Blazor состоит из двух основных частей — шаблона и кода взаимодействия. Шаблон использует стандартные веб-технологии, такие как HTML и CSS. Код взаимодействия реализован на C#:

<h1>@Title</h1>

@code {
  public string Title { get; set; } 
   = "Мой компонент";
}

Этот простой компонент содержит шаблон с одним HTML-элементом <h1>. Синтаксис шаблона Blazor основан на синтаксисе Razor. Содержимое элемента <h1> ссылается на свойство Title кода C# в блоке @code. Значение переменной выводится с помощью символа @, за которым следует имя свойства. Символ @ используется везде в шаблоне, когда нужно сослаться на код из раздела @code компонента.

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

Некоторые компоненты могут использоваться в нескольких приложениях. Можно создавать компоненты самому, что занимает много времени, либо использовать стороннюю библиотеку для UI компонентов Blazor, вроде Blazorise, Radzen, MudBlazor или Telerik Blazor UI.

Страницы в приложениях Blazor
В Blazor страницы являются компонентами. Единственное, что нужно, чтобы превратить компонент в страницу, — это добавить директиву @page.

@page "/MyPage"
<h1>@Title</h1>

@code {
  public string Title { get; set; }
   = "Мой компонент";
}

В этом примере мы использовали маршрут /MyPage в качестве маршрута, по которому будет доступна страница. Директива @page регистрирует компонент как страницу и добавляет маршрут к поставщику маршрутизации ASP.NET Core.

Деревья компонентов
Теперь извлечём компонент MyComponent.razor из страницы MyPage.razor:

@page "/MyPage"
<MyComponent />

<h1>@Title</h1>
@code {
  public string Title { get; set; }
   = "Мой компонент";
}

Мы создали два компонента и сослались на компонент MyComponent в компоненте MyPage. Можно продолжить в том же духе для построения целого дерева компонентов: страница может содержать компоненты Content и Menu. Menu - содержать несколько компонентов MenuItem и т.д.

Передача параметров из родительского компонента в дочерний
Нужно добавить атрибут Parameter, чтобы превратить свойство в параметр, который можно задать извне компонента:

<h1>@Title</h1>

@code {
  [Parameter]
  public string Title { get; set; }
}

Теперь в родительском компоненте зададим значение для свойства Title:

@page "/MyPage"
<MyComponent Title="Заголовок" />

Источник: https://www.telerik.com/blogs/blazor-basics-creating-blazor-component