Blazor 基礎知識

Intro

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

使用 Blazor 你可以代替 JavaScript 來實現自己的頁面交互邏輯，可以很大程度上進行 C# 代碼的復用，Blazor 對于 .NET 開發人員來說是一個不錯的選擇。

托管模型

Blazor 有兩種托管模式，一種是 Blazor Server 模式，基于 asp.net core 部署，客戶端和服務器的交互通過 SignalR 來完成，來實現客戶端 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 應用、其依賴項以及 .NET 運行時下載到瀏覽器， 應用將在瀏覽器線程中直接執行。

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

兩種模式各有優缺點，但是個人覺得 WebAssembly 模式的 Blazor 意義更大一些

Blazor Server 托管模型具有以下優點：

• 下載項大小明顯小于 Blazor WebAssembly 應用，且應用加載速度快得多。

• 應用可充分利用服務器功能，包括使用任何與 .NET Core 兼容的 API。

• 服務器上的 .NET Core 用于運行應用，因此調試等現有 .NET 工具可按預期正常工作。

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

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

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

• 通常延遲較高。每次用戶交互都涉及到網絡躍點。

• 不支持脫機工作。如果客戶端連接失敗，應用會停止工作。

• 如果具有多名用戶，則應用擴縮性存在挑戰。服務器必須管理多個客戶端連接并處理客戶端狀態(SignalR)。

• 需要 ASP.NET Core 服務器為應用提供服務。無服務器部署方案不可行，例如通過內容分發網絡 (CDN) 為應用提供服務的方案。

Blazor WebAssembly 托管模型具有以下優點：

• 沒有 .NET 服務器端依賴，應用下載到客戶端后即可正常運行。

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

• 工作可從服務器轉移到客戶端。

• 無需 ASP.NET Core Web 服務器即可托管應用。無服務器部署方案可行，例如通過內容分發網絡 (CDN) 為應用提供服務的方案。

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

• 應用僅可使用瀏覽器功能。

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

• 下載項大小較大，應用加載耗時較長。

• .NET 運行時和工具支持不夠完善。例如，.NET Standard 支持和調試方面存在限制。

項目結構

Blazor 結合了 Razor Page 的開發模式，可以使用 Razor 的語法，文件結構也和 Razor Page 的模式有些類似

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

Blazor WebAssembly 對應的 SDK 是 Microsoft.NET.Sdk.BlazorWebAssembly，來看一下具體的項目文件：

<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 應用根組件

• Program.cs: 配置應用 WebAssembly host 的入口文件

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

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

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

• wwwroot: 應用公共靜態文件的根目錄

Routing

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

@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

最基本的我們需要了解如何做數據綁定，

<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

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

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

為 button 指定了一個 onclick 事件處理器

Call JS method

執行 JS 方法有時候是不可缺少的一部分，因為很多組件都是 JS 的，借助于此，我們就可以直接調用 ?JS 的方法來實現一些組件功能，示例如下，分是否有返回值可以分為兩類：

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

更多關于 Blazor 相關的知識可以參考微軟的文檔

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。