随着 .NET 8 的发布,Blazor 已成为全堆栈 Web UI 框架,可用于开发在组件或页面级别呈现内容的应用,其中包含:
默认情况下,交互式呈现模式还会预呈现内容。
Blazor 呈现模式
流式渲染是 .NET 8 Blazor 中另一个有前途的功能,在将静态服务器呈现与 Blazor 结合使用时,可以在响应流中流式传输内容更新。 流式呈现可以改善执行长期运行异步任务的页面的用户体验,以便在内容可用后立即通过呈现内容来完全呈现。流式渲染允许渲染静态 HTML 以及内容的占位符。一旦异步服务器端调用完成(意味着它可以传输数据),实际的 HTML 页面就会通过用实际数据填充占位符对象来更新。
/Pages/Weather.razor
@attribute [StreamRendering]
可以使用现有 PersistentComponentState 服务在 Blazor Web 应用中保留和读取组件状态
自动模式是我个人最期待的一种模式,它代表了 Blazor 的“终极”场景,允许将服务器端和 WebAssembly 结合在一起。
此场景提供来自服务器的初始页面,这意味着它将快速加载。随后,必要的对象被下载到客户端,因此下次页面加载时,它会从 Wasm 提供。
/Pages/Weather.razor
注意第2行:
@attribute [StreamRendering]
这允许新的 Blazor 流渲染功能发挥作用。
代码部分更新为:
@attribute [StreamRendering(false)]
然后单击“Weather”页面。请注意,这次没有显示“Loading…”消息,但页面需要几秒钟的时间才能呈现并显示实际的天气表。
打开新工程的 Program.cs 文件, 会看到以下新的配置
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents() //添加服务以支持呈现交互式服务器组件
.AddInteractiveWebAssemblyComponents(); //添加服务以支持呈现交互式 WebAssembly 组件
//终结点约定生成器扩展
app.MapRazorComponents()
.AddInteractiveServerRenderMode() //配置应用程序的服务器渲染模式
.AddInteractiveWebAssemblyRenderMode() //为应用配置 WebAssembly 呈现模式。
.AddAdditionalAssemblies(typeof(Counter).Assembly);
@rendermode renderMode
@code {
private static IComponentRenderMode renderMode =
new InteractiveWebAssemblyRenderMode(prerender: false);
}
@page "..."
@rendermode RenderMode.InteractiveServer
呈现模式 | 指令 | 注意事项 | WebSocket |
---|---|---|---|
交互式服务器 | @attribute [RenderModeInteractiveServer] | 放在SSR工程(BlazorApp1) | 切入页面会主动重连 |
交互式 WebAssembly | @attribute [RenderModeInteractiveWebAssembly] | 放在Wasm工程(BlazorApp1.Client) | 切入页面会主动断开 |
交互式自动 | @attribute [RenderModeInteractiveAuto] | 放在Wasm工程(BlazorApp1.Client) | 自动根据情况执行操作 |
RenderModeInteractiveServer.razor
路径:SSR工程(BlazorApp1)/Components/Pages
@page "/render-mode-InteractiveServer"
@rendermode InteractiveServer
InteractiveServer
@message
@code {
private string message = "Not clicked yet.";
private void UpdateMessage()
{
message = "Somebody clicked me!";
}
}
RenderModeInteractiveWebAssembly.razor
路径:Wasm工程(BlazorApp1.Client)/Pages
@page "/render-mode-InteractiveWebAssembly"
@rendermode InteractiveWebAssembly
InteractiveWebAssembly
@message
@code {
private string message = "Not clicked yet.";
private void UpdateMessage()
{
message = "Somebody clicked me!";
}
}
RenderModeInteractiveAuto.razor
路径:Wasm工程(BlazorApp1.Client)/Pages
@page "/render-mode-InteractiveAuto"
@rendermode InteractiveAuto
InteractiveAuto
@message
@code {
private string message = "Not clicked yet.";
private void UpdateMessage()
{
message = "Somebody clicked me!";
}
}
https://github.com/densen2014/net8test