Blazor/Blazorise.Bootstrap html 元素在使用组件的多个实例时正在交互

Question

在我的 blazor 应用程序中，我有一个组件，它有一个按钮和一个由按钮控制的 bootstrap 折叠。当我只在一个页面上使用该组件一次时，一切正常，但如果我在一个页面上多次使用它，那么一个按钮也会触发另一个的折叠元素，因为它们的 ID 似乎是静态的。有解决办法吗？

这是组件的代码

<button class="btn btn-primary form-control" type="button" data-toggle="collapse" data-target="#divCollapse" aria-expanded="false" aria-controls="divCollapse">
    @Technician.Name
</button>
<div class="collapse" id="divCollapse">
    <div class="card card-body">
        <table class="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Assigned To</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var task in _repo.GetTasksByTechnician(Technician).ToList())
                {
                    <tr>
                        <td>@task.Id</td>
                        <td>@task.AssignedTo</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

@code {
    [Parameter]
    public Technician Technician { get; set; }

}

这是我用来创建组件的页面中的代码：

@foreach (var tech in _technicians)
{
    <PersonComponent Technician="@tech"></PersonComponent>   
}

Answer 1

您必须为您的组件可折叠部分分配一个唯一 ID。现在你在页面上以许多具有相同 id 的 html 元素结束，这在语法上是不正确的，这就是为什么 Bootstrap 无法完成它的工作。

所以你可以尝试这样做：

<button class="btn btn-primary form-control" type="button" data-toggle="collapse"
        data-target="#divCollapse@(Technician.Id)" aria-expanded="false" aria-controls="#divCollapse@(Technician.Id)">
      @Technician.Name
</button>
<div class="collapse" id="divCollapse@(Technician.Id)">

etc...

如果每个技术人员都应该有一个 Id，或者只是放置任何属性来唯一标识他们中的每个人，并且可以附加到“#divCollapse”字符串以创建一个结构良好的字符串，那么这将起作用id（除下划线或连字符外没有空格或标点符号）。

如果技术人员实体没有合适的属性，只需在组件中定义另一个参数并从外部注入：

@for (int idx = 0; idx < _technicians.Length; idx++)
{
    int capturedIdx = idx; // <- Necessary to get the loop variable to the context
    <PersonComponent Technician="@tech" Identifier="@capturedIdx"></PersonComponent>   
}

当然在你的组件中：

[Parameter]
public int Identifier { get; set; }

然后您可以使用它附加到“divCollapse”id。

希望对您有所帮助！

Blazor/Blazorise.Bootstrap html 元素在使用组件的多个实例时正在交互

Blazor/Blazorise.Bootstrap html elements are interacting when using multiple instances of a component

html

c#

bootstrap-4

blazor-server-side

blazorise