Blazor 是一個(gè)使用 .NET 生成交互式客戶端 Web UI 的框架:
- 使用 C# 代替 JavaScript 來創(chuàng)建豐富的交互式 UI。
- 共享使用 .NET 編寫的服務(wù)器端和客戶端應(yīng)用邏輯。
- 將 UI 呈現(xiàn)為 HTML 和 CSS,以支持眾多瀏覽器,其中包括移動(dòng)瀏覽器。
使用 .NET 進(jìn)行客戶端 Web 開發(fā)可提供以下優(yōu)勢(shì):
- 使用 C# 代替 JavaScript 來編寫代碼。
- 利用現(xiàn)有的 .NET 庫生態(tài)系統(tǒng)。
- 在服務(wù)器和客戶端之間共享應(yīng)用邏輯。
- 受益于 .NET 的性能、可靠性和安全性。
- 始終高效支持 Windows、Linux 和 macOS 上的 Visual Studio。
- 以一組穩(wěn)定、功能豐富且易用的通用語言、框架和工具為基礎(chǔ)來進(jìn)行生成。
組件
Blazor應(yīng)用基于組件 。 Blazor 中的組件是指 UI 元素,例如頁面、對(duì)話框或數(shù)據(jù)輸入窗體。
組件是內(nèi)置到 .NET 程序集的 .NET 類,用來:
- 定義靈活的 UI 呈現(xiàn)邏輯。
- 處理用戶事件。
- 可以嵌套和重用。
- 可以作為 Razor 類庫或 NuGet 包共享和分發(fā)。
組件類通常以 Razor 標(biāo)記頁(文件擴(kuò)展名為 .razor )的形式編寫。 Blazor 中的組件有時(shí)被稱為 Razor 組件 。 Razor 是用于將 HTML 標(biāo)記與專為提高開發(fā)人員工作效率而設(shè)計(jì)的 C# 代碼結(jié)合在一起的語法。 借助 Razor,可以使用 IntelliSense 支持在同一文件中的 HTML 標(biāo)記和 C# 之間切換。 Razor Pages 和 MVC 也使用 Razor。 與圍繞請(qǐng)求/響應(yīng)模型生成的 Razor Pages 和 MVC 不同,組件專門用于處理客戶端 UI 邏輯和構(gòu)成。
以下 Razor 標(biāo)記演示組件 (Dialog.razor ),該組件可以嵌套在另一個(gè)組件中:
<div>
<h1>@Title</h1>
@ChildContent
<button @onclick="OnYes">Yes!</button>
</div>
@code {
[Parameter]
public string Title { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
private void OnYes()
{
Console.WriteLine("Write to the console in C#! 'Yes' button was selected.");
}
}
對(duì)話框的正文內(nèi)容 (ChildContent) 和標(biāo)題 (Title) 由在其 UI 中使用此組件的組件提供。 OnYes 是由按鈕的 onclick 事件觸發(fā)的 C# 方法。
Blazor 使用 UI 構(gòu)成的自然 HTML 標(biāo)記。 HTML 元素指定組件,并且標(biāo)記的特性將值傳遞給組件的屬性。
在以下示例中,Index 組件使用 Dialog 組件。 ChildContent 和 Title 由 <Dialog> 元素的屬性和內(nèi)容設(shè)置。
Index.razor:
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<Dialog Title="Blazor">
Do you want to <i>learn more</i> about Blazor?
</Dialog>
在瀏覽器中訪問父級(jí) (Index.razor ) 時(shí),將呈現(xiàn)該對(duì)話框:
如果在應(yīng)用中使用此組件,Visual Studio 和 Visual Studio Code 中的 IntelliSense 可加快使用語法和參數(shù)補(bǔ)全的開發(fā)。
組件呈現(xiàn)為瀏覽器文檔對(duì)象模型 (DOM) 的內(nèi)存中表現(xiàn)形式,稱為“呈現(xiàn)樹” ,用于以靈活高效的方式更新 UI。
Blazor WebAssembly
Blazor WebAssembly 是一個(gè)單頁應(yīng)用框架,可用它通過 .NET 生成交互式客戶端 Web 應(yīng)用。 Blazor WebAssembly 使用開放的 Web 標(biāo)準(zhǔn)(沒有插件或代碼轉(zhuǎn)換),適用于移動(dòng)瀏覽器等各種新式 Web 瀏覽器。
通過 WebAssembly(縮寫為 wasm ),可在 Web 瀏覽器內(nèi)運(yùn)行 .NET 代碼。 WebAssembly 是針對(duì)快速下載和最大執(zhí)行速度優(yōu)化的壓縮字節(jié)碼格式。 WebAssembly 是開放的 Web 標(biāo)準(zhǔn),支持用于無插件的 Web 瀏覽器。
WebAssembly 代碼可通過 JavaScript(稱為 JavaScript 互操作性 或 JavaScript 互操作 )訪問瀏覽器的完整功能。 通過瀏覽器中的 WebAssembly 執(zhí)行的 .NET 代碼在瀏覽器的 JavaScript 沙盒中運(yùn)行,沙盒提供的保護(hù)可防御客戶端計(jì)算機(jī)上的惡意操作。
生成 Blazor WebAssembly 應(yīng)用并在瀏覽器中運(yùn)行時(shí):
- C# 代碼文件和 Razor 文件將被編譯為 .NET 程序集。
- 該程序集和 .NET 運(yùn)行時(shí)將被下載到瀏覽器。
- Blazor WebAssembly 啟動(dòng) .NET 運(yùn)行時(shí)并配置運(yùn)行時(shí),為應(yīng)用加載程序集。 Blazor WebAssembly 運(yùn)行時(shí)使用 JavaScript 互操作處理 DOM 操作和瀏覽器 API 調(diào)用。
已發(fā)布應(yīng)用的大?。ㄆ溆行ж?fù)載大小 )是應(yīng)用可用性的關(guān)鍵性能因素。 大型應(yīng)用需要相對(duì)較長(zhǎng)的時(shí)間才能下載到瀏覽器,這會(huì)損害用戶體驗(yàn)。 Blazor WebAssembly 優(yōu)化有效負(fù)載大小,以縮短下載時(shí)間:
- 在中間語言 (IL) 鏈接器發(fā)布應(yīng)用時(shí),會(huì)從應(yīng)用刪除未使用的代碼。
- 壓縮 HTTP 響應(yīng)。
- .NET 運(yùn)行時(shí)和程序集緩存在瀏覽器中。
Blazor 服務(wù)器
Blazor 將組件呈現(xiàn)邏輯從 UI 更新的應(yīng)用方式中分離出來。 Blazor 服務(wù)器在 ASP.NET Core 應(yīng)用中添加了對(duì)在服務(wù)器上托管 Razor 組件的支持。 可通過 SignalR 連接處理 UI 更新。
運(yùn)行時(shí)處理從瀏覽器向服務(wù)器發(fā)送 UI 事件,并在運(yùn)行組件后,將服務(wù)器發(fā)送的 UI 更新重新應(yīng)用到瀏覽器。
Blazor 服務(wù)器用于與瀏覽器通信的連接還用于處理 JavaScript 互操作調(diào)用。
JavaScript 互操作
對(duì)于需要第三方 JavaScript 庫和訪問瀏覽器 API 的應(yīng)用,組件與 JavaScript 進(jìn)行互操作。 組件能夠使用 JavaScript 能夠使用的任何庫或 API。 C# 代碼可以調(diào)用到 JavaScript 代碼,而 JavaScript 代碼可以調(diào)用到 C# 代碼。 有關(guān)詳細(xì)信息,請(qǐng)參閱 ASP.NET Core Blazor JavaScript 互操作。
代碼共享和 .NET Standard
Blazor 實(shí)現(xiàn) .NET Standard 2.0。 .NET Standard 是正式的 .NET API 規(guī)范,常見于 .NET 實(shí)現(xiàn)中。 .NET Standard 類庫可以在不同 .NET 平臺(tái)之間共享,例如 Blazor、.NET Framework、.NET Core、Xamarin、Mono 和 Unity。
不適用于 Web 瀏覽器內(nèi)部的 API(例如,訪問文件系統(tǒng)、打開套接字和線程處理)將引發(fā) PlatformNotSupportedException。