(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 重構,可點擊原文連結與重構後代碼比較學習,謝謝閱讀,支持原作者

Keep Exploring

延伸阅读

更多文章
同分类 / 同标签 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`)。

继续阅读