如何在.NET Core中显示描述性列表组？

2024-04-27 • 问答

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

我的看法应该如何？

我厌倦了遍历每个数据模型并将剃刀代码嵌入到相同的引导模板中，但是我无法获得所需功能的任何地方。

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

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

首先，您要在.tab-pane的ID后面附加“列表-”，而列表项的href没有该前缀。

第二，您可以通过JavaScript进行第一个活动选择。避免在剃刀代码中放入fade show，或将条件放入循环中，以便仅将其添加到第一个元素。

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>

如何在.NET Core中显示描述性列表组？

duoqing321 回答：如何在.NET Core中显示描述性列表组？

大家都在问