C# 如何在.NET core中显示描述性列表组？_C#_.net_Asp.net Mvc_Razor_Bootstrap 4

C# 如何在.NET core中显示描述性列表组？

c# .net asp.net-mvc razor bootstrap-4

C# 如何在.NET core中显示描述性列表组？,c#,.net,asp.net-mvc,razor,bootstrap-4,C#,.net,Asp.net Mvc,Razor,Bootstrap 4,我希望创建一个类似于使用.NET核心MVC框架的UI <div class="col-3"> <div class="list-group" id="list-tab" role="tablist"> @foreach (var user in Model) { <a class="

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

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

我的观点应该是什么样的

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

我厌倦了遍历每个数据模型，并将razor代码嵌入到同一个引导tempate中，但我并没有达到预期的功能

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

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


@{
foreach（模型中的var用户）
{
}
}
@{
foreach（模型中的var用户）
{
@DisplayFor（modelItem=>user.FirstName）
            <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>

}
}

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

选项卡窗格的id中添加了“list-”，而列表项的href没有该前缀
            <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>

其次，您可以通过JavaScript进行第一次活动选择。避免在razor代码中放入淡入淡出显示
，或将条件放入循环中，以便只将其添加到第一个元素中
            <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>

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>


@foreach（模型中的var用户）
{
}
@foreach（模型中的var用户）
{
@DisplayFor（modelItem=>user.FirstName）
            <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:
            <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>


$（“.tab窗格”）.first（）.addClass（“淡入显示活动”）；
$（“.list组项”）.first（）.addClass（“活动”）；
首先，您将在.tab窗格的id中添加“list-”，而href for list项没有该前缀
            <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>

其次，您可以通过JavaScript进行第一次活动选择。避免在razor代码中放入淡入淡出显示
，或将条件放入循环中，以便只将其添加到第一个元素中
            <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>

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>


@foreach（模型中的var用户）
{
}
@foreach（模型中的var用户）
{
@DisplayFor（modelItem=>user.FirstName）
            <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:
            <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>


$（“.tab窗格”）.first（）.addClass（“淡入显示活动”）；
$（“.list组项”）.first（）.addClass（“活动”）；
您可以发布生成的HTML吗？这是生成的HTML@NCan您可以发布生成的HTML吗？这是生成的HTML@N