.NET Core 3.0 Preview 6中对ASP.NET Core和Blazor的更新

我们都知道在6月12日的时候微软发布了.NET Core 3.0的第6个预览版。针对.NET Core 3.0的发布我们国内的微软MVP-汪宇杰还发布的官翻版的博文进行了详细的介绍。具体的可以关注“汪宇杰博客”公众号,或者我的“DotNetCore实战”公众号然后在历史文章里面进行查阅。而我们这篇文章将会介绍本次更新中对ASP.NET Core和Blazor所做的更新。当然本文的大部分内容翻译自ASP.NET的首席项目经理Daniel Roth的介绍。

注:英语能力好的可以直接到文章末尾查看英文链接进行阅读。
作者:依乐祝
本文链接:

以下是此预览版中的新增功能列表:

新Razor特性:@attribute,@code,@key,@namespace,@functions中的标记

Blazor指令属性

Blazor应用程序的身份验证和授权支持

Razor类库中的静态资产

Json.NET不再在项目模板中引用

证书和Kerberos身份验证

SignalR自动重新连接

托管gRPC客户端

gRPC客户端工厂

gRPC拦截器

有关其他详细信息和已知问题,请参阅发行说明。

开始

要在.NET Core 3.0 Preview 6中开始使用ASP.NET Core,请安装.NET Core 3.0 Preview 6 SDK

如果您在Windows上使用Visual Studio进行的话,则还需要安装Visual Studio 2019的最新预览。

对于最新的客户端Blazor模板,还可以从Visual Studio Marketplace 安装最新的Blazor扩展。

升级现有项目

要将现有的ASP.NET Core应用程序升级到.NET Core 3.0 Preview 6,请按照ASP.NET Core文档中的迁移步骤进行操作。

另请参阅ASP.NET Core 3.0 中的重大更改的完整列表。

要将现有的ASP.NET Core 3.0 Preview 5项目升级到Preview 6:

更新Microsoft.AspNetCore.*包引用到3.0.0-preview6.19307.2

在Blazor应用程序中:

重命名@functions为@code

更新Blazor特定属性和事件处理程序以使用新的指令属性语法(参见下文)

删除任何关于app.UseBlazor<TStartup>()的调用,换成在app.UseRouting()调用之前调用app.UseClientSideBlazorFiles<TStartup>()的方式。还要在app.UseEndpoints()的调用中调用endpoints.MapFallbackToClientSideBlazor<TStartup>("index.html")。

之前的调用方式

app.UseRouting(); app.UseEndpoints(endpoints => { endpoints.MapDefaultControllerRoute(); }); app.UseBlazor<Client.Startup>();

更新之后的调用方式

app.UseClientSideBlazorFiles<Client.Startup>(); app.UseRouting(); app.UseEndpoints(endpoints => { endpoints.MapDefaultControllerRoute(); endpoints.MapFallbackToClientSideBlazor<Client.Startup>("index.html"); }); Razor的新特性

我们(因为是ASP.NET的首席项目经理Daniel Roth写的博客,所以用第一人称)在此版本中添加了对以下新Razor语言功能的支持。

@attribute

新的@attribute指令将指定的属性添加到生成的类中。

@attribute [Authorize] @code

.razor文件(在.cshtml文件中不支持)中使用了新的@code指令来指定要作为附加成员添加到生成的类中的代码块。它相当于@functions,但现在有了更好的名称。

@code { int currentCount = 0; void IncrementCount() { currentCount++; } } @key

.razor文件中使用了新的@key指令属性,以指定Blazor diffing算法可用于保留列表中的元素或组件的值(任何对象或唯一标识符)。

<div> @foreach (var flight in Flights) { <DetailsCard @key="flight" Flight="@flight" /> } </div>

要了解需要此功能的原因,请想象一下不实用此功能来呈现包含航班详细信息的卡片列表的场景:

<div> @foreach (var flight in Flights) { <DetailsCard Flight="@flight" /> } </div>

如果将新航班添加到航班列表的中间,则现有的详细信息卡实例应保持不受影响,并且应在呈现的输出中插入一个新的详细信息卡。

要想象这个,如果Flights以前包含[F0, F1, F2],那么这是之前的状态:

DetailsCard0,Flight = F0

DetailsCard1,Flight = F1

DetailsCard2,Flight = F2

......如果我们在索引1中插入一个新的项目fnew,这就是所期望的插入之后的状态:

DetailsCard0,Flight = F0

DetailsCardNew,Flight = FNew

DetailsCard1,Flight = F1

DetailsCard2,Flight = F2

但是,实际插入后的状态如下:

DetailsCard0,Flight = F0

DetailsCard1,Flight = FNew

DetailsCard2,Flight = F1

DetailsCardNew,Flight = F2

系统无法知道DetailsCard2或DetailsCard3应保留它们与旧航班实例的关联,因此它只会将它们与列表中与其位置匹配的航班重新关联。因此,DetailsCard1和DetailsCard2使用新数据完全重建自己,这是浪费的,有时甚至会导致用户可见问题(例如,输入焦点意外丢失)。

通过使用@keydiffing算法添加键可以关联新旧元素或组件。

@namespace

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpdfjx.html