Asp.net core前端框架Blazor介紹

Posted on 2022-06-08 by WalkonNet

一、Blazor介紹

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

在.Net5中，Blazor將代替傳統的Web Pages。可以代替如下代碼簡單演示瞭它的基本功能：

和Angular JS和VUE的模型非常類似，Blazor 支持大多數應用所需的核心方案：

參數
事件處理
數據綁定
路由
依賴關系註入
佈局
模板
級聯值

使用Blazor主要有如下好處：

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

二、Blazor的模式

1、客戶端模式：

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

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

2、服務端模式：

Blazor組件呈現邏輯也可以在服務端實現，通過SingalR連接傳遞UI更新：

處理從瀏覽器到服務器的發送 UI 事件。
運行組件後，將服務器發送的 UI 更新重新應用到瀏覽器。

3、兩種模式的比較：

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

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

但同時也有如下缺點：

所有操作都需要發往服務器，網絡不好的時候有延時
所有運算都在服務端進行，服務器端具有更大的處理壓力

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

簡單說：
Blazor Server 適合內部局域網的運用。
Blazor WebAssembly 適合各類內部應用（比如公司內部管理系統）。
Razor Pages 適合邏輯簡單的 Web 站點。

三、組件

Blazor應用基於組件。 Blazor 中的組件是指 UI 元素，例如頁面、對話框或數據輸入窗體。
組件是內置到 .NET 程序集的 .NET 類，用來：

定義靈活的 UI 呈現邏輯。
處理用戶事件。
可以嵌套和重用。
可以作為 Razor 類庫或 NuGet 包共享和分發。
組件類通常以 Razor 標記頁（文件擴展名為 .razor ）的形式編寫。 Blazor 中的組件有時被稱為 Razor 組件。 Razor 是用於將 HTML 標記與專為提高開發人員工作效率而設計的 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 事件觸發的 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 ) 時，將呈現該對話框：

瀏覽器中呈現的對話框組件

如果在應用中使用此組件，Visual Studio 和 Visual Studio Code 中的 IntelliSense 可加快使用語法和參數補全的開發。

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

四、示例：

到此這篇關於Asp.net core前端框架Blazor的文章就介紹到這瞭。希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

Asp.net core前端框架Blazor介紹