asp.net-core - 如何使用 Blazor 语法折叠/展开 Razor 组件？

Question

我目前正在实现一个表单来创建一个新用户以及他们各自的用户权限。在这个表格中，我有大约 30 个不同的 IT 系统，如果用户帐户应该具有该特定 IT 系统的访问权限，我想向管理员提供一个面板，其中必须输入有关该特定 IT 系统的一些额外信息。我想使用 Razor 组件来实现这一点。到目前为止，我所拥有的是“新用户表单”的核心 View 以及特定 IT 系统附加信息的 Razor 组件。通过单击 + 按钮，我希望组件在 IT 系统正下方可见/展开。这就是它到目前为止的样子:



新用户表单:

 <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="@collapseGoodwill">+</button>
                </div>

            </div>
            <ModalGoodwillPKW ></ModalGoodwillPKW>

@code {

public void collapseGoodwill() {     


        }

}

组件 :

<div class="panel panel-default border">
    <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>

通常，我会在“collapseGoodwill”方法中使用 JQuery 来为这个元素添加一个 .collapse 类。但由于我正在尝试使用 Blazor，我想知道是否有 100% Javascript/JQuery 免费的方式来执行此操作。

谢谢!

Answer 1

在 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;
}

演示:



[编辑] :我们甚至可以通过将字段从字符串更改为 bool 值来重构上面的代码以暴露更少的信息。
ModalGoodwillPKW.razor :

商誉PKW/smart

...

@代码{
[范围]
public bool Collapsed{get;set;}= true;//默认隐藏
}
UserForm.razor :

...

@( this.Collapsed ? "+": "-")

@代码 {
私有(private) bool 折叠=真；
}

关于asp.net-core - 如何使用 Blazor 语法折叠/展开 Razor 组件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58538154/