Здравствуйте, Ikemefula, Вы писали:


I>То есть, ты просто от балды по ходу беседы вбросил, что де будет именно несколько десятков строк.
I>А я тебе говорю, что может быть и на порядки больше данных, и тогда боксинг станет существенным препятствием.
Ну вообще то даже в блазоре сейчас используется виртуализация.
https://docs.microsoft.com/ru-ru/aspnet/core/blazor/components/virtualization?view=aspnetcore-5.0

Без виртуализации обычный список может использовать цикл C# foreach для отрисовки каждого элемента в списке. В следующем примере:

allFlights представляет собой коллекцию рейсов самолетов.
Компонент FlightSummary отображает сведения о каждом рейсе.
Атрибут директивы @key сохраняет связь каждого компонента FlightSummary с его отображаемым рейсом элемента FlightId рейса.

<div style="height:500px;overflow-y:scroll">
    @foreach (var flight in allFlights)
    {
        <FlightSummary @key="flight.FlightId" Details="@flight.Summary" />
    }
</div>

Если коллекция содержит тысячи рейсов, отрисовка рейсов занимает много времени и пользователи сталкиваются с заметной задержкой отображения пользовательского интерфейса. Большинство рейсов не отрисовываются, потому что они выходят за пределы высоты элемента <div>.

Вместо отрисовки сразу всего списка рейсов замените цикл foreach в предыдущем примере на компонент Virtualize:

Укажите allFlights как источник фиксированного элемента для Virtualize<TItem>.Items. Компонент Virtualize выполняет отрисовку только видимых в данный момент рейсов.
Укажите контекст для каждого рейса с помощью параметра Context. В следующем примере элемент flight используется в качестве контекста, который обеспечивает доступ к каждому участнику рейса.

<div style="height:500px;overflow-y:scroll">
    <Virtualize Items="@allFlights" Context="flight">
        <FlightSummary @key="flight.FlightId" Details="@flight.Summary" />
    </Virtualize>
</div>

Если контекст не указан с помощью параметра Context, используйте значение context в шаблоне содержимого элемента, чтобы получить доступ к членам каждого рейса:

<div style="height:500px;overflow-y:scroll">
    <Virtualize Items="@allFlights">
        <FlightSummary @key="context.FlightId" Details="@context.Summary" />
    </Virtualize>
</div>

Компонент Virtualize:

вычисляет количество подлежащих отрисовке элементов на основе высоты контейнера и размера отображаемых элементов;
пересчитывает и повторно отрисовывает элементы при прокрутке пользователем;
извлекает из внешнего API только тот срез записей, который соответствует текущей видимой области, не скачивая все данные из коллекции.
Содержимое элемента для компонента Virtualize может включать в себя следующее:

обычный код HTML и код Razor, как показано в предыдущем примере;
один или несколько компонентов Razor;
сочетание компонентов HTML/Razor и Razor.