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

一、环境

bash 复制代码
C:\Users\zhuji>dotnet --version
8.0.100

C:\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中的代码段

cs 复制代码
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(Counter).Assembly);

   

app.Run();

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

四、问题

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

cs 复制代码
@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);

    }

}

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

相关推荐
o0向阳而生0o5 小时前
65、.NET 中DllImport的用途
.net·非托管·dllimport
喵叔哟5 小时前
25.【.NET8 实战--孢子记账--从单体到微服务--转向微服务】--单体转微服务--用户服务接口
微服务·架构·.net
o0向阳而生0o8 小时前
63、.NET 异常处理
c#·.net·异常处理
Kookoos11 小时前
性能剖析:在 ABP 框架中集成 MiniProfiler 实现性能可视化诊断
后端·c#·.net·abp vnext·miniprofiler
zhanshuo11 小时前
5分钟手把手实战:用HTML5基础结构打造你的个人简介页面
.net
界面开发小八哥11 小时前
界面开发框架DevExpress XAF实践:集成.NET Aspire后如何实现数据库依赖?
ui·.net·界面控件·devexpress·ui开发·xaf
zhanshuo11 小时前
5分钟搞定!ASP.NET正则表达式验证控件实战:轻松拦截99%的无效邮箱!
.net
阿翰13 小时前
自动 GitHub Readme 20 种语言翻译平台 - OpenAiTx 开源免费
c#·.net
PT_silver1 天前
tryhackme——Abusing Windows Internals(进程注入)
windows·microsoft
Leinwin1 天前
微软推出SQL Server 2025技术预览版,深化人工智能应用集成
人工智能·microsoft