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

MeteorSeed發表於2020-09-01
ASP.NETView

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

相關文章