Blazor 基礎(chǔ)知識(shí)

Intro

Blazor 是微軟在 .NET 里推出的一個(gè) WEB 客戶端 UI 交互的框架，

使用 Blazor 你可以代替 JavaScript 來實(shí)現(xiàn)自己的頁面交互邏輯，可以很大程度上進(jìn)行 C# 代碼的復(fù)用，Blazor 對(duì)于 .NET 開發(fā)人員來說是一個(gè)不錯(cuò)的選擇。

托管模型

Blazor 有兩種托管模式，一種是 Blazor Server 模式，基于 asp.net core 部署，客戶端和服務(wù)器的交互通過 SignalR 來完成，來實(shí)現(xiàn)客戶端 UI 的更新和行為的交互。

Blazor Server runs .NET code on the server and interacts with the Document Object Model on the client over a SignalR connectionBlazor Server

另外一種是 Blazor WebAssembly 模式， 將 Blazor 應(yīng)用、其依賴項(xiàng)以及 .NET 運(yùn)行時(shí)下載到瀏覽器， 應(yīng)用將在瀏覽器線程中直接執(zhí)行。

Blazor WebAssembly runs .NET code in the browser with WebAssembly.Blazor WebAssembly

兩種模式各有優(yōu)缺點(diǎn)，但是個(gè)人覺得 WebAssembly 模式的 Blazor 意義更大一些

Blazor Server 托管模型具有以下優(yōu)點(diǎn)：

• 下載項(xiàng)大小明顯小于 Blazor WebAssembly 應(yīng)用，且應(yīng)用加載速度快得多。

• 應(yīng)用可充分利用服務(wù)器功能，包括使用任何與 .NET Core 兼容的 API。

• 服務(wù)器上的 .NET Core 用于運(yùn)行應(yīng)用，因此調(diào)試等現(xiàn)有 .NET 工具可按預(yù)期正常工作。

• 支持瘦客戶端。例如，Blazor Server 應(yīng)用適用于不支持 WebAssembly 的瀏覽器以及資源受限的設(shè)備。

• 應(yīng)用的 .NET/C# 代碼庫（其中包括應(yīng)用的組件代碼）不適用于客戶端。

Blazor Server 托管模型具有以下局限性：

• 通常延遲較高。每次用戶交互都涉及到網(wǎng)絡(luò)躍點(diǎn)。

• 不支持脫機(jī)工作。如果客戶端連接失敗，應(yīng)用會(huì)停止工作。

• 如果具有多名用戶，則應(yīng)用擴(kuò)縮性存在挑戰(zhàn)。服務(wù)器必須管理多個(gè)客戶端連接并處理客戶端狀態(tài)(SignalR)。

• 需要 ASP.NET Core 服務(wù)器為應(yīng)用提供服務(wù)。無服務(wù)器部署方案不可行，例如通過內(nèi)容分發(fā)網(wǎng)絡(luò) (CDN) 為應(yīng)用提供服務(wù)的方案。

Blazor WebAssembly 托管模型具有以下優(yōu)點(diǎn)：

• 沒有 .NET 服務(wù)器端依賴，應(yīng)用下載到客戶端后即可正常運(yùn)行。

• 可充分利用客戶端資源和功能。

• 工作可從服務(wù)器轉(zhuǎn)移到客戶端。

• 無需 ASP.NET Core Web 服務(wù)器即可托管應(yīng)用。無服務(wù)器部署方案可行，例如通過內(nèi)容分發(fā)網(wǎng)絡(luò) (CDN) 為應(yīng)用提供服務(wù)的方案。

Blazor WebAssembly 托管模型具有以下局限性：

• 應(yīng)用僅可使用瀏覽器功能。

• 需要可用的客戶端硬件和軟件（例如 WebAssembly 支持）。

• 下載項(xiàng)大小較大，應(yīng)用加載耗時(shí)較長。

• .NET 運(yùn)行時(shí)和工具支持不夠完善。例如，.NET Standard 支持和調(diào)試方面存在限制。

項(xiàng)目結(jié)構(gòu)

Blazor 結(jié)合了 Razor Page 的開發(fā)模式，可以使用 Razor 的語法，文件結(jié)構(gòu)也和 Razor Page 的模式有些類似

Blazor 是以組件為核心的，頁面所有的部分都是一個(gè)組件

Blazor WebAssembly 對(duì)應(yīng)的 SDK 是 Microsoft.NET.Sdk.BlazorWebAssembly，來看一下具體的項(xiàng)目文件：

<Project?Sdk="Microsoft.NET.Sdk.BlazorWebAssembly"><PropertyGroup><TargetFramework>net6.0</TargetFramework></PropertyGroup><ItemGroup><PackageReference?Include="Microsoft.AspNetCore.Components.WebAssembly"?Version="6.0.0-preview.4.21253.5"?/><PackageReference?Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer"?Version="6.0.0-preview.4.21253.5"?PrivateAssets="all"?/></ItemGroup></Project> project-structure

• App.razor: Blazor WebAssembly 應(yīng)用根組件

• Program.cs: 配置應(yīng)用 WebAssembly host 的入口文件

• _Imports.razor: 和 Razor Page 一樣，可以在這里定義一些 Razor Page 或者組件里公用的 namespace

• Pages：包含可以路由到的頁面，page 需要使用 @page 指令指定

• Shared：包含一些公共的組件或者樣式定義

• wwwroot: 應(yīng)用公共靜態(tài)文件的根目錄

Routing

在頁面組件上通過 @page 指令指定頁面路由 @page "/path"，就會(huì)生成一個(gè) RouteAttribute 以支持路由，路由支持像 asp.net core 一樣的路由約束和 Path 參數(shù)

@page "/RouteParameter/{text}"<h1>Blazor is @Text!</h1>@code {[Parameter]public string Text { get; set; } } @page "/RouteParameter/{text?}"<h1>Blazor is @Text!</h1>@code {[Parameter]public string Text { get; set; }protected override void OnInitialized(){Text = Text ?? "fantastic";} } @page "/user/{Id:int}"<h1>User Id: @Id</h1>@code {[Parameter]public int Id { get; set; } }

Catch-all

@page "/catch-all/{*pageRoute}"@code {[Parameter]public string PageRoute { get; set; } }

Interop

Model Binding

最基本的我們需要了解如何做數(shù)據(jù)綁定，

<div><input?type="checkbox"?checked="@item.IsCompleted"?/><h4>@item.TodoTitle</h4>?--?<span class="small">@item.CreatedTime.ToStandardTimeString()</span> </div> <div?class="todo-item-details"><p>@item.TodoContent</p> </div> @code {public?List<TodoItem>?TodoItems?{?get;?private?set;?}protected?override?async?Task?OnInitializedAsync(){TodoItems?=?await?scheduler.GetAllTasks();await?base.OnInitializedAsync();} }

Event Binding

在現(xiàn)在的 Blazor 里，事件綁定是偏向于使用原生的事件名，比如按鈕的事件通過 @onclick 方式來綁定事件，例如下面的示例：

<button?@onclick="AddNewTodo"?class="btn?btn-info">Add?new?todo</button>

為 button 指定了一個(gè) onclick 事件處理器

Call JS method

執(zhí)行 JS 方法有時(shí)候是不可缺少的一部分，因?yàn)楹芏嘟M件都是 JS 的，借助于此，我們就可以直接調(diào)用 ?JS 的方法來實(shí)現(xiàn)一些組件功能，示例如下，分是否有返回值可以分為兩類：

With return value

@inject?IJSRuntime?JS @code?{private?MarkupString?text;private?async?Task?ConvertArray(){text?=?new(await?JS.InvokeAsync<string>("convertArray",?quoteArray));} }

Without return value

@inject?IJSRuntime?JS @code?{private?Random?r?=?new();private?string?stockSymbol;private?decimal?price;private?async?Task?SetStock(){stockSymbol?=?$"{(char)('A'?+?r.Next(0,?26))}{(char)('A'?+?r.Next(0,?26))}";price?=?r.Next(1,?101);await?JS.InvokeVoidAsync("displayTickerAlert1",?stockSymbol,?price);} }

More

更多關(guān)于 Blazor 相關(guān)的知識(shí)可以參考微軟的文檔

References

• https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-5.0

• https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-5.0

• https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-5.0

• https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-5.0

• https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript?view=aspnetcore-5.0

• https://docs.microsoft.com/en-us/dotnet/api/microsoft.jsinterop.ijsruntime?view=dotnet-plat-ext-6.0

總結(jié)

以上是生活随笔為你收集整理的Blazor 基础入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。