Question

使用foreach循环显示所有用户记录

查看

<div class="row tab-content" id="pills-tabContent">
    <div class="col-md-12 tab-pane fade show active" id="pills-donner" role="tabpanel" aria-labelledby="pills-donner-tab">
        @foreach (var item in Model)
        {
                <div class="media pb-3">
                    <img class="mr-3 border rounded-circle" src="data:image/jpeg;base64,@Convert.ToBase64String(item.DP)" width="100" height="100">
                    <div class="media-body">
                        <div class="row member">
                            <div class="col-6">
                                <h3>
                                    <a asp-action="Profile" asp-controller="Accounts" asp-route-id="@item.Id">@item.userName</a>

                                    <small>
                                        @if (item.crId == 1)
                                        {
                                            <span>Donner</span>
                                        }
                                    </small>
                                </h3>
                                <span>
                                    <i class="fal fa-clock"></i> @item.Created.ToString("yyyy")
                                </span>
                            </div>

                            <div class="col-6 pl-5 pt-3">
                                <a class="float-right" data-toggle="collapse"  href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                                    <i class="fas fa-angle-double-down"></i>
                                </a>
                            </div>
                            <div class="col-12">
                                <div class="collapse" id="collapseExample">
                                    <div class="card card-body">
                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                                    </div>
                                </div>
                            </div>
                        </div>                           
                    </div>
                </div>
           }
    </div>

结果

单击图像上方的向下箭头图标链接时，所有用户详细信息都处于打开状态，但我只想显示特定的用户详细信息折叠该如何执行？并且我还尝试将该用户@ item.Id转换为折叠链接和div，但无法正常工作。

Answer 1

您可以使用@item.Id为循环代码中的每个折叠块指定一个唯一的ID。

@{ 
   var UnqiueId = "collapseExample" + item.Id;
}

<div class="col-6 pl-5 pt-3">
<a class="float-right" data-toggle="collapse" href="#@UnqiueId" role="button" aria-expanded="false" aria-controls="@UnqiueId">
    <i class="fas fa-angle-double-down"></i>
</a>
</div>
<div class="col-12">
<div class="collapse" id="@UnqiueId">
    <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    </div>
</div>
</div>

我正在尝试通过bs4折叠显示特定的用户详细信息

1 个答案: