Início / coding / Perguntas / 77296455
Accepted
jonyfries
Asked: 2023-10-15 19:36:02 +0800 CST

Blazor Virtualize não exibe nada

  • 772

Estou tentando usar o recurso Virtualize do blazor, que aparece em toda a documentação que considero trivialmente simples. Porém, quando executo o código abaixo, o foreach é exibido conforme o esperado, mas o Virtualize não exibe nada. Estou tentando fazer isso com o aplicativo Web de visualização do .NET 8.0.

@page "/mypage"

<PageTitle>My Page</PageTitle>

<p>foreach</p>

<div style="height:100px;overflow-y:scroll">
    @foreach (string item in stringList)
    {
        <div>@item</div>
    }
</div>

<p>Virtualize</p>
<div style="height:100px;overflow-y:scroll">
    <Virtualize Items="@stringList">
        <div>@context</div>
    </Virtualize>
</div>

@code
{
    private List<string>? stringList;

    protected override void OnInitialized() =>stringList ??= new() { "Here's a string!", "Here's another string!" };
}

Aqui estão os resultados que obtenho:

resultado do código

Também tentei definir o contexto com um nome diferente e adicionar conteúdo de espaço reservado. Todos resultaram em nada sendo exibido.

.net-core

1 respostas

  1. Best Answer

    Você precisa declarar o atributo do modo de renderização para a página. No .NET 8 Blazor você precisa declarar o modo de renderização para habilitar a interatividade. Parece que o Virtualize é considerado um componente interativo.

    @attribute [RenderModeAuto]
@page "/"

<PageTitle>My Page</PageTitle>

<p>foreach</p>

<div style="height:100px;overflow-y:scroll">
    @foreach (string item in stringList)
    {
        <div>@item</div>
    }
</div>

<p>Virtualize</p>
<div style="height:100px;overflow:auto;">
    <Virtualize Items="@stringList">
        <div style="color:red;"> something @context</div>
    </Virtualize>
</div>

@code
{
    private List<string>? stringList;

    protected override void OnInitialized() => stringList ??= new() { "Here's a string!", "Here's another string!", "Here's a string!", "Here's another string!", "Here's a string!", "Here's another string!", "Here's a string!", "Here's another string!" };
}
    • 2

relate perguntas