一、Blazor介紹

Blazor是微軟在Asp.net core 3.0中推出的一個前端MVVM模型，它可以利用Razor頁面引擎和C#作為腳本語言來構(gòu)建WEB頁面.

在.Net5中，Blazor將代替?zhèn)鹘y(tǒng)的Web Pages?？梢源嫒缦麓a簡單演示了它的基本功能：

和Angular JS和VUE的模型非常類似，Blazor 支持大多數(shù)應(yīng)用所需的核心方案：

• 參數(shù)
• 事件處理
• 數(shù)據(jù)綁定
• 路由
• 依賴關(guān)系注入
• 布局
• 模板
• 級聯(lián)值

使用Blazor主要有如下好處：

• C# 語言：使用 C# 代替 JavaScript 來編寫代碼。
• .NET 生態(tài)系統(tǒng)：利用現(xiàn)有的 .NET 庫生態(tài)系統(tǒng)。
• 完整堆棧開發(fā)：共享服務(wù)器和客戶端邏輯。
• 快速且具有可伸縮性：.NET 旨在實現(xiàn)出色的性能、可靠性和安全性。
• 行業(yè)領(lǐng)先工具：始終高效支持 Windows、Linux 和 macOS 上的 Visual Studio。
• 穩(wěn)定性和一致性：以一組穩(wěn)定、功能豐富且易用的通用語言、框架和工具為基礎(chǔ)來進行生成。

二、Blazor的模式

1、客戶端模式：

運行Blazor需要C#支持，在客戶端模式下，通過WebAssembly的方式實現(xiàn)的：

• C# 代碼文件和 Razor 文件將被編譯為 .NET 程序集。
• 該程序集和 .NET 運行時將被下載到瀏覽器。
• Blazor 客戶端啟動 .NET 運行時并配置運行時，為應(yīng)用加載程序集。 文檔對象模型 (DOM) 操作和瀏覽器 API 調(diào)用將由 Blazor 客戶端運行時通過 JavaScript 互操作處理。

2、服務(wù)端模式：

Blazor組件呈現(xiàn)邏輯也可以在服務(wù)端實現(xiàn)，通過SingalR連接傳遞UI更新：

• 處理從瀏覽器到服務(wù)器的發(fā)送 UI 事件。
• 運行組件后，將服務(wù)器發(fā)送的 UI 更新重新應(yīng)用到瀏覽器。

3、兩種模式的比較：

和客戶端模式相比，服務(wù)端模式有如下有點：

• 客戶端不需要WebAssembly支持，具有更好的客戶端兼容性
• 不需要下載.net webassembly程序集，具有更小的頁面加載時間
• 可以運行完整的.net runmtime，可以實現(xiàn)更加強大的功能

但同時也有如下缺點：

• 所有操作都需要發(fā)往服務(wù)器，網(wǎng)絡(luò)不好的時候有延時
• 所有運算都在服務(wù)端進行，服務(wù)器端具有更大的處理壓力

綜上所述，客戶端具有更好的效率，服務(wù)端具有更少的約束和更強大的功能，對于一些對性能要求不高和網(wǎng)絡(luò)不差的場景，服務(wù)端模式無疑是非常合適的選擇。

簡單說：
Blazor Server 適合內(nèi)部局域網(wǎng)的運用。
Blazor WebAssembly 適合各類內(nèi)部應(yīng)用（比如公司內(nèi)部管理系統(tǒng)）。
Razor Pages 適合邏輯簡單的 Web 站點。

三、組件

Blazor應(yīng)用基于組件 。 Blazor 中的組件是指 UI 元素，例如頁面、對話框或數(shù)據(jù)輸入窗體。
組件是內(nèi)置到 .NET 程序集的 .NET 類，用來：

• 定義靈活的 UI 呈現(xiàn)邏輯。
• 處理用戶事件。
• 可以嵌套和重用。
• 可以作為 Razor 類庫或 NuGet 包共享和分發(fā)。
  組件類通常以 Razor 標(biāo)記頁（文件擴展名為 .razor ）的形式編寫。 Blazor 中的組件有時被稱為 Razor 組件 。 Razor 是用于將 HTML 標(biāo)記與專為提高開發(fā)人員工作效率而設(shè)計的 C# 代碼結(jié)合在一起的語法。 借助 Razor，可以使用 IntelliSense 支持在同一文件中的 HTML 標(biāo)記和 C# 之間切換。 Razor Pages 和 MVC 也使用 Razor。 與圍繞請求/響應(yīng)模型生成的 Razor Pages 和 MVC 不同，組件專門用于處理客戶端 UI 邏輯和構(gòu)成。

以下 Razor 標(biāo)記演示組件 (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.");
    }
}

對話框的正文內(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>

在瀏覽器中訪問父級 (Index.razor ) 時，將呈現(xiàn)該對話框：

瀏覽器中呈現(xiàn)的對話框組件

如果在應(yīng)用中使用此組件，Visual Studio 和 Visual Studio Code 中的 IntelliSense 可加快使用語法和參數(shù)補全的開發(fā)。

組件呈現(xiàn)為瀏覽器文檔對象模型 (DOM) 的內(nèi)存中表現(xiàn)形式，稱為“呈現(xiàn)樹” ，用于以靈活高效的方式更新 UI。

四、示例：

到此這篇關(guān)于Asp.net core前端框架Blazor的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。