How to keep selected tab as active after button click - asp.net-mvc

Question

Below is my code
In Update Tab when I select an email id - after return view it set again add tab as active (coz it was set as active by default).
How to set the update tab as active after selecting email id - any idea .
<ul class="nav nav-tabs">
<li role ='presentation' class="active">Add</li>
<li role ='presentation'>Update</li>
<li role ='presentation'>Delete</li>
<li role ='presentation'>Menu 3</li>
</ul>
<div class="tab-content">
<div id="Add" class="tab-pane active">
#using (Html.BeginForm("Add", "Admin"))
{
<div class="container container-fluid">
<br />
<div class="row">
<div class="col-lg-offset-1 col-lg-5">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-user-o" aria-hidden="true"></i>
</div>
#Html.TextBoxFor(m => m.user_name, new { #class = "form-control", #placeholder = "User Name", #required = "true" })
</div>
</div>
</div>
<div class="row">
<div class="col-lg-offset-1 col-lg-5">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-address-card-o" aria-hidden="true"></i>
</div>
#Html.TextBoxFor(m => m.full_name, new { #class = "form-control", #placeholder = "Full Name", #required = "true" })
</div>
</div>
</div>
<div class="row">
<div class="col-lg-offset-1 col-lg-5">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-inbox" aria-hidden="true"></i>
</div>
#Html.TextBoxFor(m => m.user_email, new { #class = "form-control", #placeholder = "Email id", #required = "true" })
</div>
</div>
</div>
<div class="row">
<div class="col-lg-offset-1 col-lg-5">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock" aria-hidden="true"></i>
</div>
#Html.TextBoxFor(m => m.password, new { #class = "form-control", #placeholder = "Password", #required = "true" })
</div>
</div>
</div>
<div class="row">
<div class="col-lg-offset-1 col-lg-5">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-universal-access fa-spin" aria-hidden="true"></i>
</div>
#Html.DropDownListFor(m => m.role, ViewBag.role as IEnumerable<SelectListItem>, new { #class = "form-control" })
</div>
</div>
</div>
<div class="row">
<div class="col-lg-offset-1 col-lg-5">
<button type="submit" class="btn btn-success btn-sm">
<i class="fa fa-check-square-o" aria-hidden="true"></i>
Add
</button>
</div>
</div>
</div>
}
</div>
<div id="Update" class="tab-pane">
#using (Html.BeginForm("Load_data", "Admin")) {
<div class="container container-fluid">
<br />
<div class="row">
<div class="col-lg-offset-1 col-lg-5">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-users" aria-hidden="true"></i>
</div>
#Html.DropDownListFor(m => m.user_email, ViewBag.user_email as IEnumerable<SelectListItem>, new { #class = "form-control",#onchange= "this.form.submit();" })
</div>
</div>
</div>
</div>
}
<div id="Details">
//Details of selected email id will be shown here
</div>
</div>
<div id="Delete" class="tab-pane">
</div>
<div id="menu3" class="tab-pane">
</div>
</div>

Answer 1

Basically you can't do that, because your page is refreshing. If you want that then you need to do it asynchronously. I mean you need to use #Ajax.BeginForm or jquery/ajax.
If you don't want to do it asynchronously, then there is a work around way.
So while calling to your action method after selecting an email from your Update tab, assign a value in a ViewBag.
For example, in your action method,
{
//Rest code
ViewBag.TabValue = "Update";
//Rest code
}
Now you can keep this value in a hidden field. For example, in your view,
<input type="hidden" value="#ViewBag.TabValue" id="myTab"/>
So now, in your script, you can check this value and set your tab, like,
<script>
if($('#myTab').val() == "Update")
{
$("#Update").focus(); //You can add a class as active so on...
}
</script>
Hope it helps :)