.Net 8 Blazor下 Auto交互渲染模式试用

news/2025/1/20 6:56:36/

一、环境

C:\Users\zhuji>dotnet --version
8.0.100C:\Users\zhuji>dotnet --list-sdks
5.0.403 [C:\Program Files\dotnet\sdk]
6.0.404 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

Microsoft Visual Studio Enterprise 2022 (64 位) - Current
版本 17.8.2 

二、创建项目

        选择菜单  文件->新建->项目,在对话框中选择项目模板Blazor Web App。

然后点击 下一步 ,输入项目名称、选择存储位置,再下一步,则可以选择框架和交互模式,我们选择Auto。

选择后,点击 创建 则VS自动创建了二个项目,一个项目名称为我们输入的项目名,另一个项目则自然添加后缀.client。

        

三、项目结构和测试运行

        两个自动生成的项目结构相似,并且已经可以运行。

        放在第二个项目内的页面组件,会用代码自动导入到项目的Router中,从而可以正常工作。如上图中的Counter组件就放在.Client项目的Pages文件夹下,但能在整个项目中自动使用。

        在主项目Program.cs中的代码段

app.MapRazorComponents<App>().AddInteractiveServerRenderMode().AddInteractiveWebAssemblyRenderMode().AddAdditionalAssemblies(typeof(Counter).Assembly);app.Run();

        从试用情况来看,.Net 8 Blazor 新增的Auto模式,可以使一个项目中的组件根据实际需要同时工作在二种模式下,解锁了以前版本一个项目只能选一种模式的限制,从而可以更加提高用户的使用体验 。

 四、问题

        在此项目中,类似Counter的组件可以正常地工作在三种模式下,即Server、WebAssembly、Auto。然而有访问外部API交互需求的组件,则只能工作在Server和Auto两种模式下,若强制设置成WebAssembly模式,则会出现一个页面异常,并且页面不能正常工作。

@page "/housetradeanother"
@rendermode InteractiveWebAssembly<h3>HouseTradeAnother</h3><p>Name:</p>
@if (curHouseTrade != null)@curHouseTrade.Name<button class="btn btn-primary" @onclick="getTradeName">显示名称</button>
@code {private HouseTrade? curHouseTrade;private async Task getTradeName(){var httpclient = new HttpClient();var swaggerC = new OpenClient("https://localhost:7105", httpclient);curHouseTrade = await swaggerC.HouseTradesGETAsync(100);}}

 如上代码,此时运行,页面有异常,原因不详。

     

 


http://www.ppmy.cn/news/1251062.html

相关文章

【Python小知识 - 5】:QGraphicsDropShadowEffect设置按钮阴影

文章目录 QGraphicsDropShadowEffect介绍案例 QGraphicsDropShadowEffect介绍 QGraphicsDropShadowEffect 是 PyQt 中的一个类&#xff0c;它可以在图形对象周围产生阴影效果&#xff0c;常用于美化界面。通过调整阴影的偏移、颜色、模糊度等参数&#xff0c;可以实现不同风格…

springboot 注解@JsonInclude

修饰 实体属性or实体类 //枚举值&#xff1a;ALWAYS,NON_NULL,NON_ABSENT,NON_EMPTY,NON_DEFAULT,CUSTOM,USE_DEFAULTS JsonInclude(Include.NON_EMPTY)//将该标记放在属性上&#xff0c;如果该属性为NULL则不参与序列化 //如果放在类上边,那对这个类的全部属性起作用 Inclu…

zustand状态管理器使用汇总

1. 初步使用介绍 // 1. 安装zustand npm install zustand// 2. 创建store使用 import { create } from "zustand"; export const useBearStore create((set) > ({bears: 0, increasePopulation: () > set((state) > ({ bears: state.bears 1 })), remove…

写 SVG 动画必看!SVG系列文章2-常见标签

1、坐标定位 对于所有元素&#xff0c;SVG 使用的坐标系统或者说网格系统&#xff0c;和 Canvas 用的差不多&#xff08;所有计算机绘图都差不多&#xff09;。这种坐标系统是&#xff1a;以页面的左上角为 (0,0) 坐标点&#xff0c;坐标以像素为单位&#xff0c;x 轴正方向是…

C#文件基本操作(判断文件是否存在、创建文件、复制或移动文件、删除文件以及获取文件基本信息)

目录 一、判断文件是否存在 1.File类的Exists()方法 2.FileInfo类的Exists属性 二、创建文件 1.File类的Create()方法 2.FileInfo类的Create()方法 三、复制或移动文件 1.File类的Copy()方法 2.File类的Move()方法 3.FileInfo类的CopyTo()方法 四、删除文件 1.File…

【传智杯】排排队、小卡与质数 2、1024 程序员节发橙子题解

&#x1f34e; 博客主页&#xff1a;&#x1f319;披星戴月的贾维斯 &#x1f34e; 欢迎关注&#xff1a;&#x1f44d;点赞&#x1f343;收藏&#x1f525;留言 &#x1f347;系列专栏&#xff1a;&#x1f319; 蓝桥杯 &#x1f319;请不要相信胜利就像山坡上的蒲公英一样唾手…

用分布函数定义的随机变量的独立性的合理性

随机变量的独立性是这样定义的&#xff1a; 如果对任意 x , y x, y x,y 都有 P { X ≤ x , Y ≤ y } P { X ≤ x } P { Y ≤ y } P\{X\leq x,Y\leq y\} P\{X\leq x \}P\{Y\leq y\} P{X≤x,Y≤y}P{X≤x}P{Y≤y} 即 F ( x , y ) F X ( x ) F Y ( y ) F(x,y)F_X(x)F_Y(y) F…

EasyExcel生成多sheet页的excel

一、controller层 ApiOperation(value "明细查询导出") PostMapping(value "/SummaryDetailExport") public void summaryDetailExport(RequestBody SearchDTO dto, HttpServletResponse response) throws IOException {reportService.deptPackagingSum…