Пример. Использование @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; }
}
    
Произошла ошибка. Это приложение может больше не отвечать до перезагрузки.(переведено) Произошла ошибка. Это приложение может больше не отвечать до перезагрузки.(переведено) Reload 🗙
Web hosting by Somee.com