Asp.net?core前端框架Blazor怎么使用

今天小編給大家分享一下Asp.net core前端框架Blazor怎么使用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

一、Blazor介紹

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

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

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

• 參數(shù)

• 事件處理

• 數(shù)據(jù)綁定

• 路由

• 依賴(lài)關(guān)系注入

• 布局

• 模板

• 級(jí)聯(lián)值

使用Blazor主要有如下好處：

• C# 語(yǔ)言：使用 C# 代替 JavaScript 來(lái)編寫(xiě)代碼。

• .NET 生態(tài)系統(tǒng)：利用現(xiàn)有的 .NET 庫(kù)生態(tài)系統(tǒng)。

• 完整堆棧開(kāi)發(fā)：共享服務(wù)器和客戶端邏輯。

• 快速且具有可伸縮性：.NET 旨在實(shí)現(xiàn)出色的性能、可靠性和安全性。

• 行業(yè)領(lǐng)先工具：始終高效支持 Windows、Linux 和 macOS 上的 Visual Studio。

• 穩(wěn)定性和一致性：以一組穩(wěn)定、功能豐富且易用的通用語(yǔ)言、框架和工具為基礎(chǔ)來(lái)進(jìn)行生成。

二、Blazor的模式

1、客戶端模式：

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

• C# 代碼文件和 Razor 文件將被編譯為 .NET 程序集。

• 該程序集和 .NET 運(yùn)行時(shí)將被下載到瀏覽器。

• Blazor 客戶端啟動(dòng) .NET 運(yùn)行時(shí)并配置運(yùn)行時(shí)，為應(yīng)用加載程序集。 文檔對(duì)象模型 (DOM) 操作和瀏覽器 API 調(diào)用將由 Blazor 客戶端運(yùn)行時(shí)通過(guò) JavaScript 互操作處理。

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

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

• 處理從瀏覽器到服務(wù)器的發(fā)送 UI 事件。

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

3、兩種模式的比較：

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

• 客戶端不需要WebAssembly支持，具有更好的客戶端兼容性

• 不需要下載.net webassembly程序集，具有更小的頁(yè)面加載時(shí)間

• 可以運(yùn)行完整的.net runmtime，可以實(shí)現(xiàn)更加強(qiáng)大的功能

但同時(shí)也有如下缺點(diǎn)：

• 所有操作都需要發(fā)往服務(wù)器，網(wǎng)絡(luò)不好的時(shí)候有延時(shí)

• 所有運(yùn)算都在服務(wù)端進(jìn)行，服務(wù)器端具有更大的處理壓力

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

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

三、組件

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

• 定義靈活的 UI 呈現(xiàn)邏輯。

• 處理用戶事件。

• 可以嵌套和重用。

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

以下 Razor 標(biāo)記演示組件 (Dialog.razor )，該組件可以嵌套在另一個(gè)組件中：

<div>
    <h2>@Title</h2>

    @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 "/"

<h2>Hello, world!</h2>

Welcome to your new app.

<Dialog Title="Blazor">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

在瀏覽器中訪問(wèn)父級(jí) (Index.razor ) 時(shí)，將呈現(xiàn)該對(duì)話框：

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

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

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

四、示例：

以上就是“Asp.net core前端框架Blazor怎么使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。