James:? 轉載技術社區中一位朋友最新的文章，介紹自己為公司的 WebForm 遺留系統使用 Blazor 重寫前端 UI 的經歷。

---

什么是Blazor組件

Blazor 應用是使用 Razor 組件構建的。組件是用戶界面 (UI) 的自包含部分，具有用于啟用動態行為的處理邏輯。組件可以嵌套、重復使用、在項目間共享，并可在 MVC 和 Razor Pages 應用中使用。

以上是官方文檔給出的定義。實際在工程上，Blazor組件和其他Web前端框架組件一樣，包括HTML、CSS和代碼三個部分，只是這里的“代碼”特指C#語言，而非最常見的JavaScript。

讓我們先看一下官方文檔給出的例子，創建一個razor文件Dialog.razor：

<div class="card" style="width:22rem"><div class="card-body"><h3 class="card-title">@Title</h3><p class="card-text">@ChildContent</p><button @onclick="OnYes">Yes!</button></div> </div>@code {[Parameter]public RenderFragment ChildContent { get; set; }[Parameter]public string Title { get; set; }private void OnYes(){Console.WriteLine("Write to the console in C#! 'Yes' button selected.");} }

這就是一個組件了。這個Dialog組件封裝了：

• 一個允許外部傳遞值（Title屬性）的標題（h3標簽）

• 一個允許外部傳入子組件的段落（p標簽）

• 一個點擊后觸發OnYes方法的按鈕（button標簽）

• div標簽及樣式

這個組件也展示了razor標記語言的特點，在HTML模板里，‘@’標記可以將控件的數據與C#代碼的屬性進行雙向綁定；控件的事件與C#函數的綁定也是類似。這種數據和事件綁定的方式，在三大前端框架的應用中，也不陌生（Angular開發者可能最為親切）。

注意到p標簽里的內容，ChildContent表示一個子組件，與當前的組件形成嵌套。而對應的C#類型則是RenderFragment，這是一個非常重要的類型，是開發模板化組件的基礎。官方提供了一些使用案例，但若要從實際應用的角度去理解，我還是建議去參考一些開源組件項目里的組件實現，這里暫不贅述。

我們再看一下如何使用它：

@page "/"<h1>Hello, world!</h1><p>Welcome to your new app.</p><Dialog Title="Learn More">Do you want to <i>learn more</i> about Blazor? </Dialog>

這段代碼的效果如下：

展示效果

可以看到頁面下方就是封裝了html標簽的Dialog組件，其中@page用來表示當前頁面的路由。

官方給的這個案例，在我看來是花了點心思的：它的結構很簡單，并不難理解，卻充分展示了Blazor組件的基本面貌和Razor語言的基本特點，又涉及到了Blazor組件十分靈活同時開發上限很高的模板化開發，后續等初學者接觸到“組件模板化”的文檔時，起碼不會一無所知了。

本地內置組件

Blazor框架官方內置了一些組件。其中AuthorizeView組件和Route組件是最值得關注的。

涉及到敏感數據的后臺管理系統，肯定要有一套認證授權的機制。AuthorizeView組件經常被用在Layout組件里，來區別顯示認證前后的UI元素。這個組件的實際應用，將在系列的后文中具體介紹。

Route組件則更基礎了，SPA框架當然需要自己的一套路由規則；另外還要處理404的情況。這些都在Route組件（寫在App.razor文件中）里為開發者提供了。

<Router AppAssembly="@typeof(Program).Assembly"><Found Context="routeData"><RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /></Found><NotFound><p>Sorry, there's nothing at this address.</p></NotFound> </Router>

另外，Blazor提供了一個默認布局的MainLayout組件，由項目模板創建。但本質上它只是方便開發者理解如何在Blazor中使用布局。布局組件當然可以自定義名稱和內容，我們可以在頁面里使用@layout指令，來指定頁面具體使用哪一個布局組件。

@page "/" @layout CustomLayout<div>...</div>

其他組件，往往有更好的第三方開源組件，在功能和UI風格上可以取代，本文不特別介紹。內置組件的官方文檔還是比較細致的，因此本文只略作指引，有興趣的讀者可以細讀文檔。

第三方開源組件

在組件式開發流行的今天，任何一個前端框架想要獲取開發者的青睞，開源社區的支持必不可少。甚至我認為Blazor的推廣和普及，開源組件庫首當其沖，屬于社區生態的基礎設施。Blazor發展至今，已經有了多個第三方開源組件項目，基本涵蓋了市面上比較常見的UI組件：Ant Design/Bootstrap/Material UI/Element UI/……

開發Blazor應用時，選擇什么樣的UI組件和風格，本就是“蘿卜青菜，各有所愛”。我最終選擇了Ant-Design組件來開發后臺，這里僅提幾點個人的意見，供讀者參考：

• Ant Design源自阿里優秀的企業級開源UI設計，前端三大框架均有對應的組件實現。Blazor實現的原型來自Ant Design React。

• Ant-Design-Blazor項目的更新周期較短，issue和開發團隊的活躍度較高——意味著個人的意見更容易得到反饋，bug更快地得到修復，新功能更快地落實和發布。

• Ant-Design-Blazor項目是較早一批被Blazor官方在技術大會上提及的開源項目之一——意味著項目已經得到一段時間的檢驗。

• 項目由國內開發者（Microsoft MVP）發起，在歷史參與者中也有不少國內開發者，因此中文文檔比較完善，對其他國內應用開發者的問題解答和技術支持也比較到位。

成熟的開源組件，可以帶來巨大的開發效率提升。舉一個非常簡單的例子：使用Ant-Design-Blazor的Result組件，實現一個更優雅的404提示頁面，來替換上面展示的官方Demo里的404（NotFound）頁面。

先創建一個MyNotFound.razor文件，代碼如下：

@using AntDesign;<div style="margin:40px"><Result Status="404"Title="404"SubTitle="您要訪問的頁面不存在！"Extra="extra" /> </div>@code {RenderFragment extra =@<strong style="font-size:20px">回到 <a href="/home">首頁</a></strong>; }

然后在上文提到的Route組件里替換NotFound組件的內容即可：

<Router AppAssembly="@typeof(Program).Assembly"><Found Context="routeData"><RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /></Found><NotFound><MyNotFound /></NotFound> </Router><AntContainer />

讓我們故意訪問一個不存在的路由，看一下效果：

404提示頁面

還不錯吧？比只顯示一行文字好看多了，而且并不需要費多少心思找素材和寫代碼。

目前Ant-Design-Blazor項目正發起一個討論，歡迎開發者們分享基于Antd組件實現的產品：Who is using Ant Design Blazor in production? ? · Discussion #1693 · ant-design-blazor/ant-design-blazor。另外，開發團隊還增加了一個開箱即用的模板項目：ant-design-blazor/ant-design-pro-blazor。該項目既可以作為參考教材，又可以作為項目生成的基礎。

ant-design-pro-blazor

當然，對任何開源Blazor UI組件項目來說，項目維護活躍、較完善的（中文）文檔支持、開箱即用的模板項目，都會得到更多用戶的信任，從而吸引更多的用戶使用。例如，在我個人眼中，BootstrapBlazor和MatBlazor也是出類拔萃的競爭者。

結束語

在本系列接下來的文章里，我將圍繞一個基于內置組件和Ant-Design-Blazor組件開發的后臺Demo為例，具體介紹Blazor框架的實踐經驗。讓我們先從正常用戶訪問后臺的第一個頁面——登錄頁面開始，下一篇文章，再會！

總結

以上是生活随笔為你收集整理的使用 Blazor 开发内部后台（二）：了解 Blazor 组件的全部內容，希望文章能夠幫你解決所遇到的問題。

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