Blazor Web APP学习记录

- [1 呈现模式](#1 呈现模式)
- - [1.1 静态SSR](#1.1 静态SSR)
  - [1.2 服务器端交互SSR](#1.2 服务器端交互SSR)
  - [1.3 客户端交互CSR](#1.3 客户端交互CSR)
  - [1.4 自动交互式](#1.4 自动交互式)
  - [1.5 注意](#1.5 注意)
- [2 Blazor Web APP项目](#2 Blazor Web APP项目)
- [3 会话状态](#3 会话状态)
- - [3.1 Blazor Server会话状态保存](#3.1 Blazor Server会话状态保存)
  - [3.2 Blazor WebAssembly 会话状态保存](#3.2 Blazor WebAssembly 会话状态保存)

1 呈现模式

参见：https://learn.microsoft.com/zh-cn/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0
Blazor Web App 中的每个组件会采用呈现模式来确定其使用的托管模型、呈现位置以及它是否是交互式的，主要的呈现模式为以下4种：

1.1 静态SSR

静态服务器端呈现，静态页面，无任何交互。

1.2 服务器端交互SSR

组件中定义@rendermode InteractiveServer或使用组件时进行指定@rendermode="InteractiveServer或RenderMode.InteractiveServerRenderMode.InteractiveServer"

1.3 客户端交互CSR

组件中定义@rendermode InteractiveWebAssembly或使用组件时指定@rendermode="InteractiveWebAssembly或RenderMode.InteractiveServerRenderMode.InteractiveWebAssembly"

1.4 自动交互式

下载 Blazor 捆绑包后，在后续访问时先使用 Blazor Server 然后使用 CSR 的交互式 SSR。

先服务器，后客户端。

组件中定义@rendermode InteractiveAuto

1.5 注意

1.呈现模式不可交叉使用，比如服务器端交互的父组件不可使用客户端交互的子组件；

2.呈现模式不指定的情况下，会继承父组件的呈现模式；

3.级联参数不可跨呈现模式使用；

2 Blazor Web APP项目

新建的Blazor Web APP项目，选择呈现模式为"自动交互式"，项目结构如下：

".Client"部分：使用交互式 WebAssembly 或交互式自动呈现模式的组件必须位于 .Client 项目中。

注意：

1.界面可存放在主项目中的"Components/Pages"或".Client"项目下的"Pages"中，若这两个目录下存在同样导航的界面，则无法定位到相应界面；

2.服务器项目的 Components 文件夹用于保存应用的服务器端 Razor 组件。共享组件通常放置在 Components 文件夹的根目录中（最好在主项目中），而布局和页面组件通常放置在 Components 文件夹内的文件夹中，共享组件不要在组件中定义呈现模式，应在使用时定义或继承；

3 会话状态

参见：https://learn.microsoft.com/zh-cn/aspnet/core/blazor/state-management?view=aspnetcore-8.0&pivots=server

Blazor WebAssembly和Blazor Server不同且不共用，需要根据项目类型分别进行设置，目前暂时限制Blazor Web APP的使用。

3.1 Blazor Server会话状态保存

1.服务器端保存：将信息存储到服务器上，也就是数据库中，如：Blob存储，键值存储，关系型数据库和表存储；

2.URL：使用访问地址参数；

3.浏览器存储：localStorage（显示清除之前，当前浏览器共享存储）；sessionStorage（仅当前选项卡可用）※注意数据保护，预呈现状态下不可用（预呈现过程中不可用）※；

4.可编写内存中状态容器存储信息；

3.2 Blazor WebAssembly 会话状态保存

在 Blazor WebAssembly 应用中创建的用户状态会保存在浏览器的内存中，当用户关闭并重新打开其浏览器或重新加载页面时，浏览器的内存中保存的用户状态丢失。

1.服务器端存储：对于跨多个用户和设备的永久数据持久性，应用可以使用通过 Web API 访问的独立服务器端存储；

2.URL：同上；

3.浏览器存储：localStorage 和 sessionStorage 可用于 Blazor WebAssembly 应用，但只能通过编写自定义代码或使用第三方包的方式使用；

4.可编写内存中状态容器存储信息。