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

Question

我目前正在实现一个表单来创建一个新用户以及他们各自的用户权限。在这种形式中，我有大约 30 个不同的 IT 系统，如果用户帐户应该具有该特定 IT 系统的访问权限，我想为管理员提供一个面板，必须在其中输入有关该特定 IT 系统的一些额外信息。我想使用剃刀组件来实现这一点。到目前为止，我拥有的是“新用户表单”的核心视图以及用于特定 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;
}

演示：

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

的ModalGoodwillPKW.razor：

<div class="panel panel-default border @(Collapsed? "collapse": "" ) ">
    <div class="panel-heading alert-primary">
        <h3 class="panel-title">善意PKW/智能</h3>
    </div>

   ...


@代码{
    [范围]
    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 ? "+" : "-")
        </按钮>
    </div>
</div>
<ModalGoodwillPKW Collapsed="@Collapsed" ></ModalGoodwillPKW>

@代码 {
    private bool Collapsed = true;
}

Answer 2

我遇到了类似的问题，我有一个想要折叠的动态部分列表，并且data-toggle由于 Blazor 对 # 锚标记的错误处理，我无法使用引导方法。

我使用了组件的想法：

<div class="row">
@if (Collapsed)
{
    <span @onclick="@Toggle" class="oi oi-plus mr-1"/>
}
else
{ 
    <span @onclick="@Toggle" class="oi oi-minus mr-1"/>
}
@Title
</div>

@if(!Collapsed)
{
    @ChildContent
}

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    [Parameter]
    public bool Collapsed { get; set; }
    [Parameter]
    public string Title { get; set; }

    void Toggle()
    {
        Collapsed = !Collapsed;
    }
}

然后我可以这样使用：

            @foreach (var i in c.Request)
        {
            <Collapsable Title="@i.SectionName" Collapsed="true">
                <ChildContent>
                    @foreach (var kvp in i.Values)
                    {
                        <div class="row">
                            <div class="col-1"></div>
                            <div class="col-6 font-weight-bolder">@kvp.Key</div>
                            <div class="col-5">@kvp.Value</div>
                        </div>
                    }
                </ChildContent>
            </Collapsable>
        }

这似乎运作良好，每个部分都是独立可折叠的。不过我还没有尝试过嵌套。