如何使用Blazor语法折叠/展开Razor组件？ [英] How to collapse/expand Razor components using Blazor syntax?

问题描述

我当前正在实现一个表单，以创建一个新用户及其各自的用户权限。在此表单中，我有大约30个不同的IT系统，如果用户帐户应该具有该特定IT系统的访问权限，我希望向管理员提供一个面板，在该面板中必须输入有关该特定IT系统的一些额外信息。我想使用剃须刀组件来实现这一点。到目前为止，我所拥有的是"新用户表单"的核心视图，以及特定IT系统的附加信息的剃须刀组件。通过单击+按钮，我希望该组件在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>

通常情况下，我会在"cliumseGoodwill"方法中使用JQuery向该元素添加一个.clapse类。但由于我正在试验Blazor，我想知道是否有100%的Javascript/JQuery免费的方式来做到这一点。

谢谢！

推荐答案

在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">Goodwill PKW/smart</h3>
    </div>

   ...


@code{
    [Parameter]
    public bool Collapsed{get;set;}= true; // hide by default
}

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

这篇关于如何使用Blazor语法折叠/展开Razor组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！