.net8 blazor 尝鲜 -ag凯发k8国际

全栈 web ui

随着 .net 8 的发布，blazor 已成为全堆栈 web ui 框架，可用于开发在组件或页面级别呈现内容的应用，其中包含：

• 用于生成静态 html 的静态服务器呈现。
• 使用 blazor server 托管模型的交互式服务器呈现。
• 使用 blazor webassembly 托管模型的交互式客户端呈现。
• 下载 blazor 捆绑包并激活 .net webassembly 运行时后，最初使用 blazor server，并在随后访问时使用 webassembly 自动进行交互式客户端呈现。 自动呈现通常会提供最快的应用启动体验。

默认情况下，交互式呈现模式还会预呈现内容。

blazor 呈现模式

流式渲染

流式渲染是 .net 8 blazor 中另一个有前途的功能，在将静态服务器呈现与 blazor 结合使用时，可以在响应流中流式传输内容更新。 流式呈现可以改善执行长期运行异步任务的页面的用户体验，以便在内容可用后立即通过呈现内容来完全呈现。流式渲染允许渲染静态 html 以及内容的占位符。一旦异步服务器端调用完成（意味着它可以传输数据），实际的 html 页面就会通过用实际数据填充占位符对象来更新。

/pages/weather.razor
@attribute [streamrendering]

保留组件状态

可以使用现有 persistentcomponentstate 服务在 blazor web 应用中保留和读取组件状态

auto mode

自动模式是我个人最期待的一种模式，它代表了 blazor 的“终极”场景，允许将服务器端和 webassembly 结合在一起。

此场景提供来自服务器的初始页面，这意味着它将快速加载。随后，必要的对象被下载到客户端，因此下次页面加载时，它会从 wasm 提供。

新建 blazor web app 工程

1. 默认情况下，blazor web app 模板设置为ssr服务器端呈现razor 组件
2. 选择“weather”菜单，页面将短暂显示“loading...”，然后在表格中呈现天气数据。这是前面讨论的流渲染功能的示例

/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);

将呈现模式应用于组件实例

1. 将服务器呈现模式应用于 dialog 组件实例：

2. 使用自定义配置直接引用实例化的静态呈现模式实例：

@rendermode rendermode
@code {
    private static icomponentrendermode rendermode = 
        new interactivewebassemblyrendermode(prerender: false);
}

3. 将呈现模式应用于组件定义

@page "..."
@rendermode rendermode.interactiveserver

4. 呈现模式

呈现模式	指令	注意事项
交互式服务器	@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
click me @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
click me @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
click me @message
@code {
    private string message = "not clicked yet.";
    private void updatemessage()
    {
        message = "somebody clicked me!";
    }
}

测试项目链接

https://github.com/densen2014/net8test

总结

以上是ag凯发k8国际为你收集整理的.net8 blazor 尝鲜的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。