首页 > 其他分享 >Blazor的呈现模式与LiteDB项目中的坑点

Blazor的呈现模式与LiteDB项目中的坑点

时间:2024-02-16 22:45:22浏览次数:31  
标签:坑点 呈现 模式 Server LiteDB 交互式 Blazor 页面

参照文档指引,准备用.NET 8的Blazor和LiteDB撸个小项目,结果引入的LiteDB相关代码一直无法访问目录中的数据库,重建了好几次项目都无果。琢磨了半天才发现自己踩了新版本Blazor的呈现模式(RenderMode)的坑。看来还是要持续学习.NET新技术,跟上时代步伐!

解决方案

先给出我琢磨出来的解决方案,有两种办法

  1. 在引用LiteDB数据库的Razor页面最上方,使用@rendermode指令声明该页面的呈现模式为InteractiveServer,即交互式SSR模式
@page "..."
@rendermode InteractiveServer
  1. 在应用的App.razor页面Routes标签内,声明应用整体的呈现模式为InteractiveServer
<body>
    <Routes @rendermode="RenderMode.InteractiveServer" />
</body>

问题原理

问题的根源在于.NET 8版本之后,新的Blazor框架集成了之前的Blazor Server和Blazor Wasm两种托管模型,并且使用“渲染模式”定制整个应用乃至具体页面的呈现方式。根据文档,渲染模式共有四种:

名称 描述 呈现位置 交互
静态服务器(Static Server) 静态服务器端呈现(静态 SSR) 服务器 ❌否
交互式服务器(InteractiveServer) 使用 Blazor Server 的交互式服务器端呈现(交互式 SSR)。 服务器 ✔️是
交互式 WebAssembly(Interactive WebAssembly) 使用 Blazor WebAssembly 的客户端呈现 (CSR)†。 客户端 ✔️是
交互式自动(Interactive Auto) 下载 Blazor 捆绑包后,在后续访问时先使用 Blazor Server 然后使用 CSR 的交互式 SSR。 服务器,然后客户端 ✔️

四种模式里,Static Server即静态托管按下不表,InteractiveServer对应的就是之前的Blazor Server,Interactive WebAssembly对应Blazor Wasm,这都没问题。问题出在新增的Interactive Auto上。

按照微软设想,Interactive Auto可以实现应用模式的灵活切换。理想状态下应用初次加载或网络条件优良时在该模式下启用SSR服务端渲染,网络不佳或再次加载时切换到Wasm模式。应用的切换逻辑则由页面上的@rendermode指令或整个应用的Routes组件决定。

那么,如果没有指定页面的@rendermode指令怎么办呢?如果父级有指定过呈现模式,那么组件会继承其呈现模式,这就对应了上面解决方案里的方法二:通过为应用的路由组件指定呈现模式,让子页面继承。但如果父组件没有指定过呈现模式,组件自己也没有指定过呈现模式,运行时就默认会对该页面使用Static Server呈现模式。该模式下无法运行事件处理程序,当然也无法读写数据库,所以我们需要手动为应用指定呈现模式,这是解决方法一背后的原理。

参考资料:

  1. https://chrissainty.com/blazor-in-dotnet-8-full-stack-web-ui/
  2. https://learn.microsoft.com/zh-cn/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0

标签:坑点,呈现,模式,Server,LiteDB,交互式,Blazor,页面
From: https://www.cnblogs.com/misaka10212/p/18017584

相关文章

  • Net 8 Blazor Web App项目访问Identity Server 4
    Net8BlazorWebApp项目访问IdentityServer4IdentityServer系列目录BlazorServer访问IdentityServer4单点登录-SunnyTrudeau-博客园(cnblogs.com)BlazorServer访问IdentityServer4单点登录2-集成Asp.Net角色-SunnyTrudeau-博客园(cnblogs.com)BlazorSe......
  • Blazor OIDC 单点登录授权实例5 - 独立SSR App (net8 webapp ) 端授权
    目录:OpenID与OAuth2基础知识BlazorwasmGoogle登录BlazorwasmGitee码云登录BlazorOIDC单点登录授权实例1-建立和配置IDS身份验证服务BlazorOIDC单点登录授权实例2-登录信息组件wasmBlazorOIDC单点登录授权实例3-服务端管理组件BlazorOIDC单点登录授权实......
  • [Blazor WebAssembly] 学习随笔——组件1.微信弹框(WXDialog)
    总有以下的需求:等待用户确认,就是有【确定】和【取消】按钮,有个标题和内容的弹框(比如:您确定要删除吗?)就是告知一下,就是上面的【取消】按钮不显示(比如:保存成功!)莫有按钮,几秒钟后自己消失,就是所谓的toast(比如:已完成)莫有按钮,需要发送命令才能消息(比如:数据加载中)一开始犯了经验主......
  • BootstrapBlazor 模板适配移动设备使用笔记
    项目模板BootstrapBlazorApp模板为了方便大家利用这套组件快速搭建项目,作者制作了项目模板(ProjectTemplates),使用dotnetnew命令行模式,使用步骤如下:安装项目模板dotnetnewinstallBootstrap.Blazor.Templates::8.0.1创建工程dotnetnewbbapp官网教程https:......
  • Asp-Net-Core学习笔记:4.Blazor-Server入门
    本来今天开始是有其他的安排了,也没办法抽出那么多时间来学NetCore,不过我想做事情有始有终吧,除了gRPC还没跑起来之外,Blazor这部分也了解了一点,官网地址:https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor目前来说还不是很完善,真正的离线单页应用还处于预览版阶段。Blazo......
  • [Blazor WebAssembly] 学习随笔——身份验证
    最近在折腾微信相关的开发,包括公众号、企业微信内部应用、企业微信第三方开发。基于Razor方式写了:企业微信内部应用的类库企业微信第三方应用的类库公众号的类库一个统一管理公众号、企业微信内部应用和第三方应用有关授权、Token之类的应用。然后准备写一个开源的简单的酒......
  • 使用 Kestrel 自托管https 并作为 Windows 服务启动 Blazor 提示: 无法配置 HTTPS 端
    原文链接https://stackoverflow.com/questions/53300480/unable-to-configure-https-endpoint-no-server-certificate-was-specified-and-the/71026252#71026252使用Kestrel自托管并作为Windows服务启动Blazor提示UnabletoconfigureHTTPSendpoint.Noservercertifi......
  • .NET中使用BootstrapBlazor组件库Table实操篇
    前言Table表格在后台管理应用中使用的是相当频繁的,因此找一个功能齐全的前端框架对于我们而言是非常必要的,因为封装完善的前端框架能够大大提升我们的工作对接效率。今天我们主要来讲解一下在.NET中使用BootstrapBlazor组件库的Table表格组件(本章使用的数据都是程序自动生成的模......
  • 「实用分享」用界面组件Telerik UI for Blazor增强你的财务图表!
    TelerikUIforBlazor拥有110+个原生的、易于定制的BlazorUI组件和高性能网格组件,能节约一半的时间开发全新的Blazor应用程序并使传统web项目现代化,其中囊括了设计和生成工具等。TelerikUIforBlazor控件提供的控件,可轻松满足应用程序对数据处理、性能、用户体验、设计、可访......
  • Blazor中使用npm、ts、scss、webpack且自动导入到html
    1、新建一个BlazorApp项目2、新建文件夹WebLib,并在终端中打开执行指令npminit-y在WebLib目录下新建tsconfg.json文件{"compilerOptions":{"noImplicitAny":false,"noEmitOnError":true,"removeComments":false,"sourceMa......