Bootstrap NavTab from Database - asp.net-core

Question

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.

Answer 1

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: