Hi.
I have a simple tab on my cshtml that show conditionaly based on viewbag result, so i need some like trigger active tab along with contain
public async Task<IActionResult> Tab()
{
dynamic mymodel = new ExpandoObject();
ViewBag.Tab = 0;
return View(mymodel);
}
[HttpPost]
public async Task<IActionResult> Tab(int tab)
{
dynamic mymodel = new ExpandoObject();
switch (tab)
{
case 1:
ViewBag.Tab = 1;
break;
case 2:
ViewBag.Tab = 2;
break;
case 3:
ViewBag.Tab = 3;
break;
case 4:
ViewBag.Tab = 4;
break;
default:
ViewBag.Tab = 0;
break;
}
return View(mymodel);
}
<ul class="nav nav-tabs my-3" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="profile-tab1" data-toggle="tab" href="#Well" role="tab" aria-controls="profile" aria-selected="true">Well</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab2" data-toggle="tab" href="#WellTest" role="tab" aria-controls="profile" aria-selected="false">Well Test</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab3" data-toggle="tab" href="#WellCore" role="tab" aria-controls="profile" aria-selected="false">Well Core</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab4" data-toggle="tab" href="#WellTop" role="tab" aria-controls="profile" aria-selected="false">Well Top</a>
</li>
</ul>
<div class="tab-pane fade show active" id="Well" role="tabpanel" aria-labelledby="General-tab">
<div class="card-body">
<div class="row">
<div class="col">
<span>
This isi Tab 1
</span>
</div>
</div>
</div>
</div>
<div class="tab-pane fade show active" id="WellTest" role="tabpanel" aria-labelledby="General-tab">
<div class="card-body">
<div class="row">
<div class="col">
<span>
This isi Tab 2
</span>
</div>
</div>
</div>
</div>
<div class="tab-pane fade show active" id="WellCore" role="tabpanel" aria-labelledby="General-tab">
<div class="card-body">
<div class="row">
<div class="col">
<span>
This isi Tab 3
</span>
</div>
</div>
</div>
</div>
<div class="tab-pane fade show active" id="WellTop" role="tabpanel" aria-labelledby="General-tab">
<div class="card-body">
<div class="row">
<div class="col">
<span>
This isi Tab 4
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
window.addEventListener('load', function () {
var tabVal = '@ViewBag.Tab';
if (tabVal !== "") {
alert(tabVal);
if (tabVal == 0) {
var navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(function (link) {
link.classList.remove('active');
});
document.querySelector('#profile-tab1').classList.add('active');
}
if (tabVal == 1) {
var navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(function (link) {
link.classList.remove('active');
});
document.querySelector('#profile-tab1').classList.add('active');
}
if (tabVal == 2) {
var navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(function (link) {
link.classList.remove('active');
});
document.querySelector('#profile-tab2').classList.add('active');
}
if (tabVal == 3) {
var navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(function (link) {
link.classList.remove('active');
});
document.querySelector('#profile-tab3').classList.add('active');
}
if (tabVal == 4) {
var navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(function (link) {
link.classList.remove('active');
});
document.querySelector('#profile-tab4').classList.add('active');
}
}
});
</script>