@ Url.Action在導航欄中點擊時沒有路由

Question

我對MVC,JavaScript或Bootstrap沒有太多的知識。但在這裏，我被困在所有這三個方面。我有一個Layout頁面，其中包含使用Bootstrap設計的導航欄。想法取自here。標記如下。

<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> 

由於這是一個Layout View，我希望能夠加載從標籤內容區域其他意見的內容。因此，我必須利用@RenderBody()這不能被稱爲不止一次。我真的不確定data-toggle究竟做了什麼，但點擊About沒有任何影響。然後我意識到我必須通過JS手動設置active類的點擊標籤。所以這就是我所做的。

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

現在，所選標籤確實變爲活動狀態。但是，由於某種未知的原因，當點擊About時，它不會導航到About頁面，而是保持在Index。因此，我不得不將其更改爲@Html.ActionLink，如下所示。

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

成功導航到About頁面。但是，About選項卡會在一秒鐘內激活並快速切換到Index選項卡，但會顯示About頁面中的內容。如下所示。

思想加入data-toggle可以解決這個問題。所以我遵循給出的答案here。

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

然後它回到原點。除了突出顯示我選擇的選項卡外，它什麼都不做。我迷路了！我哪裏錯了？

Answer 1

首先，@Url.Action(" Index ", "Home ")不起作用，因爲您的Action和Controller參數附近有多餘空格。

應該@Url.Action("Index", "Home")

---

「關於選項卡用於第二變得活躍並快速切換到索引」

這是因爲，在點擊，jQuery的單擊事件添加一個類。但是MVC重定向到一個新頁面，並且_Layout再次以默認active標籤Home呈現。

所以你About.cshtml的頂部，

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

則佈局更改爲：

<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> 

現在active類添加到特定li，基於頁面。