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.可编写内存中状态容器存储信息。

相关推荐
递归不收敛42 分钟前
吴恩达机器学习课程(PyTorch适配)学习笔记:2.4 激活函数与多类别处理
pytorch·学习·机器学习
加油20191 小时前
如何快速学习一个网络协议?
网络·网络协议·学习·方法论
A9better1 小时前
嵌入式开发学习日志36——stm32之USART串口通信前述
stm32·单片机·嵌入式硬件·学习
不太可爱的叶某人2 小时前
【学习笔记】kafka权威指南——第6章 可靠的数据传递
笔记·学习·kafka
2301_790994994 小时前
仿神秘海域/美末环境交互的程序化动画学习
学习·microsoft·交互
能不能别报错4 小时前
K8s学习笔记(十六) 探针(Probe)
笔记·学习·kubernetes
初圣魔门首席弟子5 小时前
C++ STL 向量(vector)学习笔记:从基础到实战
c++·笔记·学习
qiangshang9901265 小时前
WPF+MVVM入门学习
学习·wpf
iconball5 小时前
个人用云计算学习笔记 --20 (Nginx 服务器)
linux·运维·笔记·学习·云计算
生物小卡拉6 小时前
R脚本--表达矩阵与特征矩阵相关性分析
笔记·学习·机器学习