16

【译】ASP.NET Core updates in .NET 5 Preview 8

 3 years ago
source link: https://www.cnblogs.com/MeteorSeed/p/13593798.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

  .NET 5 预览版 8 现在已经可以获取了,并且已经准备好接受评估。下面列出了本次发布的新特性:

    • 使用 Microsoft.Identity.Web 进行 Azure Active Directory 认证

    • Blazorz 组件的 CSS 隔离

    • Blazor WebAssembly 中的延迟加载

    • 更新 Blazor WebAssembly 的全球化支持

    • 新的 InputRadio 组件

    • 在 Blazor 应用程序中设置 UI 焦点

    • 影响 Blazor 应用程序的 HTML 头

    • IAsyncDisposable 用于 Blazor 组件

    • 控制 Blazor 组件实例化

    • 受保护的浏览器存储

    • 使用 C# 9 记录类型进行模型绑定和验证

    • 使用 dotnet watch 自动刷新

    • Console Logger Formatter

    • JSON Console Logger

  有关更多细节和已知问题,请参阅 .NET 5 发布说明。

1 让我们开始吧!

  要使用.NET 5 Preview 8 中的 ASP.NET Core,则需要安装 .NET 5 SDK。

  你需要使用 Visual Studio 2019 16.8 Preview 2 或更版本。.NET 5 也支持最新的 Mac Visual Studio 预览版。要使用 .NET 5 和 Visual Studio Code,需要安装最新版本的 C# extension。

2 如何升级一个现有的项目

  把现有的ASP.NET Core 应用从 .NET 5 Preview 7 升级到 .NET 5 Preview 8:

    • 更新所有 Microsoft.AspNetCore.* 包引用到 5.0.0-preview.8.*.

    • 更新所有 Microsoft.Extensions.* 包引用到 5.0.0-preview.8.*.

    • 更新 System.Net.Http.Json 包引用到 5.0.0-preview.8.*.

  就是这样!你应该准备好出发了。

3 新增了哪些功能?

3.1 使用 Microsoft.Identity.Web 进行 Azure Active Directory 认证

  ASP.NET Core 项目模板现在与 Microsoft.Identity.Web 集成,用于处理Azure AD 身份验证。Microsoft.Identity.Web 包为 Azure AD 身份验证提供了更好的体验,还提供了用户访问 Azure 资源(包括 Microsoft Graph)的更简便方法。对此,微软提供了,使用 Azure API、Microsoft Graph 和用户自己的受保护的 API,从简单的登录到多租户的 Web 示例。Microsoft.Identity.Web 将会与 .NET 5 一起推广使用。

3.2 Blazor 组件的 CSS 隔离

  Blazor 现在支持定义特定组件范围内的 CSS 样式。特定于组件的 CSS 样式可以更容易地判断应用程序中的样式,并避免全局样式带来的意外副作用。你可以在 .razor.css 文件中定义特定于组件的样式,这些样式与组件的 .razor文件的名称相匹配。

  例如,假设你有一个组件 MyComponent.razor 文件,看起来像这样:

<h1>My Component</h1>

<ul class="cool-list">
    <li>Item1</li>
    <li>Item2</li>
</ul>

  然后你可以给这个组件定义一个 MyComponent.razor.css 样式:

h1 {
    font-family: 'Comic Sans MS'
}

.cool-list li {
    color: red;
}

  css 中的样式将只应用于 MyComponent 组件,其他组件呈现的 h1 元素不会受到影响。

  要编写一个影响子组件样式的选择器,请使用 ::deep 组合符。

.parent ::deep .child {
    color: red;
}

  通过使用 ::deep 组合符,只有 .parent 类选择器被限定在组件的范围内;child class 选择器没有作用域,它将匹配子组件的内容。

  Blazor 通过将 CSS 选择器重写为构建的一部分来实现 CSS 隔离,以便它们只与组件呈现的标记匹配。

  Blazor 将重写的 CSS 文件捆绑在一起,并将该捆绑作为静态 web asset 提供给应用程序(_framework/scoped.styles.css.)。

  尽管 Blazor 本身并不支持 Sass 或 Less 等 CSS 预处理程序,但你仍然可以使用 CSS 预处理程序来生成特定于组件的样式,然后将其作为构建项目的一部分进行重写。

3.3 Blazor WebAssembly 中的延迟加载

  延迟加载可以通过延迟特定依赖程序的下载,直到需要时才下载,从而改善 Blazor WebAssembly 应用程序的加载时间。如果你的 Blazor WebAssembly 应用程序有很大的依赖关系,而这些依赖关系只用于应用程序的特定部分,那么延迟加载可能会很有帮助。

  要延迟程序集的加载,可以将其添加到项目文件中的 BlazorWebAssemblyLazyLoad 项组中。

  标记为延迟加载的程序集在使用之前必须由应用程序显式地加载。要在运行时延迟加载程序集,请使用 LazyAssemblyLoader 服务:

@inject LazyAssemblyLoader LazyAssemblyLoader

@code {
    var assemblies = await LazyAssemblyLoader.LoadAssembliesAsync(new string[] { "Lib1.dll" });
}

  要延迟加载特定页面的程序集,请使用 Router 组件上的 OnNavigateAsync 事件。OnNavigateAsync 事件在每个页面导航中触发,可用于为特定路径延迟加载程序集。你还可以通过将任何延迟加载的程序集作为附加程序集传递到 Router 来延迟加载路由的整个页面。

  下面的示例演示在用户导航到 /page1 时使用 LazyAssemblyLoader 服务来延迟加载特定依赖项(Lib1.dll)。然后将延迟加载的程序集添加到传递给 Router 组件的附加程序集列表中,以便它可以发现该程序集中的任何可路由的组件。

@using System.Reflection
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@inject LazyAssemblyLoader LazyAssemblyLoader

<Router AppAssembly="typeof(Program).Assembly" AdditionalAssemblies="lazyLoadedAssemblies" OnNavigateAsync="@OnNavigateAsync">
    <Navigating>
        <div>
            <p>Loading the requested page...</p>
        </div>
    </Navigating>
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="typeof(MainLayout)">
            <p>Sorry, there is nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

@code {
    private List<Assembly> lazyLoadedAssemblies = 
        new List<Assembly>();

    private async Task OnNavigateAsync(NavigationContext args)
    {
        if (args.Path.EndsWith("/page1"))
        {
            var assemblies = await LazyAssemblyLoader.LoadAssembliesAsync(new string[] { "Lib1.dll"  });
            lazyLoadedAssemblies.AddRange(assemblies);
        }
    }
}

3.4 更新 Blazor WebAssembly 的全球化支持

  .NET 5 Preview 8 重新引入了基于 International Components for Unicode(ICU)的 Blazor WebAssembly 全球化支持。引入 ICU 数据和逻辑的一部分是为下载大小优化这些有效负载。这项工作尚未完全完成。我们希望在未来的 .NET 5 预览更新中减少 ICU 数据的大小。

3.5 新的 InputRadio 组件

  .NET 5 中的 Blazor 现在包括内置的 InputRadio 和 InputRadioGroup 组件。这些组件通过与其他 Blazor 表单输入组件集成验证,简化了对单选按钮组的数据绑定。

<InputRadioGroup @bind-Value="survey.OpinionAboutBlazor">
    @foreach (var opinion in opinions)
    {
        <div class="form-check">
            <InputRadio class="form-check-input" id="@opinion.id" Value="@opinion.id" />
            <label class="form-check-label" for="@opinion.id">@opinion.label</label>
        </div>
    }
</InputRadioGroup>

3.6 在Blazor应用程序中设置UI焦点

  Blazor 现在在 ElementReference 上有一个 FocusAsync 方法,用于在该元素上设置 UI 焦点。

<button @onclick="() => textInput.FocusAsync()">Set focus</button>
<input @ref="textInput"/>

3.7 IAsyncDisposable 用于 Blazor 组件

  Blazor组件现在支持 IAsyncDisposable 接口来异步释放已分配的资源。

3.8 控制 Blazor 组件实例化

  现在,你可以通过提供自己的 IComponentActivator 服务实现来控制 Blazor 组件的实例化。

  再此,感谢 Mladen Macanović 的贡献!

3.9 影响 Blazor 应用程序的 HTML 头

  使用新的 Title、Link 和 Meta 组件,以编程方式设置页面的标题,并动态添加 link 和 meta 标签到 Blazor 应用程序的 HTML 头部。

  使用新的 Title, Link,  Meta 组件:

  1. 添加 Microsoft.AspNetCore.Components.Web.Extensions 包引用

  2. 包含对 _content/Microsoft.AspNetCore.Components.Web.Extensions/headManager.js 的引用

  3. 添加 @using Microsoft.AspNetCore.Components.Web.Extensions.Head

  下面的示例以编程方式设置页面标题来显示未读用户通知的数量,并更新页面图标:

@if (unreadNotificationsCount > 0)
{
    var title = $"Notifications ({unreadNotificationsCount})";
    <Title Value="title"></Title>
    <Link rel="icon" href="icon-unread.ico" />
}

3.10 受保护的浏览器存储

  在 Blazor 服务器应用程序中,你可能想要将应用程序状态保存在本地或会话存储中,以便应用程序在需要时可以在稍后进行补充。在用户浏览器中存储应用程序状态时,还需要确保它没有被篡改。

  .NET 5 中的 Blazor 通过提供两个新服务来解决这个问题:ProtectedLocalStorage 和 ProtectedSessionStorage。这些服务分别帮助你将状态存储在本地存储和会话存储中,并且它们负责使用 ASP.NET Core 数据保护 API 保护存储的数据。

  使用新的受保护浏览器存储服务:

  1.添加 Microsoft.AspNetCore.Components.Web.Extensions 包引用

  2.通过从 Startup.ConfigureServcies 调用services.AddProtectedBrowserStorage() 来配置服务

  3.将 ProtectedLocalStorage 和 ProtectedSessionStorage 注入到组件实现中:

@inject ProtectedLocalStorage ProtectedLocalStorage
@inject ProtectedSessionStorage ProtectedSessionStorage

  4.使用所需的服务异步获取、设置和删除状态:

private async Task IncrementCount()
{
await ProtectedLocalStorage.SetAsync("count", ++currentCount);
}

3.11 使用 C# 9 记录类型进行模型绑定和验证

  你现在可以在 MVC controller 或 Razor Page 中使用 C# 9 记录类型与模型绑定。记录类型是传输 model data 的好方法。

  例如,下面的 PersonController 使用带有模型绑定和表单验证的 Person记录类型:

public record Person([Required] string Name, [Range(0, 150)] int Age);
public class PersonController { public IActionResult Index() => View();
[HttpPost]
public IActionResult Index(Person person) { // … } }
<br />*Person/Index.cshtml*

```razor
@model Person

Name: <input asp-for="Model.Name" />
<span asp-validation-for="Model.Name" />

Age: <input asp-for="Model.Age" />
<span asp-validation-for="Model.Age" />

3.12 改善 DynamicRouteValueTransformer

  ASP.NET Core 3.1 引入了 DynamicRouteValueTransformer,可以使用自定义终结点动态选择 MVC controller action 或razor page。在 .NET 5 Preview 8 中,你现在可以将状态传递给 DynamicRouteValueTransformer 并过滤所选的终结点集。

3.13 使用dotnet watch自动刷新

  在 .NET 5 中,在 ASP.NET Core 项目上运行 dotnet watch,现在会启动默认浏览器,并在你修改代码时自动刷新浏览器。这意味着你可以在你最喜欢的文本编辑器中打开一个 ASP.NET Core 项目,只需要运行一次 dotnet watch,然后专注于你的代码变化,同时工具处理重建、重启和重新加载你的应用。我们希望在未来 Visual Studio 中也能带来自动刷新功能。

3.14 Console Logger Formatter

  我们对 Microsoft.Extensions.Logging 中的控制台日志提供程序进行了改进。开发人员现在可以实现自定义 ConsoleFormatter 来对控制台输出的格式和着色进行完全控制。formatter API 通过实现 VT-100(大多数现代终端支持)转义序列的一个子集来支持丰富的格式化。console logger 可以解析出不受支持的终端上的转义序列,从而允许你为所有终端编写单一格式化程序。

3.15 JSON Console Logger

  除了支持自定义格式化程序外,我们还添加了一个内置的 JSON 格式化程序,它会将结构化 JSON 日志发送到控制台。你可以从默认的 simple logger 切换到 JSON,添加以下代码片段到 Program.cs:

public static IHostBuilder CreateHostBuilder(string[] args) =>
    Host.CreateDefaultBuilder(args)
+       .ConfigureLogging(logging =>
+       {
+           logging.AddJsonConsole(options =>
+           {
+               options.JsonWriterOptions = new JsonWriterOptions() { Indented = true };
+           });
+       })
        .ConfigureWebHostDefaults(webBuilder =>
        {
            webBuilder.UseStartup<Startup>();
        });

   一旦启用,发送到控制台的日志消息现在将被JSON格式化。

{
  "EventId": 0,
  "LogLevel": "Information",
  "Category": "Microsoft.Hosting.Lifetime",
  "Message": "Now listening on: https://localhost:5001",
  "State": {
    "Message": "Now listening on: https://localhost:5001",
    "address": "https://localhost:5001",
    "{OriginalFormat}": "Now listening on: {address}"
  }
}

4 提供反馈

  我们希望你喜欢这个版本的 ASP.NET Core!我们渴望听到你对这个最新的 .NET 5 版本的反馈。通过在 GitHub 上提交问题,让我们知道你的想法。

  感谢您试用 ASP.NET Core!

5 原文链接

  https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-preview-8/


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK