Bootstrap 来自数据库的 NavTab

Question

我有以下 table:

---------------------------
oName          Dept
---------------------------
Roo           IT
Max           MKT
Tom           MKT

然后我的控制器上有以下脚本：

ViewBag.GetoName = (from a in _db.TbEmp
     where a.Dept == "MKT"
     select new {
          a.oName
     }
).ToList();

我想将上面的列表加载到我视图的导航选项卡中。我怎样才能做到这一点？所以 navTab bootstrap 将是：

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#max">Max</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tom">Tom</a>
  </li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade show active" id="max">
    <p>Content1</p>
  </div>
  <div class="tab-pane fade" id="tom">
    <p>Content2</p>
  </div>
</div>

请指教
谢谢。

Answer 1

如果你想让oName成为nav_link名字，Dept成为Content.Here是一个演示：

    <ul class="nav nav-tabs">
    @{ var count = 0;}
    @foreach (var sample in ViewBag.GetoName)
    {
        if (count == 0)
        {
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#@sample.oName">@sample.oName</a>
            </li>
        }
        else { 
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#@sample.oName">@sample.oName</a>
            </li>
        }
        count++;
    }
</ul>
<div id="myTabContent" class="tab-content">
    @{ var count1 = 0;}
    @foreach (var sample in ViewBag.GetoName)
    {

        if (count1 == 0)
        {
            <div class="tab-pane fade show active" id="@sample.oName">
                <p>@sample.Dept</p>
            </div>
        }
        else
        {
            <div class="tab-pane fade" id="@sample.oName">
                <p>@sample.Dept</p>
            </div>
        }
        count1++;
    }
</div>

结果：

Bootstrap 来自数据库的 NavTab

Bootstrap NavTab from Database

razor

asp.net-core

bootstrap-4