zoukankan      html  css  js  c++  java
  • 【译】ASP.NET Core updates in .NET 5 Preview 8

      .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/

  • 相关阅读:
    @雅礼集训01/13
    @hdu
    @bzoj
    @hdu
    @bzoj
    @雅礼集训01/10
    @codeforces
    @spoj
    @bzoj
    @bzoj
  • 原文地址:https://www.cnblogs.com/MeteorSeed/p/13593798.html
Copyright © 2011-2022 走看看