如何使用Blazor语法折叠/展开Razor组件？

在Blazor中，您始终遵循以下模式：

change data 
    --> new view rendered

每当您要从外部更改组件的UI时，都应该通过更改数据（模型/状态/参数/上下文/ ...）来完成。

对于这种情况，您可以添加一个Collapsed字段来指示面板现在是否已折叠：

<div class="panel panel-default border @Collapse">
    <div class="panel-heading alert-primary">
        <h3 class="panel-title">Goodwill PKW/smart</h3>
    </div>

    <div class="panel-body">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-2 font-weight-bold">Profile</div>

                <div class="col-sm-5">
                    <input type="checkbox" id="CB_c" />
                    <label>Salesman</label>
                </div>
                <div class="col-sm-5">
                    <input type="checkbox" id="CB_r" />
                    <label>Administrator</label>
                </div>                
            </div>
        </div>
    </div>
</div>

@code{
    [Parameter]
    public string Collapse{get;set;}="collapse"; // hide by default
}

每当您要折叠它时，只需将此参数设置为即可collapse：

<div class="row">
    <div class="col-sm-2 font-weight-bold">GOODWILL PKW/Smart</div>
    <div class="col-sm-2">
        <label>Add</label>
        <input type="checkbox" />
    </div>
    <div class="col-sm-2">
        <label>Change</label>
        <input type="checkbox" />
    </div>
    <div class="col-sm-2">
        <label>Remove</label>
        <input type="checkbox" />
    </div>
    <div class="col-sm-4">                    
        <button @onclick="e => this.Collapsed = !this.Collapsed">
            @( this.Collapsed ? "+" : "-")
        </button>
    </div>
</div>
<ModalGoodwillPKW Collapse="@( this.Collapsed ? "collapse": "")" ></ModalGoodwillPKW>

@code {
    private bool Collapsed = true;
}

演示：

[编辑]：我们甚至可以通过将字段从字符串更改为布尔值来重构上述代码以暴露较少的信息。

的ModalGoodwillPKW.razor：

<div class =“ panel panel-default border @（Collapsed？” collapse“：”“） ”> 
    <div class =“ panel-heading alert-primary”> 
        <h3 class =“ panel-title”>商誉PKW /智能</ h3> 
    </ div> 

   ... 


@code { 
    [Parameter] public bool Collapsed {get; set;} = true; //默认情况下隐藏
}
    

的UserForm.razor：

<div class =“ row”> 
    ... 
    <div class =“ col-sm-4”>                  <button @ onclick =“ e => this.Collapsed =！this.Collapsed”> 
            @（this.Collapsed？“ + “：”-“）
        </ button> 
    </ div> 
</ div> 
<ModalGoodwillPKW Collapsed =” @ Collapsed“ > </ ModalGoodwillPKW> 
@code { 
    private bool Collapsed = true; 
}