如何将数据库查询的员工列表动态加载到Bootstrap NavTab组件中

前提确认 #

首先确保你的视图已正确引入Bootstrap的CSS和JS依赖，如果你使用的是Bootstrap 5，需要调整属性命名规则，后续代码会标注差异。

视图核心实现代码 #

直接在需要渲染导航标签的视图位置添加以下Razor代码即可：

@{
    // 读取ViewBag中存储的员工列表，转为动态类型集合适配匿名类型
    var empList = ViewBag.GetoName as IEnumerable<dynamic>;
    // 标记是否为第一个元素，用于添加active状态
    bool isFirstActive = true;
}

@if (empList != null && empList.Any())
{
    <!-- 导航标签栏 -->
    <ul class="nav nav-tabs">
        @foreach (var emp in empList)
        {
            <li class="nav-item">
                <!-- Bootstrap 4用data-toggle，Bootstrap 5替换为data-bs-toggle -->
                <a class="nav-link @(isFirstActive ? "active" : string.Empty)" 
                   data-toggle="tab" 
                   href="#@(emp.oName.ToLower())">
                    @emp.oName
                </a>
            </li>
            isFirstActive = false;
        }
    </ul>

    <!-- 标签内容区 -->
    <div id="myTabContent" class="tab-content">
        @{
            // 重置标记，处理内容区的第一个激活状态
            isFirstActive = true;
            // 内容序号，对应你示例的Content1、Content2，可根据实际业务替换
            int contentIndex = 1;
        }
        @foreach (var emp in empList)
        {
            <div class="tab-pane fade @(isFirstActive ? "show active" : string.Empty)" 
                 id="@(emp.oName.ToLower())">
                <p>Content@contentIndex</p>
            </div>
            isFirstActive = false;
            contentIndex++;
        }
    </div>
}

可选优化建议 #

• 如果你需要每个标签展示对应员工的个性化内容，建议控制器查询时把需要展示的字段一并查询返回，避免视图硬编码内容。
• 如果你不想两次循环遍历员工列表，可以先将empList转为List<dynamic>，用索引判断第一个元素，减少遍历次数。

内容的提问来源于stack exchange，提问作者Haminteu