时间戳

首页 > 解决方案 > 如何禁用 Blazor 中的组件层次结构？

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

问题描述

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

我在 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>

这里的所有组件都继承自一个基组件类，其中IsEnabled属性被声明为公共属性。
每个组件应根据其IsEnabled值表现不同。

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

我更喜欢这样的解决方案，我不必在tags所有地方都抛出绑定和级联值，因此它可以“开箱即用”。
在 Blazor 架构中甚至有可能吗？

标签： c#blazor.net-5asp.net5

解决方案

您正在寻找CascadingValues 和参数：

在行动：

切换值 在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

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

推荐阅读