Set Active Tab based on ViewBag value using jQuery in ASP.Net MVC

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>