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

一、环境

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.hqwc.cn/news/234085.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何在服务器上运行python文件

目录 前置准备 详细步骤 一&#xff0c;在服务器安装Anaconda 下载安装包 上传文件到服务器 安装环境 二&#xff0c;创建虚拟环境 创建环境 三&#xff0c;测试执行python文件 执行python文件 查看进程状态 总结 前置准备 如何在个人服务器上运行python文件&#x…

C陷阱与缺陷——第3章 语义陷阱

1. 指针和数组 C语言中只有一维数组&#xff0c;而且数组的大小必须在编译器就作为一个常数确定下来&#xff0c;然而在C语言中数组的元素可以是任何类型的对象&#xff0c;当然也可以是另外的一个数组&#xff0c;这样&#xff0c;要仿真出一个多维数组就不是难事。 对于一个…

【10】Python函数专题(上)

目录 1.什么是函数2.函数的参数2.1形参 和 实参2.2函数的传递方式2.3 不定长参数2.3.1 可变位置参数`*args`2.3.2可变关键字参数`**kwargs`2.3.3 小结2.4 参数的解包(也称拆包)1.什么是函数 在Python中,函数是一段可重复使用的代码块,用于执行特定任务。通过将代码封装在函…

Hive:从HDFS回收站恢复被删的表

场景 一张手工维护的内部表&#xff0c;本来排查没有使用&#xff0c;然后删掉了&#xff0c;发现又需要使用&#xff0c;只能恢复这张表了。 1.确认HDFS是否开启回收站功能 2.查看回收站中的数据 被删除的数据会放在删除数据时使用的用户目录下&#xff0c;如&#xff1a;使…

2023年掌控安全学院CTF暖冬杯——数据流分析

前言&#xff1a;打工仔一枚&#xff0c;第一波上新的3题misc 做完了 再打ISCTF随便记录一下 PS&#xff1a;环境关了&#xff0c;题目描述忘记了&#xff0c;反正就是找flag。 筛选HTTP数据流 导出数据流慢慢看 ctrl F 搜flag 看到一条 有flag.txt 的数据 导出另存.zip 这里…

Git提示 Connection closed by remote host

问题如下图&#xff1a; 解决&#xff1a; 删除./ssh目录下的config文件&#xff0c;如下图config文件是新增的 原因&#xff1a;不知道什么原因&#xff0c;连接外网后突然断开或导致自动增加config文件。

FPGA驱动CS4344 VHDL例程

CS4344是一款非常简单的I2S立体声24bit D/A芯片&#xff0c;采样率高达192KHz&#xff0c;相对于ADAU1761复杂的寄存器配置来说&#xff0c;CS4344非常友好&#xff0c;无需配置寄存器&#xff0c;只要按I2S时序输入数据&#xff0c;即可实现立体声输出&#xff0c;且10PIN TSS…

数据挖掘实战-基于word2vec的短文本情感分析(文末送书)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

12月7-8日泰国曼谷,Flat Ads与你相约Affilliate World Asia

12月7-8日,Flat Ads将参加在泰国曼谷举办的Affiliate World Asia Conference,与众多行业人士共话全球流量领域新洞察,探讨行业现状与未来趋势。 据悉,Affiliate World Asia(以下简称AWA)是全球瞩目的移动互联网联盟超级盛会,也是亚洲区域内最大规模的互联网流量大会。这一展会为…

面试题:说一下MyBatis动态代理原理?

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1.MyBatis简介2.使用步骤2.1、引入依赖2.2、配置文件2.3、接口定义2.4、加载执行 3.原理解析 1.MyBatis简介 MyBatis是一个ORM工具&#xff0c;封装了JDBC的操作&a…

机器学习入门(第四天)——朴素贝叶斯

知识树 Knowledge tree P(y|x)&#xff0c;P给定x的条件下&#xff0c;y的概率。如&#xff1a;P(y我招女孩子喜欢的概率|我是学生) 一个小故事 A story 女朋友和妈妈掉河里&#xff0c;路人拿出3颗豆&#xff0c;两颗红豆1颗绿豆。如果我抽中红豆救女朋友&#xff0c;抽中绿…

安防监控系统的工作原理是什么?具体包含哪些组成部分?

关于安防监控系统&#xff0c;大家熟知的就是监控系统平台&#xff0c;其实不然&#xff0c;智能视频安防监控系统涵盖的内容非常多&#xff0c;今天小编就和大家一起来探讨一下。 安防监控视频系统主要分为以下7大类&#xff1a; 1、 摄像头采集图像 安防监控系统通常使用摄…