День 1990. #BlazorBasics
Основы Blazor. Что Такое Blazor? Начало
Blazor — современная технология разработки UI от Microsoft. Он позволяет разрабатывать современные веб-приложения, такие как одностраничные приложения (Single-Page Application - SPA). Blazor - часть платформы .NET, т.е. он имеет доступ к обширной экосистеме .NET: API, языки программирования и среда выполнения.

Технологии
Blazor использует HTML, CSS и C# для создания веб-UI на стороне клиента. Вместо использования специфичных для Microsoft технологий, вроде XAML, для описания UI используются стандартные HTML и CSS. Вместо JavaScript или TypeScript, которые используются в React, Angular, Vue и других веб-фреймворках, Blazor использует C# для реализации поведения приложения.

Модель компонентов
Вот код типичного компонента Blazor:

@page "/counter"
<PageTitle>Счётчик</PageTitle>
<h1>Счётчик</h1>
<p role="status">Счёт: @count</p>
<button class="btn" @onclick="Increment">Увеличить</button>

@code {
  private int count = 0;
  private void Increment()
  {
    count++;
  }
}

1) Используется стандартный HTML (теги h1, p и button).
2) Код C# либо начинается с символа @, либо заключен в блок кода, начинающийся с @code.
3) Директива @page в первой строке делает этот компонент страницей, доступ к которой возможен по маршруту /counter.
4) Мы определяем свойства в разделе @code компонента, к которым можем получить доступ, используя символ @ перед ним в HTML-шаблоне компонента.
5) Атрибут @onclick, добавленный в HTML-тег кнопки, позволяет связать с кнопкой метод Increment, определённый в блоке кода компонента. При каждом нажатии кнопки метод выполняется.
6) Тег <PageTitle> ссылается на компонент из библиотеки базовых классов. Тот же синтаксис используется при использовании пользовательских компонентов Blazor в вашем проекте.

Как Blazor работает внутри?
В зависимости от модели хостинга (о них в продолжении) Blazor работает по-разному. Вы можете использовать одни и те же компоненты независимо от того, какую модель хостинга вы выберете. Можно создать библиотеку классов, содержащую компоненты Blazor, чтобы использовать их в разных приложениях. Приложение сможет получить доступ к библиотеке классов и использовать компоненты Blazor вне зависимости от модели хостинга.

Почему Blazor — это не Silverlight
Silverlight был откровенным провалом. Но не Microsoft отказалась от этой технологии. Это была архитектура, которая оказалась не в том месте и не в то время. Silverlight был основан на плагине для браузера. Плагины для браузера (вроде Flash) были обычным явлением в те времена, но постепенно от них стали отказываться, не в последнюю очередь из-за проблем с безопасностью.

Blazor основан на открытых веб-стандартах, таких как HTML, CSS и WebAssembly. Очень вероятно, что эти технологии будут поддерживаться в течение многих десятилетий. Кроме того, использование открытых стандартов означает, что без каких-либо плагинов или расширений Blazor работает в каждом браузере в любой операционной системе.
Blazor — это подходящее кроссплатформенное решение пользовательского веб-интерфейса .NET (которым всегда хотел быть Silverlight), но сделанное правильно.

Окончание следует…

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

День 1991. #BlazorBasics
Основы Blazor. Что Такое Blazor? Окончание
Начало

Модели хостинга
1. Blazor WebAssembly — наиболее известная модель, в которой код .NET запускается в браузере. При первом запросе к сайту браузер загружает приложение, включая среду выполнения .NET. Код приложения написан на C#, а среда выполнения .NET преобразует код C# в двоичный в WebAssembly во время выполнения.
Браузер клиента хранит WebAssembly, среду выполнения .NET и код приложения. Для этой модели первоначальная загрузка среды выполнения и веб-приложения составляет около 1–5МБ. Общий размер зависит от размера вашего приложения.
Преимущество в том, что после загрузки весь код приложения оказывается на устройстве, а код в WebAssembly может выполняться на стороне клиента. Клиент подключается к серверной части только для получения дополнительных данных. Это делает подход Blazor WebAssembly масштабируемым.

2. Blazor Server был первой моделью хостинга, представленной в .NET Core 3. Веб-приложение запускается на сервере, а клиент подключается с помощью соединения SignalR (веб-сокет).
Браузер клиента хранит Blazor.js. Клиент и сервер взаимодействуют через соединение SignalR. Среда выполнения .NET, API и код приложения содержатся на сервере.
Для этого подхода требуется сервер, способный выполнять код .NET, поскольку приложение запускается на сервере, обычно в ASP.NET Core. Масштабируемость имеет свои ограничения, поскольку каждый клиент подключается к серверу, используя постоянное соединение через веб-сокет с помощью SignalR.
Однако он обеспечивает более быструю загрузку и начальный рендеринг страницы, поскольку с сервера клиенту передаются только HTML и CSS, которые появляются на экране. У вас также есть полный доступ к серверным технологиям, поскольку код выполняется на сервере.
Blazor Server зависит от стабильного сетевого подключения.

3. Blazor Hybrid — новейшая модель хостинга, а также самая сложная. Приложение частично работает на нативной платформе. Другая часть запускается в браузере. Идея состоит в том, чтобы объединить веб-технологии для реализации приложения с нативным доступом к API.
Автономные сценарии могут выиграть от гибридного подхода Blazor. Вы также можете использовать нативные компоненты UI для создания своего приложения. Однако развёртывание и реализация гораздо сложнее по сравнению с другими подходами. В превью .NET 9 включён шаблон гибридного приложения Blazor и MAUI, где вы можете посмотреть эту модель в деле.

Что выбрать?
Все модели хостинга имеют свои сильные и слабые стороны. Лучший совет — использовать модель хостинга, которая соответствует нефункциональным требованиям веб-приложения. Руководство в документации Microsoft поможет сделать выбор.
Для внутреннего приложения с известным количеством пользователей я бы использовал Blazor Server. Можно писать как внешний, так и внутренний код в одном проекте. Код работает во всех браузерах, даже в старых, которые не поддерживают WebAssembly.

Для приложения, ориентированного на клиента, с масштабируемым количеством пользователей я бы использовал Blazor WebAssembly. Это заставит реализовать отдельные интерфейс и серверную часть, что позволит лучше контролировать границы безопасности. Также его можно масштабировать по мере необходимости. Есть экономия на инфраструктуре за счёт перекладывания части работы с сервера на клиента.

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

День 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

День 2018. #BlazorBasics
Основы Blazor. Привязка Данных
Привязка данных используется для синхронизации данных между пользовательским интерфейсом и моделью данных C#. Также она позволяет реагировать на события, которые запускает пользователь или браузер.

1. Одностороннее связывание — связывание свойств
Это самый базовый подход, используемый для вывода содержимого свойства или переменной C# на экран:

<h1>@Title</h1>

@code {
  public string Title { get; set; }
}

В этом компоненте в элемент <h1> выводятся данные с помощью символа @, за которым следует имя свойства или переменной. Всякий раз, когда содержимое свойства Title изменяется, UI автоматически обновляется, чтобы отразить новое значение.
Тот же подход можно использовать, чтобы предоставить значение свойства в качестве аргумента для параметра компонента.

@page "/MyPage"
<MyComponent Title="@Name" />
…

Здесь мы отображаем дочерний компонент MyComponent, задавая его параметру Title значение параметра Name страницы MyPage.

2. Двусторонняя привязка
При использовании двусторонней привязки данных данные передаются из модели данных в UI и обратно:

<input @bind="Username" />

@code {
  public string Username { get; set; }
}

В этом компоненте мы привязываем свойство Username к свойству value текстового поля. Синтаксис @bind — это сокращение. Каждый компонент имеет свойство по умолчанию, привязываемое при использовании сокращённого синтаксиса. Мы также могли бы использовать более длинную форму и явно привязаться к свойству value:

<input @bind-value="Username" />
…

Заметьте, что важно использовать правильный синтаксис. Например, при использовании компонента InputText, Value нужно писать с заглавной буквы, потому что компонент имеет свойство Value:

<InputText @bind-Value="Username" />

Обычно используйте нижний регистр для стандартных HTML-элементов и заглавные буквы для свойств компонентов Blazor.

3. Привязка событий
В дополнение к односторонней и двусторонней привязке данных мы можем привязать метод C# к событию:

<h3>User</h3>

<EditForm Model="@Model" OnSubmit="@Save">
  <InputText @bind-Value="Model.Username" />
  <input type="submit" value="Submit" />
</EditForm>

@code {
  public User Model { get; set; } = new User();
  public void Save()
  {
    // Сохраняем пользователя
  }
  
  public class User
  {
    public string Username { get; set; }
  }
}

Здесь мы привязываем:
- свойство Model к параметру Model компонента EditForm,
- свойство Value компонента InputText к свойству Username класса User,
- метод Save к событию OnSubmit компонента EditForm.
Когда пользователь отправляет форму с помощью кнопки отправки, срабатывает событие OnSubmit и вызывается метод Save. В методе Save мы можем получить доступ к имени пользователя с помощью свойства Model и, например, сохранить его в базе данных.

Событие можно связать и с отдельным HTML-элементом:

<input type="button" @onclick="Save" />

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

День 2025. #BlazorBasics
Основы Blazor. Маршрутизация и Навигация. Начало
Маршрутизация — ключевая функция любого одностраничного приложения. Она позволяет разработчику организовать веб-сайт, а пользователю — перемещаться по разным страницам.

Когда мы используем директиву @page в компоненте Blazor, компилятор добавляет RouteAttribute во время компиляции, делая компонент доступным в качестве маршрута.

Маршрутизатор в Blazor
При создании проекта Blazor из шаблона в файле App.razor создаётся такой код:

<Router AppAssembly="@typeof(App).Assembly">
  <Found Context="routeData">
    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    <FocusOnNavigate RouteData="@routeData" Selector="h1" />
  </Found>
  <NotFound>
    <PageTitle>Not found</PageTitle>
    <LayoutView Layout="@typeof(MainLayout)">
      <p role="alert">Sorry, there's nothing at this address.</p>
    </LayoutView>
  </NotFound>
</Router>

Маршрутизатор работает одинаково как в приложениях Blazor Server, так и в WebAssembly. При запуске он считывает сборку приложения (из свойства AppAssembly) и ищет RouteAttribute, применённый к скомпилированным классам компонентов Blazor.

Если маршрут найден, используется компонент RouteView для визуализации представления, связанного с информацией о маршрутизации. Также устанавливается компонент макета по умолчанию - DefaultLayout (он используется для всех страниц, которые явно не указывают макет с помощью директивы @layout).
Если маршрут не найден, отображается простое сообщение об ошибке. Его можно изменить и сделать более дружелюбным к пользователю.

FocusOnNavigate позволяет поместить фокус на элементе HTML после завершения навигации. Можно использовать любой селектор CSS.

Важно: Маршрутизация в Blazor требует, чтобы мы установили тег <base> в разделе заголовка HTML. В шаблоне по умолчанию он устанавливается в файле _Host.cshtml. Измените это значение в зависимости от того, где и как вы размещаете своё приложение.

NavigationManager
NavigationManager позволяет нам переходить с одной страницы на другую в коде C#.

@page "/list"
@inject NavigationManager Nav
<ul>
  <li @onclick="() => NavigateTo(1)">1</li>
  <li @onclick="() => NavigateTo(2)">2</li>
</ul>

@code {
  public void NavigateTo(int id)
  {
    Nav.NavigateTo($"item/{id}");
  }
}

Мы внедрили NavigationManager на страницу при помощи директивы @inject и использовали его в метода NavigateTo, привязанном к элементам списка через событие @onclick. При навигации с использованием NavigationManager мы можем предоставить различные опции (NavigationOptions). Например, обойти клиентскую маршрутизацию и заставить браузер загрузить новую страницу с сервера с помощью свойства ForceLoad. Или заменить запись истории с помощью свойства ReplaceHistoryEntry.

Помимо инициирования навигации, мы также можем прослушивать событие LocationChanged для изменения маршрута и выполнять пользовательский код при навигации на определенную страницу.

Окончание следует…

Источник: https://www.telerik.com/blogs/blazor-basics-blazor-routing-navigation-fundamentals

День 2026. #BlazorBasics
Основы Blazor. Маршрутизация и Навигация. Окончание
Начало

Маршруты
Маршруты страниц Blazor определяются аналогично маршрутам Razor Pages. Они могут включать параметры в фигурных скобках и ограничения параметров, указанные после двоеточия:
@page "/list"
@page "/item/{id}" – параметр id
@page "/item/{id:int}" – целочисленный параметр id

Cтроки запроса
Чтобы компонент страницы мог читать параметр из строки запроса, нужно использовать атрибуты Parameter и SupplyParameterFromQuery:

@page "/search"
<h3>Результаты поиска</h3>
<p>Вы искали: @FirstName @LastName</p>

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

  [Parameter]
  [SupplyParameterFromQuery]
  public string LastName { get; set; }
}

Когда мы вызываем URL /search?firstname=Jon&lastname=Smith, Blazor назначает обоим свойствам соответствующие части строки запроса. Если вы хотите иметь другое имя для свойства, чем в URL, можно использовать свойство Name атрибута SupplyParameterFromQuery, чтобы определить имя параметра строки запроса.

Компоненты NavLink и NavMenu
Компонент NavLink можно использовать вместо HTML-тега <a>. Он автоматически применяет класс CSS “active” в зависимости от того, соответствует ли его URL текущему URL.

Компонент NavMenu в шаблоне проекта Blazor содержит пример использования компонента NavLink. Вот его упрощённый код:

<nav>
  <NavLink href="" Match="NavLinkMatch.All">
    Home
  </NavLink>
  <NavLink href="counter">
    Counter
  </NavLink>
  …
</nav>

Поведение сопоставления маршрута с адресом ссылки настраивается с помощью перечисления NavLinkMatch:
- All - ссылка активна, если адрес полностью соответствует адресу текущего компонента.
- Prefix - ссылка активна, если адрес соответствует началу адреса текущего компонента (по умолчанию).
Также можно предоставить пользовательский класс CSS для активного NavLink с помощью свойства ActiveClass (по умолчанию — "active").

Индикация загрузки между переходами страниц
Иногда страницы могут загружаться в течение длительного времени. Мы можем использовать компонент Navigating в компоненте Router, чтобы показать пользовательскую разметку во время перехода между страницами:

<Router AppAssembly="@typeof(App).Assembly">
  …
  <Navigating>
    <p>Loading…</p>
  </Navigating>
</Router>

Однако лучшим решением будет загружать данные на странице асинхронно, а переходы между страницами делать как можно более быстрыми.

Итого
Маршрутизация и навигация являются основополагающими при работе с одностраничными приложениями. Blazor обеспечивает простую, но мощную реализацию обоих из коробки. Не нужно выбирать один из нескольких вариантов маршрутизации; всё это включено в Blazor. Тем не менее, он предоставляет много места для пользовательского кода и является очень гибким и расширяемым. Он не только обрабатывает простые варианты использования, но и предоставляет API для сложных сценариев.

Источник: https://www.telerik.com/blogs/blazor-basics-blazor-routing-navigation-fundamentals

День 2033. #BlazorBasics
Основы Blazor. (Ре-)Рендеринг Компонентов. Начало
Рендеринг компонентов — основная механика приложений Blazor, превращающая компоненты C# в HTML и CSS. Методы жизненного цикла позволяют нам выполнять пользовательский код синхронно или асинхронно.

Приложения Blazor состоят из дерева компонентов, которые создают интерактивный UI. Рендеринг начинается на вершине дерева и переходит к дочерним элементам каждого компонента. Так родительский компонент решает, какие дочерние компоненты создавать.

Методы жизненного цикла компонентов Blazor
Процесс рендеринга не может быть прерван; в противном случае UI бы «завис». Поэтому компоненты Blazor используют методы жизненного цикла, чтобы позволить выполнять пользовательский код в течение их жизненного цикла.

Компонент Blazor впервые отрисовывается после создания его экземпляра при включении в качестве дочернего компонента см. диаграмму ниже.

Метод SetParametersAsync
Это первый метод обратного вызова в жизненном цикле компонента. Он получает параметры, предоставленные родительским компонентом. Переопределяя SetParametersAsync, мы можем использовать пользовательский код для изменения значений, предоставляемых родительским компонентом. По умолчанию параметры будут установлены в свойства, декорированные атрибутом Parameter. Если мы хотим использовать параметры компонента по-другому, мы можем использовать пользовательский код и переопределить метод SetParametersAsync, чтобы определить желаемое поведение.

@code {
  // параметры компонента

  public override async Task 
   SetParametersAsync(ParameterView pv)
  {
    // пользовательский код

    await base.SetParametersAsync(pv);
  }
}

Методы OnInitialized и OnInitializedAsync
После того, как компонент Blazor завершает выполнение метода SetParametersAsync и, следовательно, все параметры из родительского компонента установлены, вызываются методы жизненного цикла OnInitialized и OnInitializedAsync. Это идеальное место для загрузки данных из БД и назначения их свойствам, используемым в шаблоне компонента.

@code {
  private string? message;

  [Parameter]
  public string Name { get; set; }

  protected override void OnInitialized()
  {
    message = $"Привет, {Name}!";
  }
}

Как показано в этом примере, мы также можем использовать значения, параметров компонента в синхронном методе жизненного цикла OnInitialized.

Окончание следует…

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

День 2034. #BlazorBasics
Основы Blazor. (Ре-)Рендеринг Компонентов. Окончание
Начало

Методы OnParametersSet и OnParametersSetAsync
SetParametersAsync вызывается только при первом рендеринге компонента Blazor. А методы OnParametersSet и OnParametersSetAsync запускаются всякий раз, когда родительский компонент повторно отрисовывается, предоставляя другие значения для параметров дочернего компонента.

Переопределение этих методов предоставляет нам доступ к обновлению значений в компоненте на основе нового набора параметров.

@code {
  private string? message;

  [Parameter]
  public string Name { get; set; }

  protected override void OnParametersSet()
  {
    message = $"Привет, {Name}!";
  }
}

После завершения методов OnParametersSet или OnParametersSetAsync запускается автоматическая повторная отрисовка компонента.

Метод StateHasChanged
Мы можем вызвать метод StateHasChanged класса ComponentBase, чтобы сообщить компоненту Blazor об изменении состояния компонента. Он запустит повторную отрисовку компонента, которая вызовет все применимые методы жизненного цикла в процессе отрисовки.

Не следует вызывать метод StateHasChanged в следующих сценариях:
- Обработка событий. Неважно, являются ли события синхронными или асинхронными. Класс ComponentBase запускает отрисовку для большинства обработчиков событий.
- Реализация методов жизненного цикла, таких как OnParametersSetAsync или OnInitialized (синхронных или асинхронных). Класс ComponentBase запускает отрисовку для большинства событий жизненного цикла.

Как правило, обычно вам не нужно вызывать метод StateHasChanged вручную. Однако, если вы ожидаете, что UI покажет обновленное значение, а этого не происходит, велики шансы, что вызов StateHasChanged в правильном месте исправит вашу проблему.

Подробнее о крайних случаях, когда вызов StateHasChanged требуется для получения желаемого поведения, читайте в документации по рендерингу компонентов.

Асинхронные и синхронные методы жизненного цикла
Для синхронного кода родительские компоненты всегда визуализируются перед дочерними компонентами. Асинхронный код более сложныq. При использовании асинхронных методов жизненного цикла порядок завершения родительского и дочернего компонента не является детерминированным, поскольку он зависит от кода инициализации. Однако Blazor обеспечивает доступность и корректное обновление параметров компонента при визуализации дочернего компонента.

Используйте синхронные методы жизненного цикла, когда не нужно ожидать асинхронных операций. Когда же нужно вызвать БД или использовать другие асинхронные операции, используйте асинхронные методы.

Итого
Компоненты Blazor используют методы жизненного цикла для предотвращения блокировки пользовательского интерфейса и позволяют разработчикам выполнять пользовательский код:
- SetParametersAsync позволяет выполнять пользовательский код, обрабатывающий параметры, предоставленные родительским компонентом, только для первого рендеринга компонента.
- OnInitialized и OnInitializedAsync часто используются для загрузки данных из БД или для инициализации свойств, отображаемых как часть шаблона компонента.
- OnParametersSet и OnParametersSetAsync вызываются, когда родительский компонент повторно отрисовывается, предоставляя другой параметр дочернему компоненту.
- Если UI не отображает ожидаемое значение на экране, вы можете вызвать StateHasChanged в соответствующем месте кода.

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

День 2077. #BlazorBasics
Основы Blazor. Разбираем Шаблон Проекта Веб-Приложения Blazor. Начало
Решение о том, какой шаблон Blazor использовать, зависит от типа приложения, которое вы хотите создать. ASP.NET Core в .NET 8 вышел со значительными обновлениями архитектуры Blazor, которые включают новые режимы рендеринга, обеспечивающие большую производительность и гибкость.

Основы режимов рендеринга
ASP.NET Core с .NET 8 поддерживает 4 режима рендеринга.

1. Static Server
Статический SSR (Server Side Rendering) отображает статический HTML на сервере с помощью компонентов ASP.NET Razor. Как следует из названия, статический SSR не предлагает никакой интерактивности и полагается на стандартные POST-запросы веб-формы.

2. Interactive Server
Интерактивный SSR с использованием Blazor Server использует соединение SignalR для передачи событий и обновлений между сервером и веб-браузером.

3. Interactive WebAssembly
Interactive WebAssembly использует Blazor WebAssembly для рендеринга компонентов на клиенте. Логика приложения выполняется средой выполнения .NET WebAssembly.

4. Interactive Auto
Interactive Auto изначально будет выполнять рендеринг с использованием Blazor Server. Пока ресурсы для Blazor WebAssembly загружаются в браузер, приложение использует Blazor Server. После кэширования ресурсов Blazor WebAssembly последующие посещения будут работать с использованием Blazor WebAssembly.

Выбор правильного шаблона
В настоящее время существует довольно много вариантов шаблонов для Blazor. Решение о том, какой шаблон использовать, будет зависеть от типа приложения, которое вы хотите создать. Здесь мы сосредоточимся на шаблоне Blazor Web App, но сначала рассмотрим каждый вариант, чтобы понять различия (см. картинку).

- Blazor Web App — шаблон для создания приложения Blazor с серверным рендерингом и дополнительными режимами интерактивности сервера и клиента.
- Blazor Standalone WebAssembly App — используется для создания приложения Blazor WebAssembly с клиентским рендерингом и интерактивностью. Он не включает в себя серверный проект в решении. Этот шаблон идеально подходит для прогрессивных веб-приложений (PWA). Контент PWA можно добавить, отметив опцию Progressive Web Application во время настройки.
- Blazor Server App — используется для создания приложения Blazor с глобальной серверной интерактивностью. Шаблон предназначен только для запуска новых приложений .NET 6 и 7. Для приложений .NET 8 используйте шаблон Blazor Web App.
- Blazor Empty — базовая версия шаблона Server App. Предназначен только для запуска новых приложений .NET 6 и 7.
- .NET MAUI Blazor Hybrid App — используется для создания гибридного приложения Blazor и .NET MAUI. Идеально подходит для приложений, которые могут работать в Интернете, на настольных компьютерах и мобильных устройствах.

Новый шаблон Blazor Web App был создан как отправная точка для старта разработки под Blazor. В нём можно использовать несколько параметров для настройки генерируемого кода.

Продолжение следует…

Источник: https://www.telerik.com/blogs/unified-blazor-web-app-project-template-fully-explained

День 2078. #BlazorBasics
Основы Blazor. Разбираем Шаблон Проекта Веб-Приложения Blazor. Продолжение
Начало

Базовая конфигурация
Диалоговое окно Blazor Web App (см. картинку) предлагает много параметров для создания нового приложения Blazor: аутентификация, режим рендеринга, местоположение интерактивности и многое другое. Рассмотрим каждый набор параметров, чтобы понять, как это влияет на сгенерированный контент.

Базовое приложение Blazor
С этой конфигурацией приложение не будет иметь интерактивности, будет включать только файлы, необходимые для запуска приложения, и будет использовать статический рендеринг на стороне сервера.
Кроме того, мы отключим параметр Include sample pages (Включить примеры страниц) и выберем None (Нет) для Interactive render mode (Режим интерактивного рендеринга) (см. картинку).

Поскольку это «голая» конфигурация, каждый файл, включённый в это решение, будет отображаться во всех проектах, хотя иногда файлы будут включать дополнительный код для поддержки определённых функций.

/wwwroot — статические ресурсы: CSS, JavaScript, JSON, изображения и HTML. Содержимое этой папки всегда доступно извне после публикации приложения.
/Components — папка по умолчанию для компонентов приложения. Папки в Blazor автоматически определяют пространство имён компонента, если не указано иное.
/../Layout — компоненты макета страницы.
/../../MainLayout.razor — макет по умолчанию для приложения.
/../../MainLayout.razor.css — CSS для компонента MainLayout.
/../Pages – компоненты страниц. Они имеют директиву маршрута и могут быть связаны с URL.
/../../Error.razor – страница ошибок по умолчанию.
/../../Home.razor – домашняя страница по умолчанию. Отображается при переходе на корневой URL приложения "/".
/../_Imports.razor – для глобальных директив using для всех файлов .razor в этой папке или в дочерних.
/../App.razor – первый компонент, который рендерит приложение. Содержит базовый HTML приложения: теги html, head и body, ссылки на статические ресурсы (CSS, JS, шрифты и т.п.).
Компоненты HeadOutlet и Routes являются дочерними элементами компонента App, и их параметры могут различаться в зависимости от выбранного режима рендеринга.
/../Routes.razor — маршрутизатор приложения.
/appsettings.json — настройки приложения.
/Program.cs — точка входа приложения. Здесь определяется конфигурация.

Запуск «голого» приложения отобразит домашнюю страницу с “Hello, world!”.
Такой вариант подходит для начала с нуля, т.к. присутствует только минимальный набор компонентов.

Добавление примеров страниц
Если создать проект с опцией «Включить примеры страниц», приложение не будет иметь интерактивности, но будет включать статические ресурсы для предоставления базовой темы, элементы навигации и образец компонента для отображения данных.
/wwwroot будет содержать минимизированный файл CSS Bootstrap и значок. Bootstrap используется для создания базовой темы для приложения. Кроме того, в файлы app.css и component.css будут добавлены темы.
Также добавятся примеры компонента страницы (Weather) и меню (NavMenu). В компоненте Weather @attribute [StreamRendering] демонстрирует пример длительного процесса рендеринга. StreamingRendering улучшает пользовательский опыт, перерисовывая компонент по мере обработки данных на сервере.

Эта конфигурация является хорошим началом для приложений, которым не требуется интерактивность. Дополнительные примеры тем и компонентов полезны для быстрого начала работы. Далее рассмотрим интерактивность сервера.

Продолжение следует...

Источник: https://www.telerik.com/blogs/unified-blazor-web-app-project-template-fully-explained

День 2079. #BlazorBasics
Основы Blazor. Разбираем Шаблон Проекта Веб-Приложения Blazor. Продолжение
1. Основы режимов рендеринга
2. Базовая конфигурация

Параметр интерактивности Server
Существует три режима интерактивности: Server, WebAssembly и Auto. И для каждого можно выбрать место настройки интерактивности Global или Per Page/Component.

Когда интерактивность добавляется в приложение Blazor, файлы App.razor и Program.cs будут настроены с параметрами для желаемого режима интерактивности. Если включен параметр Include sample pages, примеры компонентов показывают, как пользоваться выбранным режимом.

Глобальный интерактивный сервер
Interactive render mode: Server
Interactivity location: Global

В режиме интерактивного сервера (см. картинку) Program.cs включает операторы для включения этой функции:

builder.Services.AddRazorComponents()
  .AddInteractiveServerComponents();
    
app.MapRazorComponents<App>()
  .AddInteractiveServerRenderMode();    

Настройка Global применит режим рендеринга приложения в App.razor. Экземпляры компонентов HeaderOutlet и Routes получат @rendermode="@InteractiveServer", т.е. любой дочерний элемент этих компонентов будет иметь интерактивность сервера.

Примеры компонентов Counter и Weather сгенерируются в соответствии с настройкой Global. Поскольку интерактивный режим был установлен в экземпляре компонента Routes, в примерах не нужно указывать режим рендеринга. В примере компонента Weather не будет @attribute [StreamRendering], поскольку интерактивность через событие OnInitializedAsync обеспечивает аналогичный опыт.

Эта конфигурация подходит для приложений, которые будут полностью интерактивными для всех компонентов.

Постраничный/Покомпонентный интерактивный сервер
Interactive render mode: Server
Interactivity location: Per Page/Component

Сгенерированный проект будет похож на предыдущий, но компоненты App, Counter и Weather будут немного отличаться.

При использовании параметра Per Page/Component App.razor не указывает режима рендеринга для экземпляров компонентов. Это позволяет любой странице или дочернему компоненту выбирать свой режим рендеринга. Если режим рендеринга не указан, то эти компоненты рендерятся статически (без интерактивности).

Чтобы продемонстрировать гибкость проекта Per Page/Component, образцы компонентов Counter и Weather включают соответствующие конфигурации. В код компонента Counter добавлен @rendermode InteractiveServer, указывающий, что он использует режим интерактивный сервер. Компонент Weather не требует интерактивности и отображается статически. @attribute [StreamRendering] используется для отображения сообщения «загрузка» во время загрузки данных компонента Weather. После загрузки данных StreamRendering обновляет компонент для окончательной отрисовки результатов.

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

Далее рассмотрим параметры режима рендеринга WebAssembly.

Продолжение следует…

Источник: https://www.telerik.com/blogs/unified-blazor-web-app-project-template-fully-explained

День 2080. #BlazorBasics
Основы Blazor. Разбираем Шаблон Проекта Веб-Приложения Blazor. Продолжение
1. Основы режимов рендеринга
2. Базовая конфигурация
3. Параметр интерактивности Server

Параметр интерактивности WebAssembly
В отличие от режимов интерактивности сервера, которые создают только один проект на решение, параметры WebAssembly и Auto включают два проекта. Один проект - для приложения сервера, а другой — для интерактивных страниц и компонентов клиента.

Глобальная интерактивность WebAssembly
Interactive render mode: WebAssembly
Interactivity location: Global

В проекте сервера Program.cs включает операторы для активации интерактивности WebAssembly:
- AddInteractiveWebAssemblyComponents добавляет сервисы интерактивности на клиенте.
- AddInteractiveWebAssemblyRenderMode настраивает интерактивный рендеринг на стороне клиента.
- AddAdditionalAssemblies находит компоненты в клиентском приложении, создавая ссылку на серверное приложение.

builder.Services.AddRazorComponents()
  .AddInteractiveWebAssemblyComponents();

app.MapRazorComponents<App>()
  .AddInteractiveWebAssemblyRenderMode()
  .AddAdditionalAssemblies(typeof(Counter).Assembly);

Настройка Global применит режим рендеринга приложения в App.razor. Экземпляры компонентов HeaderOutlet и Routes получат @rendermode="@InteractiveWebAssembly", т.е. любые дочерние компоненты этих компонентов будут иметь интерактивность WebAssembly. Файл Routes.razor создаётся в клиентском приложении, где происходит вся интерактивность.

Эта конфигурация подходит для приложений, которые используют интерактивность WebAssembly для всех компонентов, что снижает нагрузку на сервер.

Постраничный/Покомпонентный интерактивный WebAssembly
Interactive render mode: WebAssembly
Interactivity location: Per Page/Component

В этой конфигурации (см. картинку) компонент App.razor не указывает режима рендеринга для экземпляров компонентов. Страницы и компоненты выбирают свой режим рендеринга - по умолчанию рендерятся статически (без интерактивности). Для поддержки как серверных, так и клиентских компонентов компонент Route генерируется в проекте Server и ссылается на маршруты компонентов Client через свойство AdditionalAssemblies:

csharp 
<Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(Client._Imports).Assembly }">
 …
</Router>

Counter — единственный интерактивный компонент в такой конфигурации, поэтому он размещается в проекте Client. Атрибут @rendermode InteractiveWebAssembly в Counter указывает на его режим интерактивности. Остальные компоненты генерируются в проекте Server, поскольку они будут визуализироваться статически. Компонент Weather настроен с использованием StreamRendering.

Эта конфигурация подходит для приложений, которые необходимо оптимизировать с помощью статического рендеринга сервера, когда интерактивность не нужна. Для компонентов, которым требуется интерактивность WebAssembly, эту функцию можно включить с помощью атрибута rendermode.

В заключение рассмотрим параметр режима рендеринга Auto.

Окончание следует…

Источник: https://www.telerik.com/blogs/unified-blazor-web-app-project-template-fully-explained

День 2081. #BlazorBasics
Основы Blazor. Разбираем Шаблон Проекта Веб-Приложения Blazor. Окончание
1. Основы режимов рендеринга
2. Базовая конфигурация
3. Параметр интерактивности Server
4. Параметр интерактивности WebAssembly

Параметр интерактивности Auto
Автоматическая интерактивная визуализация (см. картинку) будет использовать сервер или WebAssembly для интерактивности в зависимости от ресурсов, доступных на клиенте. Выбор параметра Auto (Server и WebAssembly) даст практически идентичные результаты, как и для интерактивности WebAssembly с соответствующими параметрами Global или Per Page/Component. Основные различия заключаются в файле Program.cs и использовании атрибутов rendermode в компонентах.

В серверном проекте файл Program.cs будет вызывать методы для активации интерактивности как WebAssembly, так и Server. Режимы визуализации приложения также настраиваются с помощью методов AddInteractiveWebAssemblyRenderMode и AddInteractiveServerRenderMode. Метод AddAdditionalAssemblies находит компоненты в клиентском приложении, создавая ссылку на серверное приложение.
```csharp
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents()
.AddInteractiveWebAssemblyComponents();

app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode()
.AddInteractiveWebAssemblyRenderMode()
.AddAdditionalAssemblies(typeof(Counter).Assembly);
``
При выборе опции Global к экземпляру компонента Routes в App.razor применяется атрибут InteractiveAuto. Поскольку режим устанавливается на корневом уровне приложения, все компоненты для этой настройки будут сгенерированы в проекте Client.
Для опции Per Page/Component атрибут InteractiveAuto отображается только в компоненте Counter. Все остальные компоненты используют статическую серверную визуализацию и генерируются в проекте Server.

Автоматический рендеринг обеспечивает баланс между серверным и WebAsembly режимами. Эта конфигурация подходит для приложений, которым может потребоваться оптимизировать начальное время загрузки приложения.

Примечание о параметре Authentication type (Тип аутентификации)
Параметр создаёт все файлы, необходимые для аутентификации пользователей и управления профилями пользователей. Для получения дополнительной информации по этой теме обратитесь к официальной документации.

Итого
Начало нового проекта Blazor в .NET 8 может показаться сложным на первый взгляд из-за обширного списка шаблонов и параметров. Шаблон Blazor Web App — лучшее решение для приложений Blazor, которые могут использовать статический рендеринг сервера (не PWA и не приложения Blazor Hybrid). Шаблон Blazor Web App объединяет все конфигурации Blazor в одну, предоставляя при этом несколько вариантов для выбора правильной отправной точки. Знание того, какие возможности требуются вашему приложению, определит, какие параметры следует выбрать, но в любом случае Blazor можно перенастроить вручную в любое время, если возникнут новые требования.

Источник: https://www.telerik.com/blogs/unified-blazor-web-app-project-template-fully-explained