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

news/2024/4/16 2:35:08

一、环境

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…

ES6数据解构

ES6 允许按照一定模式&#xff0c;从数组和对象中提取值&#xff0c;对变量进行赋值&#xff0c;这被称为解构&#xff0c;解构的本质属于“模式匹配”&#xff0c;只要等号两边的模式相同&#xff0c;左边的变量就会被赋予对应的值。如果解构不成功&#xff0c;变量的值就等于…

【接口自动化】selenium库也有大用场(获取cookie)

相信有些童鞋在做接口、或者说接口自动化测试的过程中会遇到这样的场景&#xff1a;测试的接口&#xff0c;必须是需要登录后才能发起请求成功的。 那么怎么解决呢&#xff1f; 本着团队协作的精神&#xff0c;我们就去让开发同学开个后门&#xff0c;给你个“万能”值&#x…

什么是终端服务器

什么是终端服务器 服务器的种类非常多&#xff0c;除了最为常用的wed服务器之外&#xff0c;还有高防服务器、缓存服务器以及终端服务器。什么是终端服务器&#xff0c;终端服务器有哪些工作方式&#xff1f; 终端服务器 什么是终端服务器终端服务器可以用在局域网上将很多终…

RPA机器人如何确保敏感数据的安全性

数据资源作为数字化时代的关键要素&#xff0c;其重要性一直受到高度重视&#xff0c;由此&#xff0c;数据安全也成为企业和个人必须面对的重要问题。随着RPA技术在各个行业的广泛应用&#xff0c;其系统安全性也成了每个企业关注的重中之重。经验丰富的RPA专家可以有效地采取…

揭示堆叠自动编码器的强大功能 - 最新深度学习技术

简介 在不断发展的人工智能和机器学习领域&#xff0c;深度学习技术由于其处理复杂和高维数据的能力而获得了巨大的普及。在各种深度学习模型中&#xff0c;堆叠自动编码器[1]作为一种多功能且强大的工具脱颖而出&#xff0c;用于特征学习、降维和数据表示。本文探讨了堆叠式自…

Java常见的面试题(很基础那种)

这里介绍一下,一些比较基础的Java面试题,比较适合应届生、实习生这些朋友。因为对于刚出来工作的Java工程师,很多企业都偏向招一些基础比较好的苗子回来培养。所以啊,在校的朋友们,一定要在读书期间,多做项目,如果没有实际的项目,可以在github找一些案例来做参考,先模…

SNAT / DNAT 自定义链

目录 linux 系统本身是没有转发功能&#xff0c;只有路由发送数据 NAT NAT的实现分为两类 SNAT SNAT 应用环境 SNAT 原理 SNAT 转换前提条件 例图参考 开启 SNAT 命令 临时开启 永久开启 修改 iptables 网卡 DNAT DNAT 应用环境 DNAT 原理 DNAT 转换前提条件 …

uni-popup TypeError: Cannot read property ‘open‘ of undefined

我的代码是没问题的&#xff0c;因为之前popup没有问题&#xff0c;换了笔记本&#xff0c;重新安装了hbuilderx&#xff0c;现在uni-popup在页面的底端都显示出来了&#xff0c; 原因&#xff1a;uni-popup插件问题&#xff0c; 解决&#xff1a;我卸载hbuilder重新下了一遍&a…

STM32---时钟树

写在前面&#xff1a;一个 MCU 越复杂&#xff0c;时钟系统也会相应地变得复杂&#xff0c;如 STM32F1 的时钟系统比较复杂&#xff0c;不像简单的 51 单片机一个系统时钟就 可以解决一切。对于 STM32F1 系列的芯片&#xff0c;其有多个时钟源&#xff0c;构成了一个庞大的是时…

分布式锁解决(幂等性校验、同一用户只能报名一次)

分布式锁解决&#xff08;幂等性校验、同一用户只能报名一次&#xff09; 项目背景分布式锁应用场景分布式锁技术选型先来看效果分布式预约会议实现需考虑的点分布式预约会议实现代码防止同一用户并发多次预约会议解决防止会议室超卖代码可能存在的问题业务代码耗时长&#xff…

哪个软件消除笔好用?我来告诉你

全民自媒体时代&#xff0c;人人都是自媒体人&#xff0c;越来越多的人接触到修图&#xff0c;剪辑&#xff0c;制作&#xff0c;常常在社交媒体上分享美食制作教程&#xff0c;居家好物&#xff0c;影视混剪&#xff0c;小说解说等各种各样的精彩照片,但是在网上找的图片素材往…

IIC协议 PCF8591 AD/DA转换 测试光敏电阻

/*----------------------------------------------- 内容&#xff1a;使用4路AD中的1路检测外部模拟量输入&#xff0c;显示0-255数值DA输出电压用LED显示&#xff0c;主要用于检测环境光线&#xff0c;光线强&#xff0c;则灯亮度小&#xff0c;以保证整体光强稳定在一个范…
最新文章