Blazor 应用中的 Razor 页面中的变量显示问题

Question

我正在学习 Blazor。在我的页面上，当我单击“搜索”按钮时，_persons 列表的内容会闪烁，该变量是否正在被垃圾收集？预先感谢。

@page "/"
@using BlazorPorter.Models
@using BlazorPorter.Context
@using Microsoft.EntityFrameworkCore
@inject SqliteContext SqliteContext
@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

<form class="form-control">
    <input placeholder="id" @bind="_id"/>
    <input placeholder="name" @bind="_name"/>
    <button class="btn-primary" @onclick="@Insert">Insert</button>
</form>

<form class="form-control">
    <button class="btn-primary" @onclick="Search">Search</button>
</form>
@if (_persons != null)
{
    @foreach (Person p in _persons)
    {
        <p>@p.Id</p>
        <p>@p.Name</p>
    }
}

@code
{
    private string? _id;
    private string? _name;
    private List<Person>? _persons;

    private async Task Insert()
    {
        if (_id != null && _name != null)
        {
            await SqliteContext.AddAsync(new Person() { Id = _id, Name = _name });
            await SqliteContext.SaveChangesAsync();
        }
    }

    private void Search()
    {
        if (SqliteContext.Persons != null)
        {
            _persons = SqliteContext.Persons.ToList();
        }
    }
}

起初我以为 SqliteContext 没有查询内容，因为它没有显示在页面上。但当我使用断点调试它后，我意识到它就在那里。连续单击“搜索”按钮时，_persons 列表的内容也会闪烁。

Answer 1

只需将

@rendermode InteractiveServer

更改为

@rendermode @(new InteractiveServerRenderMode(prerender:false))

或

@rendermode @(new InteractiveServerRenderMode(prerender:false))

禁用预渲染。 https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#prerendering
页面渲染了两次（ prerender ， Interactiveserver ），所以它闪烁。