全棧 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. 呈現模式

測試頁面

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