Keep current (selected) tab active on page reload in ASP.Net Core MVC

Richa

SOLVED CLOSED ACTIVE ANSWERED
User: Richa
Posted: on Sep 07, 2020 04:56 AM
Forum: ASP.Net MVC
Answer: 1
Views: 17014

In Asp.Net Core MVC web application,

How to keep selected tab Active upon redirect to Controllers Index action

I am developing tabs UI, using below code:

<div class="col-md-12">
	<div class="collDiv">
		<ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
			<li class="nav-item active">
				<a class="nav-link" asp-area="" asp-controller="MappingStudy" asp-action="Index">Mapping Study/Scenario/Project</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" asp-area="" asp-controller="MappingWell" asp-action="Index">Mapping Wells</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" asp-area="" asp-controller="MappingCost" asp-action="Index">Mapping Costs</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" asp-area="" asp-controller="MappingProduction" asp-action="Index">Mapping Production</a>
			</li>
		</ul>
	</div>
</div>

@section Scripts {
    <script type="text/javascript">
        @*$(function () {
            $('ul li a').each(function () {
                $('#' + '@ViewBag.Title').addClass('active');
            });
        });*@

        $('li a').click(function () {
            //$('li a').removeClass("active");
            //$(this).addClass("active");

            var current = document.getElementsByClassName("active");
            current[0].className = current[0].className.replace(" active", "");
            this.className += " active";

        });
    </script>
}

Above Javascript doesn't work as expected. I tried 2-3 ways but nothing works as expected.

Requirement: When I click on any Tab, page redirects to particular controller's Index action and selected tab shall remain active.

Issue: when I click on any tab, the tab is active for few seconds until page is redirected to Index action. After redirect, active no longer works.

Please let me know how to keep selected tab Active upon redirect to Index action.

Thank you in advance.

Download FREE API for Word, Excel and PDF in ASP.Net

Mudassar

0 14

Reply
ANSWER
User: Mudassar
Replied: on Sep 08, 2020 01:32 PM
Report

Well its a myth. You are mnot debugging and checking.

To Prove to same code I added 3 Controllers.

Layout

@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
          media="screen" />
</head>
<body>
    <div class="col-md-12">
        <div class="collDiv">
            <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
                <li class="nav-item active">
                    <a class="nav-link" id="lnkIndex" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="lnkServices" asp-area="" asp-controller="Services" asp-action="Index">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="lnkAbout" asp-area="" asp-controller="About" asp-action="Index">About</a>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
                $(".nav-item").removeClass("active");
                $("#lnk" + "@ViewBag.View").closest(".nav-item").addClass("active");
        });
    </script>
    @RenderBody()
</body>
</html>

Controllers

public class AboutController : Controller
{
    public IActionResult Index()
    {
        ViewBag.View = "About";
        return View();
    }
}

public class HomeController : Controller
{
    public IActionResult Index()
    {
        ViewBag.View = "Home";
        return View();
    }
}

public class ServicesController : Controller
{
    public IActionResult Index()
    {
        ViewBag.View = "Services";
        return View();
    }
}

Views

@{
    ViewData["Title"] = "About";
    Layout = "~/Views/Shared/Layout.cshtml";
}

<h2>About Index</h2>

@{
    ViewData["Title"] = "Services";
    Layout = "~/Views/Shared/Layout.cshtml";
}

<h2>Home Index</h2>

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/Layout.cshtml";
}

<h2>Services Index</h2>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Keep current (selected) tab active on page reload in ASP.Net Core MVC

Company

Explore

Follow us

Contact Us