Пример. Использование @key для управления сохранением элементов и компонентов
Позволяет гарантировать сохранение состояния пользовательского интерфейса при изменении коллекции в поддереве.Исходный код
-------------------------- Key\People.razor --- компонент предок
@page "/people"
@using System.Timers
@implements IDisposable
<p>
<h4 class="p-4">
Пример. <a target="_blank"
href="https://docs.microsoft.com/ru-ru/aspnet/core/blazor/components/?view=aspnetcore-5.0#use-key-to-control-the-preservation-of-elements-and-components">Использование @key для управления сохранением элементов и компонентов</a>
</h4>
</p>
<ol>
@foreach (var person in people)
{
<li>
<Details @key="person" Data="@person.Data" />
</li>
}
</ol>
@code {
private Timer timer = new Timer(1000);
public List<Person> people =
new List<Person>()
{
{ new Person { Data = "Person 1" } },
{ new Person { Data = "Person 2" } },
{ new Person { Data = "Person 3" } }
};
protected override void OnInitialized()
{
timer.Elapsed += (sender, eventArgs) => OnTimerCallback();
timer.Start();
}
private void OnTimerCallback()
{
_ = InvokeAsync(() =>
{
people.Insert(1,
new Person
{
Data = $"INSERTED {DateTime.Now.ToString("hh:mm:ss tt")}"
});
StateHasChanged();
});
}
public void Dispose() => timer.Dispose();
public class Person
{
public string Data { get; set; }
}
}
-------------------------- Key\People.razor --- наследник
<input value="@Data" />
@code {
[Parameter]
public string Data { get; set; }
}