(11/30)大家一起學Blazor:Arbitrary屬性

(11/30)大家一起學Blazor:Arbitrary屬性

目前`MyButton`有3個`[Parameter]`,如果再增加的話,又要再定義新的`[Parameter]`,為了避免不斷更新這個Component,我們來用Blazor提供的`@attribute`。

最後更新 2021/12/15 下午10:53
StrayaWorker
預計閱讀 3 分鐘
分類
Blazor
專題
一起學Blazor系列
標籤
.NET C# ASP.NET Core Blazor

目前MyButton有 3 個[Parameter],如果再增加的話,又得再定義新的[Parameter],為了避免一直更新這個 Component,我們來用 Blazor 提供的@attribute

首先把原本的<button>改為<input>,在MyButton.razor定義一個帶有[Parameter]InputAttributes,型別為Dictionary<string, object>,先設定初始值,如果外部沒有傳入這個參數的話就會使用初始值。

接著在PostBase.razor.cs也定義一個同名變數,不過裡面的valueclass有稍微改動。

最後Post.razor呼叫的MyButton只傳入InputAttributes,這樣就完成了。

不過好像哪裡怪怪的,因為只用了一個變數InputAttributes,導致原本的 Reset 按鈕跟 Submit 變得一樣了,但如果再定義一個為 Reset 產生的變數,又跟原本一樣麻煩了。

這時候就要用到[Parameter]的參數CaptureUnmatchedValues了,我們將原本的[Parameter]改成[Parameter(CaptureUnmatchedValues = true)]或是[Parameter(true)]也行,告訴 Blazor 這個變數會捕捉任何不符合InputAttributes中定義的值。

接著把PostBase.razor.cs的變數InputAttributes刪除,因為不能再這樣定義了,我們等一下來看看如果保留的話會有什麼結果。

最後PostBase.razor隨意給<MyButton>我們想要的 html 屬性,就可以看到變回 Submit 跟 Reset 按鈕了,要注意的是因為變成我們自由定義,所以沒有了強型別的約束。

這時候有人可能會發現,兩個<MyButton>有個相同 html 屬性type,既然重複,可以定義在PostBase.razor.csInputAttributes嗎?

可惜錯誤訊息告訴我們:如果用了CaptureUnmatchedValues就不能明確定義InputAttributes了,所以使用的人須特別注意這點。

還有一點是 html 屬性的讀取順序是由右到左,若有重複的 html 屬性,右邊的會覆蓋左邊的,我們在MyButton.razor@attribute右邊加上value="MyButton",打開網頁可以看到兩個按鈕都變成 Mybutton 了,所以若要給初始值的話,最好是放在@attribute左邊,以免覆蓋傳進來的值。

引用:

  1. Blazor Attribute Splatting
  2. Ref: Arbitrary attributes and parameters in Blazor

注:本文程式碼透過 .NET 6 + Visual Studio 2022 重構,可點擊原文連結與重構後程式碼比較學習,謝謝閱讀,支持原作者

繼續探索

延伸閱讀

更多文章
同分類 / 同標籤 2021/12/25

(29/30)大家一起學Blazor:Blazor單元測試

開發一個系統最無聊的過程大概就是解決 Bug 了,尤其是那種嘗試對 null 物件取值的錯誤(`Object reference not set to an instance of an object.`),這應該是大部分人剛踏入程式設計領域最常碰到的問題,為了從枯燥的解決 Bug 過程解脫,這篇就來介紹`單元測試`。

繼續閱讀
同分類 / 同標籤 2021/12/25

(28/30)大家一起學Blazor:Policy-based authorization

之前有說到`ASP.NET Core Identity` 使用的是基於`Claim` 的驗證,其實`ASP.NET Core Identity` 有不同類型的授權方式,最簡單的`登入授權`、`角色授權`、`Claim 授權`,但上述幾種都是以一種方式實現:原則授權(`Policy-based authorization`)。

繼續閱讀