.NET 8新預覽版本使用 Blazor 元件進行伺服器端呈現

tokengo發表於2023-04-12
Blazor元件伺服器

簡介

此預覽版新增了對使用 Blazor 元件進行伺服器端呈現的初始支援。這是 Blazor 統一工作的開始，旨在使 Blazor 元件能夠滿足客戶端和伺服器端的所有 Web UI 需求。這是該功能的早期預覽版，因此仍然受到一定限制，但我們的目標是無論選擇如何構建應用，都能使用可重用的 Blazor 元件。

伺服器端呈現 （SSR） 是指伺服器生成 HTML 以響應請求。使用 SSR 的應用載入速度很快，因為渲染 UI 的所有艱苦工作都在伺服器上完成，而無需下載大型 JavaScript 捆綁包。ASP.NET Core 對帶有 MVC 和 Razor 頁面的 SSR 現有支援，但這些框架缺乏用於構建可重用的 Web UI 片段的元件模型。這就是開拓者的用武之地！我們正在新增對使用 Blazor 元件生成伺服器呈現的 UI 的支援，這些元件也可以擴充套件到客戶端以實現豐富的互動性。

在此預覽版中，可以使用 Blazor 元件執行伺服器端呈現，而無需任何 .cshtml 檔案。框架將發現可路由的 Blazor 元件，並將其設定為終結點。不涉及 WebAssembly 或 WebSocket 連線。你不需要載入任何JavaScript。每個請求由相應終結點的 Blazor 元件獨立處理。

專案體驗

首先需要安裝 .NET 8預覽版最新版

1.建立一個空的 ASP.NET Core web app:

dotnet new web -o WebApp
cd WebApp
  1. 在專案中新增一個簡單的Razor元件:
dotnet new razorcomponent -n MyComponent
  1. 更新MyComponent.razor內容，將其變成一個帶有路由的合適的HTML頁面；
@page "/"
@implements IRazorComponentApplication<MyComponent>

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>Hello Blazor!</h1>
    <p>The time is @DateTime.Now.ToShortTimeString()</p>
</body>
</html>

你還需要在這個元件上實現介面IRazorComponentApplication，該介面目前用於幫助發現應用程式中的元件端點。這個設計可能會在以後的更新中改變，但目前這個介面是必需的。

  1. 在Program.cs中透過呼叫.AddRazorComponents()設定Razor元件服務

    builder.Services.AddRazorComponents();

  2. 透過呼叫對映元件的端點。你需要為你的元件新增一個using指令:MapRazorComponents<TComponent>()

app.MapRazorComponents<WebApp.MyComponent>();

可路由元件將自動在所駐留的程式集中發現。再次注意，當前必須實現，但此設計可能會在以後的更新中更改。MyComponentTComponentIRazorComponentApplication

  1. 執行應用程式並瀏覽到應用程式根目錄檢視你的元件渲染

但是似乎無法互動，我在使用了點選事件但是沒法觸發了

修改MyComponent.razor檔案程式碼

@page "/"
@implements IRazorComponentApplication<MyComponent>

<!DOCTYPE html>
<html lang="en">

<body>
    <h1>Hello Blazor!</h1>
    <p>The time is @DateTime.Now.ToShortTimeString()</p>
    <p>Counter: @counter</p>
    <button @onclick="OnClick">run</button>
    @code {
        private int counter = 0;
        private void OnClick()
        {
            counter++;
        }
    }
</body>

</html>

執行效果：

當我們點選按鈕並不會觸發事件！可能是需要寫js去完成，歡迎大佬一塊討論討論新的技術

來著token的分享

技術交流：737776595

相關文章