Hi ruben,
In order to set active tab with content, you need to set the nav-item i.e. the LI with active class and tab-pane with active in class.
I have modified nav-tabs HTML and JavaScript code in which i removed the active class and based on the ViewBag object set the nav-item and tab-pane class.
Refer below modified code sample.
Controller
public class HomeController : Controller
{
public IActionResult Index()
{
dynamic mymodel = new ExpandoObject();
ViewBag.Tab = 0;
return View(mymodel);
}
[HttpPost]
public async Task<IActionResult> Index(int tab)
{
dynamic mymodel = new ExpandoObject();
// Set ViewBag object.
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);
}
}
View
@model dynamic
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body class="container">
<form method="post" asp-action="Index" asp-controller="Home">
<input type="text" name="tab" />
<input type="submit" value="Set" />
</form>
<hr />
<ul class="nav nav-tabs my-3" id="myTab" role="tablist">
<li class="nav-item" id="profile-tab1">
<a class="nav-link" data-toggle="tab" href="#Well" role="tab" aria-controls="profile" aria-selected="false">Well</a>
</li>
<li class="nav-item" id="profile-tab2">
<a class="nav-link" data-toggle="tab" href="#WellTest" role="tab" aria-controls="profile" aria-selected="false">Well Test</a>
</li>
<li class="nav-item" id="profile-tab3">
<a class="nav-link" data-toggle="tab" href="#WellCore" role="tab" aria-controls="profile" aria-selected="false">Well Core</a>
</li>
<li class="nav-item" id="profile-tab4">
<a class="nav-link" data-toggle="tab" href="#WellTop" role="tab" aria-controls="profile" aria-selected="false">Well Top</a>
</li>
</ul>
<div class="tab-pane fade show" 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" 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" 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" 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';
// Remove the nav-item active class.
var navLinks = document.querySelectorAll('.nav-item');
navLinks.forEach(function (link) {
link.classList.remove('active');
});
// Remove the tab-pane active in class.
var tabPane = document.querySelectorAll('.tab-pane');
tabPane.forEach(function (pane) {
pane.classList.remove('active');
pane.classList.remove('in');
});
if (tabVal !== "") {
// Set the class to activate the tab with content.
if (tabVal == 0) {
document.querySelector('#profile-tab1').classList.add('active');
document.querySelector('#Well').classList.add('active');
document.querySelector('#Well').classList.add('in');
}
if (tabVal == 1) {
document.querySelector('#profile-tab1').classList.add('active');
document.querySelector('#Well').classList.add('active');
document.querySelector('#Well').classList.add('in');
}
if (tabVal == 2) {
document.querySelector('#profile-tab2').classList.add('active');
document.querySelector('#WellTest').classList.add('active');
document.querySelector('#WellTest').classList.add('in');
}
if (tabVal == 3) {
document.querySelector('#profile-tab3').classList.add('active');
document.querySelector('#WellCore').classList.add('active');
document.querySelector('#WellCore').classList.add('in');
}
if (tabVal == 4) {
document.querySelector('#profile-tab4').classList.add('active');
document.querySelector('#WellTop').classList.add('active');
document.querySelector('#WellTop').classList.add('in');
}
}
});
</script>
</body>
</html>
Screenshot
