Bootstrap NavTab from Database-CodePudding

I have the following table:

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

Then I have the following script on my controller:

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

I want to load the list above into a navTab on my View. How can I do that? So the navTab bootstrap would be:

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

Please advice.
Thank you.

CodePudding user response：

If you want oName to be nav_link name,and Dept to be Content.Here is a demo:

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

result: