.NET?8新預(yù)覽版使用?Blazor?組件進(jìn)行服務(wù)器端呈現(xiàn)(項(xiàng)目體驗(yàn))

更新時(shí)間：2023年04月13日 08:36:32 作者：tokengo

這篇文章主要介紹了.NET?8新預(yù)覽版使用?Blazor?組件進(jìn)行服務(wù)器端呈現(xiàn)(項(xiàng)目體驗(yàn)),這是 Blazor 統(tǒng)一工作的開(kāi)始，旨在使 Blazor 組件能夠滿足客戶端和服務(wù)器端的所有 Web UI 需求，需要的朋友可以參考下

簡(jiǎn)介

此預(yù)覽版添加了對(duì)使用 Blazor 組件進(jìn)行服務(wù)器端呈現(xiàn)的初始支持。這是 Blazor 統(tǒng)一工作的開(kāi)始，旨在使 Blazor 組件能夠滿足客戶端和服務(wù)器端的所有 Web UI 需求。這是該功能的早期預(yù)覽版，因此仍然受到一定限制，但我們的目標(biāo)是無(wú)論選擇如何構(gòu)建應(yīng)用，都能使用可重用的 Blazor 組件。

服務(wù)器端呈現(xiàn) （SSR）是指服務(wù)器生成 HTML 以響應(yīng)請(qǐng)求。使用 SSR 的應(yīng)用加載速度很快，因?yàn)殇秩?UI 的所有艱苦工作都在服務(wù)器上完成，而無(wú)需下載大型 JavaScript 捆綁包。ASP.NET Core 對(duì)帶有 MVC 和 Razor 頁(yè)面的 SSR 現(xiàn)有支持，但這些框架缺乏用于構(gòu)建可重用的 Web UI 片段的組件模型。這就是開(kāi)拓者的用武之地！我們正在添加對(duì)使用 Blazor 組件生成服務(wù)器呈現(xiàn)的 UI 的支持，這些組件也可以擴(kuò)展到客戶端以實(shí)現(xiàn)豐富的交互性。

在此預(yù)覽版中，可以使用 Blazor 組件執(zhí)行服務(wù)器端呈現(xiàn)，而無(wú)需任何 .cshtml 文件。框架將發(fā)現(xiàn)可路由的 Blazor 組件，并將其設(shè)置為終結(jié)點(diǎn)。不涉及 WebAssembly 或 WebSocket 連接。你不需要加載任何JavaScript。每個(gè)請(qǐng)求由相應(yīng)終結(jié)點(diǎn)的 Blazor 組件獨(dú)立處理。

項(xiàng)目體驗(yàn)

首先需要安裝 .NET 8預(yù)覽版最新版

1.創(chuàng)建一個(gè)空的 ASP.NET Core web app:

dotnet new web -o WebApp
cd WebApp

2.在項(xiàng)目中添加一個(gè)簡(jiǎn)單的Razor組件:

dotnet new razorcomponent -n MyComponent

更新MyComponent.razor內(nèi)容，將其變成一個(gè)帶有路由的合適的HTML頁(yè)面；

@page "/"
@implements IRazorComponentApplication<MyComponent>

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

你還需要在這個(gè)組件上實(shí)現(xiàn)接口IRazorComponentApplication，該接口目前用于幫助發(fā)現(xiàn)應(yīng)用程序中的組件端點(diǎn)。這個(gè)設(shè)計(jì)可能會(huì)在以后的更新中改變，但目前這個(gè)接口是必需的。

4.在Program.cs中通過(guò)調(diào)用.AddRazorComponents()設(shè)置Razor組件服務(wù)

builder.Services.AddRazorComponents();

5.通過(guò)調(diào)用映射組件的端點(diǎn)。你需要為你的組件添加一個(gè)using指令:MapRazorComponents<TComponent>()

app.MapRazorComponents<WebApp.MyComponent>();

可路由組件將自動(dòng)在所駐留的程序集中發(fā)現(xiàn)。再次注意，當(dāng)前必須實(shí)現(xiàn)，但此設(shè)計(jì)可能會(huì)在以后的更新中更改。MyComponentTComponentIRazorComponentApplication

6.運(yùn)行應(yīng)用程序并瀏覽到應(yīng)用程序根目錄查看你的組件渲染

但是似乎無(wú)法交互，我在使用了點(diǎn)擊事件但是沒(méi)法觸發(fā)了

修改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>

運(yùn)行效果：

當(dāng)我們點(diǎn)擊按鈕并不會(huì)觸發(fā)事件！可能是需要寫js去完成，歡迎大佬一塊討論討論新的技術(shù)

到此這篇關(guān)于.NET 8新預(yù)覽版本使用 Blazor 組件進(jìn)行服務(wù)器端呈現(xiàn)的文章就介紹到這了,更多相關(guān).NET使用 Blazor 組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: