Make Bootstrap tabs active on MVC action - html

Question

I want the tab to be set to active once I click on that tab (action). However, the issue I am experiencing is that the "Dashboard" tab is always set to active
<div class="row top-buffer">
<ul class="nav nav-tabs">
<li class="active">#Html.ActionLink("Dashboard", "Index")</li>
<li>#Html.ActionLink("Users", "Users")</li>
<li>#Html.ActionLink("Investigator Groups", "Groups")</li>
<li>#Html.ActionLink("Assign Games", "AssignGames")</li>
<li>#Html.ActionLink("Reports", "Reports")</li>
</ul>
</div>
Edit:
I tried doing the following, which now allows the tabs to be set to active, but no longer redirects to the action.
<li class="active" data-toggle="tab">#Html.ActionLink("Dashboard", "Index")</li>
<li data-toggle="tab">#Html.ActionLink("Users", "Users")</li>

Answer 1

follow this tutorial Setting the active menu item in a MVC C# Bootstrap application
by adding an extension method
public static class HtmlHelpers
{
public static string IsActive(this HtmlHelper htmlHelper, string action, string controller)
{
var routeData = htmlHelper.ViewContext.RouteData;
var routeAction = routeData.Values["action"].ToString();
var routeController = routeData.Values["controller"].ToString();
var returnActive = (controller == routeController && action == routeAction);
return returnActive ? "active" : "";
}
}
and then use it
<li class="#Html.IsActive("Index", "Dashboard")">#Html.ActionLink("Dashboard", "Index")</li>
<li class="#Html.IsActive("Users", "Users")">#Html.ActionLink("Users", "Users")</li>