(11/30)大家一起学Blazor:Arbitrary属性

(11/30)大家一起学Blazor:Arbitrary属性

目前`MyButton`有3个`[Parameter]`,如果再增加的话,又要再定义新的`[Parameter]`,为了避免不断更新这个Component,我们来用Blazor提供的`@attribute`。

最后更新 2021-12-15 22: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`)。

继续阅读