Blazor 是一個使用 .NET 生成交互式客戶端 Web UI 的框架:
- 使用 C# 代替 JavaScript 來創(chuàng)建豐富的交互式 UI。
- 共享使用 .NET 編寫的服務器端和客戶端應用邏輯镣衡。
- 將 UI 呈現(xiàn)為 HTML 和 CSS牧挣,以支持眾多瀏覽器,其中包括移動瀏覽器。
使用 .NET 進行客戶端 Web 開發(fā)可提供以下優(yōu)勢:
- 使用 C# 代替 JavaScript 來編寫代碼斤贰。
- 利用現(xiàn)有的 .NET 庫生態(tài)系統(tǒng)佑淀。
- 在服務器和客戶端之間共享應用邏輯耗拓。
- 受益于 .NET 的性能拇颅、可靠性和安全性。
- 始終高效支持 Windows乔询、Linux 和 macOS 上的 Visual Studio樟插。
- 以一組穩(wěn)定、功能豐富且易用的通用語言竿刁、框架和工具為基礎來進行生成黄锤。
組件
Blazor應用基于組件 。 Blazor 中的組件是指 UI 元素们妥,例如頁面猜扮、對話框或數(shù)據輸入窗體。
組件是內置到 .NET 程序集的 .NET 類监婶,用來:
- 定義靈活的 UI 呈現(xiàn)邏輯旅赢。
- 處理用戶事件。
- 可以嵌套和重用惑惶。
- 可以作為 Razor 類庫或 NuGet 包共享和分發(fā)煮盼。
組件類通常以 Razor 標記頁(文件擴展名為 .razor )的形式編寫。 Blazor 中的組件有時被稱為 Razor 組件 带污。 Razor 是用于將 HTML 標記與專為提高開發(fā)人員工作效率而設計的 C# 代碼結合在一起的語法僵控。 借助 Razor,可以使用 IntelliSense 支持在同一文件中的 HTML 標記和 C# 之間切換鱼冀。 Razor Pages 和 MVC 也使用 Razor报破。 與圍繞請求/響應模型生成的 Razor Pages 和 MVC 不同,組件專門用于處理客戶端 UI 邏輯和構成千绪。
以下 Razor 標記演示組件 (Dialog.razor )充易,該組件可以嵌套在另一個組件中:
<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.");
}
}
對話框的正文內容 (ChildContent) 和標題 (Title) 由在其 UI 中使用此組件的組件提供。 OnYes 是由按鈕的 onclick 事件觸發(fā)的 C# 方法荸型。
Blazor 使用 UI 構成的自然 HTML 標記盹靴。 HTML 元素指定組件,并且標記的特性將值傳遞給組件的屬性瑞妇。
在以下示例中稿静,Index 組件使用 Dialog 組件。 ChildContent 和 Title 由 <Dialog> 元素的屬性和內容設置辕狰。
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>
在瀏覽器中訪問父級 (Index.razor ) 時改备,將呈現(xiàn)該對話框:
如果在應用中使用此組件,Visual Studio 和 Visual Studio Code 中的 IntelliSense 可加快使用語法和參數(shù)補全的開發(fā)蔓倍。
組件呈現(xiàn)為瀏覽器文檔對象模型 (DOM) 的內存中表現(xiàn)形式绍妨,稱為“呈現(xiàn)樹” 润脸,用于以靈活高效的方式更新 UI。
Blazor WebAssembly
Blazor WebAssembly 是一個單頁應用框架他去,可用它通過 .NET 生成交互式客戶端 Web 應用毙驯。 Blazor WebAssembly 使用開放的 Web 標準(沒有插件或代碼轉換),適用于移動瀏覽器等各種新式 Web 瀏覽器灾测。
通過 WebAssembly(縮寫為 wasm )爆价,可在 Web 瀏覽器內運行 .NET 代碼。 WebAssembly 是針對快速下載和最大執(zhí)行速度優(yōu)化的壓縮字節(jié)碼格式媳搪。 WebAssembly 是開放的 Web 標準铭段,支持用于無插件的 Web 瀏覽器。
WebAssembly 代碼可通過 JavaScript(稱為 JavaScript 互操作性 或 JavaScript 互操作 )訪問瀏覽器的完整功能秦爆。 通過瀏覽器中的 WebAssembly 執(zhí)行的 .NET 代碼在瀏覽器的 JavaScript 沙盒中運行序愚,沙盒提供的保護可防御客戶端計算機上的惡意操作。
生成 Blazor WebAssembly 應用并在瀏覽器中運行時:
- C# 代碼文件和 Razor 文件將被編譯為 .NET 程序集爸吮。
- 該程序集和 .NET 運行時將被下載到瀏覽器。
- Blazor WebAssembly 啟動 .NET 運行時并配置運行時望门,為應用加載程序集形娇。 Blazor WebAssembly 運行時使用 JavaScript 互操作處理 DOM 操作和瀏覽器 API 調用。
已發(fā)布應用的大谐镂蟆(其有效負載大小 )是應用可用性的關鍵性能因素桐早。 大型應用需要相對較長的時間才能下載到瀏覽器,這會損害用戶體驗厨剪。 Blazor WebAssembly 優(yōu)化有效負載大小哄酝,以縮短下載時間:
- 在中間語言 (IL) 鏈接器發(fā)布應用時,會從應用刪除未使用的代碼祷膳。
- 壓縮 HTTP 響應陶衅。
- .NET 運行時和程序集緩存在瀏覽器中。
Blazor 服務器
Blazor 將組件呈現(xiàn)邏輯從 UI 更新的應用方式中分離出來钾唬。 Blazor 服務器在 ASP.NET Core 應用中添加了對在服務器上托管 Razor 組件的支持。 可通過 SignalR 連接處理 UI 更新侠驯。
運行時處理從瀏覽器向服務器發(fā)送 UI 事件抡秆,并在運行組件后,將服務器發(fā)送的 UI 更新重新應用到瀏覽器吟策。
Blazor 服務器用于與瀏覽器通信的連接還用于處理 JavaScript 互操作調用儒士。
JavaScript 互操作
對于需要第三方 JavaScript 庫和訪問瀏覽器 API 的應用檩坚,組件與 JavaScript 進行互操作着撩。 組件能夠使用 JavaScript 能夠使用的任何庫或 API诅福。 C# 代碼可以調用到 JavaScript 代碼,而 JavaScript 代碼可以調用到 C# 代碼拖叙。 有關詳細信息氓润,請參閱 ASP.NET Core Blazor JavaScript 互操作。
代碼共享和 .NET Standard
Blazor 實現(xiàn) .NET Standard 2.0薯鳍。 .NET Standard 是正式的 .NET API 規(guī)范咖气,常見于 .NET 實現(xiàn)中。 .NET Standard 類庫可以在不同 .NET 平臺之間共享挖滤,例如 Blazor崩溪、.NET Framework、.NET Core斩松、Xamarin伶唯、Mono 和 Unity。
不適用于 Web 瀏覽器內部的 API(例如惧盹,訪問文件系統(tǒng)乳幸、打開套接字和線程處理)將引發(fā) PlatformNotSupportedException。