今天是鐵人賽最後一天了,想分享的主題也差不多了,就來個總集篇做個收場吧!


從最基本的

認識 Blazor WebAssembly

認識 Blazor WebAssembly 是什麼,並建立範本專案。

開幕
舞台建造與介紹

認識 Razor 語法

Blazor 元件的本體 Razor,如果不會也就不用往下閱讀了。

魔術道具 - Razor 介紹
魔術道具 - Razor 指示詞
魔術道具 - Razor 指示詞屬性

元件的基本知識

生命週期

認識生命週期,在元件的各種狀態後做些額外的事情。

魔術技巧 - 掌握元件生命週期

路由相關

SPA 最基本的需求,路由。

路由魔術
導覽列魔術

表單相關

網頁最基本的需求,表單。

表單魔術
表單魔術 - 驗證技巧
表單魔術 - 內建元件道具
表單魔術 - 資料繫結與事件處理技巧

傳值三兄弟

目前 blazor 的傳值方式只有下面三種,了解以應付各種狀況。

魔術技巧 - 父子溝通問題
魔術技巧 - 傳值技巧
狀態管理魔術

自訂元件須知

了解如何自訂元件,自訂完元件後如何提供給別人使用。

魔術技巧 - 客製化輸入元件
魔術技巧 - 樣板化元件
魔術技巧 - 取得元件參考
魔術技巧 - 版型配置
元件類別庫魔術

服務的基本知識

認識框架提供的預測服務,以及使用方式。

相依性注入魔術
魔術技巧 - HTTP 要求與回應
魔術技巧 - 與 JavaScript 共舞
組態魔術
環境魔術

進階技巧

了解如何透過自訂服務來達成目的。

JWT 驗證魔術
多國語系魔術

其他

紀錄魔術
測試魔術


以上就是這次鐵人賽,我想跟大家分享的 Blazor WebAssembly 的內容了,希望可以幫助到想了解 Blazor WebAssembly 的人,有個基本的認識。當然更希望可以幫助到閱讀者能夠快速上手,畢竟這框架目前的討論還很少,但我相信他有一天可以成為主流的框架之一。

感謝大家的閱讀,我們有緣再見。

參考資料
大內魔術 Blazor - 誰說前端一定要寫JS 系列


安可

表演哪有不安可的,最後我想把一些小東西講完,但這就不是這系列文 Blazor WebAssembly 版本的範疇了,比較屬於未來視,但是是比較近的未來,可能會隨著 .NET 5 一起發行,讓我們一起來看看 .NET 5 的 Blazor WebAssembly 可能會多了哪些新東西吧!

  • CSS isolation for Blazor components

在介紹魔術技巧 - 版型配置時有提到,未來可以有 xxx.razor.css,這件事情將會實現,到時就可以抽離 css 區塊,讓每一個檔案更乾淨的負責一件事情。

  • Lazy loading in Blazor WebAssembly

延遲載入也可以實現了,延遲載入對大型專案來說,是關係到框架選擇的生死啊,如果沒有延遲載入,那 Blazor 在框架競爭中就很容易被淘汰,但不用再擔心了。

  • New InputRadio Blazor component

表單魔術 - 內建元件道具提到目前還未上線的 InputRadioInputRadioGroup 也要正式支援了。

  • Set UI focus in Blazor apps

魔術技巧 - 取得元件參考提到,如果想要 focus 到 html 元素上時,需要自行透過 JSRuntime 協助,但現在 @ref 取得的元素(ElementReference)就能使用 FocusAsync 來 focus 目標了。

  • Influencing the HTML head in Blazor apps

提供 TitleLinkMeta 元件來設定 Html 的 Head,使 Head 的內容可以依照當前元件決定。

這本來 Docs 就有提及,我也打算含在前面的內容說明,但官方突然將這部分的內容移除了,所以就在這邊簡單帶過吧。

  • Protected browser storage

提供了 ProtectedLocalStorageProtectedSessionStorage 服務,只需要安裝 Microsoft.AspNetCore.Components.Web.Extensions 套件並 AddProtectedBrowserStorage() 來註冊,我們就不需要在自行建立服務來處理這檔事了,真是可喜可賀啊!


以上就是參考資料有關 Blazor 的部分,相信現在做的東西,未來就會慢慢的化成經驗,官方會提供更方便的方法來讓後人更好上手!

再次感謝大家的閱讀,我們有緣再見,下台一鞠躬!

參考資料
ASP.NET Core updates in .NET 5 Preview 8