全棧 Web UI

隨著 .NET 8 的發(fā)布，Blazor 已成為全堆棧 Web UI 框架，可用于開發(fā)在組件或頁面級別呈現(xiàn)內(nèi)容的應(yīng)用，其中包含：

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

默認情況下，交互式呈現(xiàn)模式還會預呈現(xiàn)內(nèi)容。

Blazor 呈現(xiàn)模式

流式渲染

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

/Pages/Weather.razor
@attribute [StreamRendering]

保留組件狀態(tài)

可以使用現(xiàn)有 PersistentComponentState 服務(wù)在 Blazor Web 應(yīng)用中保留和讀取組件狀態(tài)

Auto mode

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

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

新建 Blazor Web App 工程

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

/Pages/Weather.razor

注意第2行：

@attribute [StreamRendering]

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

代碼部分更新為：

@attribute [StreamRendering(false)]

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

交互式呈現(xiàn)模式

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

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

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

將呈現(xiàn)模式應(yīng)用于組件實例

1. 將服務(wù)器呈現(xiàn)模式應(yīng)用于 Dialog 組件實例：

<Dialog @rendermode="InteractiveServer" />

2. 使用自定義配置直接引用實例化的靜態(tài)呈現(xiàn)模式實例：

@rendermode renderMode

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

3. 將呈現(xiàn)模式應(yīng)用于組件定義

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

4. 呈現(xiàn)模式

呈現(xiàn)模式	指令	注意事項
交互式服務(wù)器	@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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。