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

2020 年 9 月 1 日
筆記
.NET, 開發人員新聞

　　.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 組件：

添加 Microsoft.AspNetCore.Components.Web.Extensions 包引用
包含對 _content/Microsoft.AspNetCore.Components.Web.Extensions/headManager.js 的引用
添加 @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: //localhost:5001",
  "State": {
    "Message": "Now listening on: //localhost:5001",
    "address": "//localhost:5001",
    "{OriginalFormat}": "Now listening on: {address}"
  }
}

4 提供回饋

　　我們希望你喜歡這個版本的 ASP.NET Core！我們渴望聽到你對這個最新的 .NET 5 版本的回饋。通過在 GitHub 上提交問題，讓我們知道你的想法。

　　感謝您試用 ASP.NET Core！

5 原文鏈接

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

Tags: .NET 開發人員新聞

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

1 讓我們開始吧！

2 如何升級一個現有的項目

3 新增了哪些功能？

3.1 使用 Microsoft.Identity.Web 進行 Azure Active Directory 認證

3.2 Blazor 組件的 CSS 隔離

3.3 Blazor WebAssembly 中的延遲載入

3.4 更新 Blazor WebAssembly 的全球化支援

3.5 新的 InputRadio 組件

3.6 在Blazor應用程式中設置UI焦點

3.7 IAsyncDisposable 用於 Blazor 組件

3.8 控制 Blazor 組件實例化

3.9 影響 Blazor 應用程式的 HTML 頭

3.10 受保護的瀏覽器存儲

3.11 使用 C# 9 記錄類型進行模型綁定和驗證

3.12 改善 DynamicRouteValueTransformer

3.13 使用dotnet watch自動刷新

3.14 Console Logger Formatter

3.15 JSON Console Logger

4 提供回饋

5 原文鏈接

VirMach 便宜 VPS

QNews

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

1 讓我們開始吧！

2 如何升級一個現有的項目

3 新增了哪些功能？

3.1 使用 Microsoft.Identity.Web 進行 Azure Active Directory 認證

3.2 Blazor 組件的 CSS 隔離

3.3 Blazor WebAssembly 中的延遲載入

3.4 更新 Blazor WebAssembly 的全球化支援

3.5 新的 InputRadio 組件

3.6 在Blazor應用程式中設置UI焦點

3.7 IAsyncDisposable 用於 Blazor 組件

3.8 控制 Blazor 組件實例化

3.9 影響 Blazor 應用程式的 HTML 頭

3.10 受保護的瀏覽器存儲

3.11 使用 C# 9 記錄類型進行模型綁定和驗證

3.12 改善 DynamicRouteValueTransformer

3.13 使用dotnet watch自動刷新

3.14 Console Logger Formatter

3.15 JSON Console Logger

4 提供回饋

5 原文鏈接

分享此文：

Related Posts

用Java實現紅黑樹

（原創）WinForm中莫名其妙的小BUG——ComboBox 尺寸高度問題

使用服務進程啟動asp.net core程式

這樣的豆腐堅決不能吃？很多人並不知道

VirMach 便宜 VPS

QNews

熱門搜尋