.Net8 Blazor 嚐鮮

AlexChow發表於2023-11-15
Blazor

全棧 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" />
  1. 使用自定義配置直接引用例項化的靜態呈現模式例項：
@rendermode renderMode

@code {
    private static IComponentRenderMode renderMode = 
        new InteractiveWebAssemblyRenderMode(prerender: false);
}
  1. 將呈現模式應用於元件定義
@page "..."
@rendermode RenderMode.InteractiveServer
  1. 呈現模式
呈現模式 指令 注意事項 WebSocket
互動式伺服器 @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

相關文章