如何在 .NET 核心中显示描述性列表组？答案

【问题标题】：How to Display Descriptive List Group in .NET core?如何在 .NET 核心中显示描述性列表组？
【发布时间】：2020-03-07 06:34:15
【问题描述】：

我希望使用 .NET 核心 MVC 框架创建一个类似 this 的 UI。

我的观点应该是怎样的？

我厌倦了循环遍历每个数据模型并将 razor 代码嵌入到同一个引导程序模板中，但我没有得到任何接近所需功能的地方。

<div class="container h-100 w-100">
  <div class="row w-100 ml-0 mr-0 mt-0 mb-0">


    <div class="col-3">
         <div class="list-group" id="list-tab" role="tablist">
            @{
                foreach(var user in Model)
                {
                    <a class="list-group-item list-group-item-action" id="list-@user.FirstName-list" data-toggle="list" href="#@user.FirstName" aria-controls="@user.FirstName" role="tab">
                             @Html.DisplayFor(modelItem => user.FirstName)
                    </a>
                }
            }
        </div>
    </div>


    <div class="col-9">
         <div class="tab-content" id="nav-tabContent">
            @{
                foreach(var user in Model)
                {

                   <div class="tab-pane fade show " id="list-@user.FirstName" role="tabpanel" aria-labelledby="list-@user.FirstName-list">
                      <p>@Html.DisplayFor(modelItem => user.FirstName)</p>
                   </div>

                }
            }
        </div>
    </div>  
  </div> 
 </div>

列表组的第一部分正在显示，但是当我尝试单击它时，我看不到描述

【问题讨论】：

你能发布你生成的 HTML 吗？
这里是生成的 HTML @N

标签： c# .net asp.net-mvc razor bootstrap-4

【解决方案1】：

首先，您将“list-”附加到 .tab-pane 的 id 中，而列表项的 href 没有该前缀。

其次，您可以通过 JavaScript 进行第一个活动选择。避免将fade show 放在你的razor 代码中，或者将条件放在循环中以便它应该只将它添加到第一个元素。

HTML：

            <div class="col-3">
                <div class="list-group" id="list-tab" role="tablist">

                    @foreach (var user in Model)
                    {
                        <a class="list-group-item list-group-item-action" id="list-@user.FirstName-list" data-toggle="list" href="#@user.FirstName" aria-controls="@user.FirstName" role="tab">
                            @Html.DisplayFor(modelItem => user.FirstName)
                        </a>
                    }
                </div>
            </div>

            <div class="col-9">
                <div class="tab-content" id="nav-tabContent">

                    @foreach (var user in Model)
                    {
                        <div class="tab-pane" id="@user.FirstName" role="tabpanel" aria-labelledby="list-@user.FirstName-list">
                            <p>@Html.DisplayFor(modelItem => user.FirstName)</p>
                        </div>

                    }

                </div>
            </div>
        </div>
    </div>

JS：

<script>
    $(".tab-pane").first().addClass("fade show active");
    $(".list-group-item").first().addClass("active");
</script>

【讨论】：