@ Url.Actionは、ナビゲーションバーでクリックしたときにルーティングされません。

Question

MVC,JavaScriptまたはBootstrapについてはあまり知識がありません。しかし、ここで私は3つすべてに取り組んでいる何かについています。私は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()を2回以上呼び出すことはできません。私は実際に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タブは1秒間アクティブになり、すぐにIndexタブに切り替わりますが、Aboutページの内容が表示されます。以下のように。

思想この問題を解決するだろうdata-toggleを追加します。だから私はhere与えられた答えに従った。

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

次に正方形に戻ります。私が選択したタブをハイライトするという事実を除いて、何もしません。私は迷っています！どこが間違っていますか？

Answer 1

ActionとController引数の周りに余分なスペースがあるため、最初に@Url.Action(" Index ", "Home ")が機能しません。

それは@Url.Action("Index", "Home")

---

クリックで、jQueryのイベントがクラスを追加する]をクリックし、ためです

「タブについてインデックスに切り替わり迅速秒間アクティブになり、」である必要があります。しかし、MVCは新しいページにリダイレクトされ、activeタブHomeで_Layoutが再びレンダリングされます。

だからあなた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に追加されます。