@Url.Action does not route when clicked in the navbar

Question

I do not possess much knowledge on MVC, JavaScript or Bootstrap. But here I am stuck at something working on all the three. I have a Layout page consisting of a navigation bar styled using Bootstrap. Idea taken from here. Markup given below.

<div id="innerTab">
  <ul class="nav nav-pills">
    <li class="active">
      <a href="@Url.Action(" Index ", "Home ")" data-toggle="tab">Index</a>
    </li>
    <li>
      <a href="@Url.Action(" About ", "Home ")" data-toggle="tab">About</a>
    </li>
  </ul>

  <div class="tab-content clearfix">
    <div class="tab-pane active">
      @RenderBody()
    </div>
  </div>
</div>

Since this is a Layout View, I want to be able to load the content from the other Views in the tab content area. Due to which, I have to make use of @RenderBody() which cannot be called more than once. I am not really sure what data-toggle does exactly but clicking on About had no impact whatsoever. Then I realised that I had to manually set the active class on the clicked tab via JS. So this is what I did.

$(".nav li").on("click", function() {
  $(".nav li").removeClass("active");
  $(this).tab('show');
})

Now, the selected tab did become active. However, for some unknown reason, when clicked on About, it does not navigate to the About page but stays at Index. Because of which I had to change it to @Html.ActionLink as given below.

@Html.ActionLink("About", "About", "Home")

This successfully navigated to the About page. However, the About tab becomes active for a second and quickly switches to the Index tab but displays the content from the About page. like below.

Thought adding data-toggle would fix this. So I followed the answer given here.

@Html.ActionLink("About", "About", "Home", new { data_toggle="tab"})

And then it's back to square one. Except for the fact that it highlights the tab I select, it does nothing.I am lost!! Where am I going wrong?

First remove Bootstrap's javascript and css -- it will look bad but forget about that for now. Does the navigation load the page that you'd expect? Next, read about [Bootstrap's nav](https://getbootstrap.com/docs/3.3/components/#nav) component then reintroduce the javascript and css. The nav component should work without custom script. — Jasen, Oct 06 '17 at 03:12
@Jasen removing Bootstrap enables navigation without any problems!! So the issue was with the way I handled the Bootstrap CSS then. — Akshatha, Oct 06 '17 at 03:19

adiga · Accepted Answer · 2017-10-06T12:29:50.150

First, @Url.Action(" Index ", "Home ") isn't working because you have extra spaces around your Action and Controller arguments.

It should be @Url.Action("Index", "Home")

"The About tab becomes active for a second and quickly switches to the Index"

That's because, on click, jQuery click event adds a class. But MVC redirects to a new page and the _Layout is rendered again with the default active tab Home.

So to the top of your About.cshtml,

@{
    ViewBag.Title = "About";
    ViewBag.ActiveNav = "About"; // you'll need to add this to Home as well
}

Then change the Layout to:

  <ul class="nav nav-pills">

   //Based on the "ActiveNav" value, "active" class will be added

    <li class="@(ViewBag.ActiveNav == "Home" ? "active" : "")">
      @Html.ActionLink("Index", "Index", "Home")
    </li>
    <li class="@(ViewBag.ActiveNav == "About" ? "active" : "")">
      @Html.ActionLink("About", "About", "Home")
    </li>
  </ul>

Now the active class is added to particular li, based on the page.

I knew the issue was with the class being reset on new page rendering!! Just didn't know how to fix it. This works like a charm!! Dhanyawadagalu!! :) — Akshatha, Oct 08 '17 at 03:00

@Url.Action does not route when clicked in the navbar

1 Answers1