(12 Blazor:Cascading values and parametersについて

(12 Blazor:Cascading values and parametersについて

昨日はリセットボタンのタイプをボタンに変更し、今日はリセットに戻しました。

最后更新 2021/12/15 23:38
StrayaWorker
预计阅读 3 分钟
分类
Blazor
专题
ブレザーシリーズを学ぶ
标签
.NET C# ASP.NET Core Blazor

** 注:昨日は誤ってリセットボタンのtypeをbuttonに変更し、今日はresetに戻しました。**

我们目前建立了 3 个组件,BlogPostMyButton,如果想让 3 个组件的字体颜色或是尺寸都一样,似乎得先在MyButton定义一个带有[Parameter] attribute 的变量,Post调用时再填入值,Post同样定义变量,Blog调用时再填入,每个环节都要这样做。

前面讲过父组件想将数据传递到子组件内的就是靠Parameter,有没有类似Parameter不过可以一次传递到底下所有组件的方法呢?

这时候就要用到CascadingValue这个组件了,cascading的意思是级联、喷泻,可以将其理解为由上而下注入,前端用的 CSS 全名就是Cascading Style Sheet(层级式样式表)。

我们先在BlogBase.razor.cs加入一个 Property ColorStyle(注:笔者之前文件取名有误,这篇改为 BlogBase.razor.cs),其值为"color: goldenrod"

接着在Blog.razor<CascadingValue Value="ColorStyle"><Post>包住。

再于 PostBase.razor.cs 定义同名变量,不过多了[CascadingParameter]attribute。

次に、適用したい場所に変数を入力するだけです。

MyButton也是一样的用法。

虽然每个组件都还是要定义一个变量去承接最上层来的变量,不过可以看到[CascadingParameter]省去了在PostBase.razor调用<MyButton>必须填值的步骤。

那如果有两个值要这样层层传递呢?没错,就是包两层<CascadingValue>即可,但真的写了会发现,怎么会套用两个color style呢?

[駅長注:上下有差,上是駅長デバッグ結果,下是原文スクリーンショット]

因为<CascadingValue>认识的是变量类型,如果类型不同可以方便套用,但如果有两个string,则子元素只会套用最靠近的<CascadingValue>,以图片为例就是ColorStyle

为了解决这问题,可以使用里面的Name变量,如此一来组件之间就会认识这个<CascadingValue>的名字,如果子组件找不到该Name就会回传空白。

从上面的范例可以知道每次<CascadingValue>Blazor 都会层层通知下层组件,但如果不希望每次都通知占用资源呢?可以用IsFixed,将其设为 true,Blazor 就不会去通知子组件了。

引用:*

  1. Blazor cascading values and parameters
  2. Blazor multiple cascading parameters
  3. Blazor cascading values performance

**注:このコードは. NET 6 + Visual Studio 2022リファクタリングを通じて、元のリンクとリファクタリング後のコードを比較することができます。読んでいただきありがとうございます。

Keep Exploring

延伸阅读

更多文章
同分类 / 同标签 2021/12/25

(29/30みんなで学ぶBlazor:Blazorユニットテスト

システムを開発する最も退屈なプロセスは、バグを解決することです。特に、nullオブジェクトに値を取ろうとするエラーです`Object reference not set to an instance of an object.`,これは、ほとんどの人がプログラミングの分野に足を踏み入れたばかりの最も一般的な問題である必要があります。退屈なバグ解決プロセスから解放するために、この記事では、単体テストを紹介します。

继续阅读
同分类 / 同标签 2021/12/25

(28 Blazor:Policy Based Authorizationの略。

前に`ASP.NET Core Identity`は`Claim`に基づいた検証を使用していると述べたが、実は`ASP.NET Core Identity`には異なる種類の認可方式があり、最も簡単な`ログイン認可`、`ロール認可`、`Claim認可`があるが、上記のいくつかの種類はすべて一つの方式で実現されている:原則認可`Policy-based authorization`。

继续阅读