如何禁用 Blazor 中的组件层次结构？

Question

我想实现与 WPF 应用程序类似的效果，在 WPF 应用程序中，您有一个 XAML 层次结构，禁用其中一个祖先会使它的所有 children 也被禁用。

我在 Blazor 组件中找不到任何类似的方法。
我尝试查看级联参数和值，但不确定我是否在正确的轨道上。

假设我有一个如下所示的组件层次结构：

<PanelContainer Title="Upload log file">
   <ParagraphRow ParagraphType="ParagraphType.Paragraph1" Label="Some test row">
      <EditBox Text="Some test text" />
   </ParagraphRow>
   <ParagraphRow ParagraphType="ParagraphType.Paragraph2" Label="Some fancy test row disabled" IsEnabled="false">
      <EditBox Text="Some fancy test text" />
   </ParagraphRow>
   <ParagraphRow ParagraphType="ParagraphType.Paragraph3" Label="Some other test row">
      <EditBox Text="Some disabled test text" IsEnabled="false" />
   </ParagraphRow>
</PanelContainer>

这里的所有组件都是从基础组件 class 继承的，其中 IsEnabled 属性被声明为 public 属性.
每个组件的行为应根据其 IsEnabled 值而有所不同。

例如：
EditBox 应该禁用内部输入 HTML 标签，将 CSS class 附加到包装标签等。如果我只是禁用 EditBox 本身，它就像一个魅力，没什么特别的（第三个 ParagraphRow）。
我想得到与第二个 ParagraphRow 相同的结果，其中行本身已被禁用。在这里我想对 row 组件做一些禁用逻辑（CSS class 用于标签，验证逻辑更改等等 ），但我也希望它的children（在这种情况下是EditBox）也能以某种方式“通知”它被禁用，这样它就可以自行更新到禁用状态。

我更喜欢这样一种解决方案，我不必在所有地方抛出绑定和级联值 tags，这样它就可以 “正常工作”的盒子。
在 Blazor 架构中甚至可能吗？

Answer 1

您正在寻找CascadingValues and Parameters：

正在行动：

在 Blazor REPL 查看。

简化：

基础组件：

@code{
    [CascadingParameter]
    public bool IsEnabled { get; set; } = true;
    public string ImEnabled => IsEnabled?"Enabled":"Disabled";
}

使用组件：

<PanelContainer IsEnabled="isEnabled">
  <ParagraphRow >
    <EditBox />
  </ParagraphRow>
</PanelContainer>
<button @onclick="()=>{isEnabled = !isEnabled;}" >Toggle</button>
@code {
    protected bool isEnabled = true;
}

面板容器

<h1>PanelContainer</h1>
<div style="padding-left:10px;">
    <CascadingValue Value="IsEnabled">
    @ChildContent
    </CascadingValue>
</div>
@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    [Parameter]
    public bool IsEnabled {get; set; }
}

段落行

@inherits IsEnabledComp

Rapragraph: @ImEnabled
<div style="padding-left:10px;">
    <CascadingValue Value="IsEnabled">
    @ChildContent
    </CascadingValue>
</div>
@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

编辑框

@inherits IsEnabledComp
EditBox: @ImEnabled

可以根据自己的要求自由更改需要的内容。

如何禁用 Blazor 中的组件层次结构？

How to disable the component hierarchy in Blazor?

c#

asp.net5

blazor

.net-5