Blazor 0.7.0的新功能

Blazor 0.7.0现在可用！ 此更新专注于ADR（祖先关系）。 另外，我们对调试过程进行了一些改进。 削减更多细节！

有关Blazor的一些知识：一个用.NET编写并使用WebAssembly启动的浏览器应用程序框架。 它为您提供了现代单页应用程序（SPA）的所有优点，同时允许您从头到尾使用.NET，直到服务器和客户端上的通用代码。 [ 1 ]



一个简短的介绍或“什么是Blazor？” 。

这是Blazor 0.7.0的新功能：

• 级联值和参数
• 调试增强

Blazor 0.7.0发行说明中提供了此版本中所做更改的完整列表。

获得Blazor 0.7.0

安装以下内容：

1. .NET Core 2.1 SDK （2.1.500或更高版本）。
2. 带有ASP.NET的Visual Studio 2017 （15.9或更高版本）。
3. Visual Studio Marketplace中的最新Blazor语言服务扩展 。
4. 命令行上的Blazor模板：

dotnet new -i Microsoft.AspNetCore.Blazor.Templates 

您可以在blazor.net上找到Blazor的说明，文档和手册。

将现有项目升级到Blazor 0.7.0

要将Blazor 0.6.0项目升级到0.7.0，请执行以下操作：

• 设置上面列出的先决条件。
• 将Blazor软件包和.NET CLI工具参考更新为0.7.0。 更新的Blazor项目文件应如下所示：

 <Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netstandard2.0</TargetFramework> <RunCommand>dotnet</RunCommand> <RunArguments>blazor serve</RunArguments> <LangVersion>7.3</LangVersion> </PropertyGroup> <ItemGroup> <PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.7.0" /> <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.7.0" /> <DotNetCliToolReference Include="Microsoft.AspNetCore.Blazor.Cli" Version="0.7.0" /> </ItemGroup> </Project> 

就是这个！ 现在，您可以评估Blazor的最新功能。

级联值和参数

Blazor组件可以接受可用于将数据传输到组件并影响组件渲染的参数。 从父组件到子组件提供参数值。 但是，有时将数据从祖先组件传输到子孙组件很不方便，尤其是当它们之间有许多层时。 级联的值和参数通过为祖先组件提供方便的方式来提供一个值，该值随后可用于所有后代组件，从而解决了此问题。 它们还提供了一种协调组件的好方法。

例如，如果您想为应用程序的特定部分提供有关主题的某些信息，则可以在组件之间传递适当的样式和类，但这将很繁琐且耗时。 相反，通用父组件可以将主题信息作为级联值提供，后代可以接受作为级联参数，然后根据需要使用。

假设ThemeInfo类传达了有关您希望通过组件层次结构传达的所有主题的信息，以便应用程序此部分中的所有按钮具有相同的外观：

 public class ThemeInfo { public string ButtonClass { get; set; } } 

父组件可以使用CascadingValue组件提供级联值。 CascadingValue组件包装组件层次结构的子树，并设置单个值，该值可用于此子树中的所有组件。 例如，我们可以将主题信息指定为组成布局主体的所有组件的级联参数：

 @inherits BlazorLayoutComponent <div class="sidebar"> <NavMenu /> </div> <div class="main"> <div class="top-row px-4"> <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a> </div> <CascadingValue Value="@theme"> <div class="content px-4"> @Body </div> </CascadingValue> </div> @functions { ThemeInfo theme = new ThemeInfo { ButtonClass = "btn-success" }; } 

要使用级联值，组件可以使用[CascadingParameter]属性声明级联参数。 级联值按类型绑定到级联参数。 在下面的示例中，对Counter组件进行了修改，使其具有一个级联参数，该参数绑定到ThemeInfo的级联值，然后该级联值用于设置按钮的类。

 @page "/counter" <h1>Counter</h1> <p>Current count: @currentCount</p> <button class="btn @ThemeInfo.ButtonClass" onclick="@IncrementCount">Click me</button> @functions { int currentCount = 0; [CascadingParameter] protected ThemeInfo ThemeInfo { get; set; } void IncrementCount() { currentCount++; } } 

启动应用程序时，我们看到正在应用一种新样式：



级联选项还允许组件在组件层次结构中进行交互。 例如，假设您有一个TabSet组件，其中包含几个Tab组件：

 <TabSet> <Tab Title="First tab"> <h4>First tab</h4> This is the first tab. </Tab> @if (showSecondTab) { <Tab Title="Second"> <h4>Second tab</h4> You can toggle me. </Tab> } <Tab Title="Third"> <h4>Third tab</h4> <label> <input type="checkbox" bind=@showSecondTab /> Toggle second tab </label> </Tab> </TabSet> 

在此示例中，Tab子组件没有作为参数显式传递到TabSet。 相反，它们只是TabSet子内容的一部分。 但是TabSet仍然需要了解每个选项卡，以便它可以显示标题和活动的选项卡。 为了在不需要任何特定用户连接的情况下启用此协调，TabSet组件可以将自身表示为级联值，然后可以由Tab组件的组件进行匹配：

在TabSet.cshtml中：

 <!-- Display the tab headers --> <CascadingValue Value=this> <ul class="nav nav-tabs"> @ChildContent </ul> </CascadingValue> 

这允许父Tab组件将包含的TabSet捕获为级联参数，因此它们可以将其自身添加到TabSet并协调其处于活动状态的Tab：

在Tab.cshtml中：

 [CascadingParameter] TabSet ContainerTabSet { get; set; } 

在此处查看完整的TabSet示例。

调试增强

在Blazor 0.5.0中，我们添加了对在浏览器中调试Blazor客户端应用程序的支持。 尽管此实验表明可以在浏览器中调试.NET应用程序，但这是一种相当危险的体验。 现在，您可以更可靠地安装和删除断点，并且逐步调试的可靠性得到了提高。