全棧 Web UI

隨著 .NET 8 的發布，Blazor 已成為全堆棧 Web UI 框架，可用于開發在組件或頁面級別呈現內容的應用，其中包含：

• 用于生成靜態 HTML 的靜態服務器呈現。
• 使用 Blazor Server 托管模型的交互式服務器呈現。
• 使用 Blazor WebAssembly 托管模型的交互式客戶端呈現。
• 下載 Blazor 捆綁包并激活 .NET WebAssembly 運行時后，最初使用 Blazor Server，并在隨后訪問時使用 WebAssembly 自動進行交互式客戶端呈現。 自動呈現通常會提供最快的應用啟動體驗。

默認情況下，交互式呈現模式還會預呈現內容。

Blazor 呈現模式

流式渲染

流式渲染是 .NET 8 Blazor 中另一個有前途的功能，在將靜態服務器呈現與 Blazor 結合使用時，可以在響應流中流式傳輸內容更新。 流式呈現可以改善執行長期運行異步任務的頁面的用戶體驗，以便在內容可用后立即通過呈現內容來完全呈現。流式渲染允許渲染靜態 HTML 以及內容的占位符。一旦異步服務器端調用完成（意味著它可以傳輸數據），實際的 HTML 頁面就會通過用實際數據填充占位符對象來更新。

/Pages/Weather.razor
@attribute [StreamRendering]

保留組件狀態

可以使用現有 PersistentComponentState 服務在 Blazor Web 應用中保留和讀取組件狀態

Auto mode

自動模式是我個人最期待的一種模式，它代表了 Blazor 的“終極”場景，允許將服務器端和 WebAssembly 結合在一起。

此場景提供來自服務器的初始頁面，這意味著它將快速加載。隨后，必要的對象被下載到客戶端，因此下次頁面加載時，它會從 Wasm 提供。

新建 Blazor Web App 工程

1. 默認情況下，Blazor Web App 模板設置為SSR服務器端呈現Razor 組件
2. 選擇“Weather”菜單，頁面將短暫顯示“Loading...”，然后在表格中呈現天氣數據。這是前面討論的流渲染功能的示例

/Pages/Weather.razor

注意第2行：

@attribute [StreamRendering]

這允許新的 Blazor 流渲染功能發揮作用。

代碼部分更新為：

@attribute [StreamRendering(false)]

然后單擊“Weather”頁面。請注意，這次沒有顯示“Loading...”消息，但頁面需要幾秒鐘的時間才能呈現并顯示實際的天氣表。

交互式呈現模式

打開新工程的 Program.cs 文件, 會看到以下新的配置

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents() //添加服務以支持呈現交互式服務器組件
    .AddInteractiveWebAssemblyComponents(); //添加服務以支持呈現交互式 WebAssembly 組件

//終結點約定生成器擴展
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode() //配置應用程序的服務器渲染模式
    .AddInteractiveWebAssemblyRenderMode() //為應用配置 WebAssembly 呈現模式。
    .AddAdditionalAssemblies(typeof(Counter).Assembly);

將呈現模式應用于組件實例

1. 將服務器呈現模式應用于 Dialog 組件實例：

<Dialog @rendermode="InteractiveServer" />

2. 使用自定義配置直接引用實例化的靜態呈現模式實例：

@rendermode renderMode

@code {
    private static IComponentRenderMode renderMode = 
        new InteractiveWebAssemblyRenderMode(prerender: false);
}

3. 將呈現模式應用于組件定義

@page "..."
@rendermode RenderMode.InteractiveServer

4. 呈現模式

呈現模式	指令	注意事項
交互式服務器	@attribute [RenderModeInteractiveServer]	放在SSR工程(BlazorApp1)
交互式 WebAssembly	@attribute [RenderModeInteractiveWebAssembly]	放在Wasm工程(BlazorApp1.Client)
交互式自動	@attribute [RenderModeInteractiveAuto]	放在Wasm工程(BlazorApp1.Client)

測試頁面

**RenderModeInteractiveServer.razor **

路徑:SSR工程(BlazorApp1)/Components/Pages

@page "/render-mode-InteractiveServer"
@rendermode InteractiveServer

<h2>InteractiveServer</h2>

<button @onclick="UpdateMessage">Click me</button> @message

@code {
    private string message = "Not clicked yet.";

    private void UpdateMessage()
    {
        message = "Somebody clicked me!";
    }
}

RenderModeInteractiveWebAssembly.razor

路徑:Wasm工程(BlazorApp1.Client)/Pages

@page "/render-mode-InteractiveWebAssembly"
@rendermode InteractiveWebAssembly

<h2>InteractiveWebAssembly</h2>

<button @onclick="UpdateMessage">Click me</button> @message

@code {
    private string message = "Not clicked yet.";

    private void UpdateMessage()
    {
        message = "Somebody clicked me!";
    }
}

RenderModeInteractiveAuto.razor

路徑:Wasm工程(BlazorApp1.Client)/Pages

@page "/render-mode-InteractiveAuto"
@rendermode InteractiveAuto

<h2>InteractiveAuto</h2>

<button @onclick="UpdateMessage">Click me</button> @message

@code {
    private string message = "Not clicked yet.";

    private void UpdateMessage()
    {
        message = "Somebody clicked me!";
    }
}

測試項目鏈接

https://github.com/densen2014/net8test

總結

以上是生活随笔為你收集整理的.Net8 Blazor 尝鲜的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。