.net 通过交互服务器渲染模式和流渲染的组合防止双重渲染

发布于11月21日

我正在探索.NET8的Blazor新特性，我遇到了一个问题，我的组件似乎呈现了两次.当我结合使用"流渲染"和"交互服务器渲染模式"时，出现了这个问题.

为了清楚起见，我简化了代码:

@attribute [StreamRendering]
@rendermode InteractiveServer

@if (data == null)
{
    <p>Loading...</p>
}
else
{
    <p>@data</p>
}

@code {
   private string? data;

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(1000);
        data = "Hello World!";
    }
}

在这段代码中，我希望"正在加载..."最初要显示的文本，然后在一段延迟后显示文本"Hello World！"应该取而代之.这是可行的，但一旦显示了data，组件就会重新呈现，加载的文本也会再次显示.

我的问题是:

我是对的，第二次重发是因为建立了到服务器的电路连接？
有没有办法防止第二次倒闭？

推荐答案

您可以阻止第一次渲染，或者告诉渲染引擎不要在包含数据的元素上清除属性为data-permanent的初始数据，这会给人一种不会渲染两次的感觉.

所有交互模式首先在服务器上呈现，然后向客户端发送html.要防止"预渲染"，请在构造函数上使用prerender参数.

CustomRenderModes.cs个

public static class CustomRenderModes
{
    public static readonly InteractiveAutoRenderMode InteractiveAutoRenderModeNoPreRender
        = new InteractiveAutoRenderMode(prerender: false);
    public static readonly InteractiveServerRenderMode InteractiveServerRenderModeNoPreRender
        = new InteractiveServerRenderMode(prerender: false);
    public static readonly InteractiveWebAssemblyRenderMode InteractiveWebAssemblyRenderModeNoPreRender
        = new InteractiveWebAssemblyRenderMode(prerender: false);
}

_imports.razor个

@using static KudosChat.Client.Models.CustomRenderModes

SomeComponent.razor个

@page "/thread/{ThreadId}"
@attribute [Authorize]
@rendermode InteractiveWebAssemblyRenderModeNoPreRender

Docs个

.net相关问答推荐

AutoMapper在实体框架查询后不知从哪里带来数据

在数据网格中：如何在更改单元格 A 中的值后显示单元格 B 中的更改

从删除项目时重新索引的列表中删除项目的最佳算法是什么？

使用 SSH.NET 查找具有特定文件名的最新 SFTP 文件

查找 2 个已知值之间的字符串

AsyncLocal 的语义与逻辑调用上下文有何不同？

DbContext 丢弃更改而不释放

Gacutil.exe 成功添加程序集，但在资源管理器中无法查看程序集.为什么？

C# 的部分类是糟糕的设计吗？

添加新实体标量时实体框架 4 映射片段错误

C# 有办法给我一个不可变的字典吗？

使用多个 MemoryCache 实例

如何正确停止BackgroundWorker

是否可以更改 Winforms 组合框以禁用输入？

Linq to SQL - 返回前 n 行

如何找到二维数组的大小？

为什么 double.NaN 不等于自身？

如何访问 Session 变量并在 javascript 中设置它们？

判断对象列表是否包含具有特定值的属性

WPF中的依赖属性和附加属性有什么区别？

实用课程推荐