Hinzufügen von Daten zu ActionLink in MVC5 und Razor 3

Question

Ich versuche, einen Umschalt-Effekt auf den Navagation-Registerkarten in einer MVC 5/Razor 3-Anwendung mit Bootstrap CSS zu erstellen. Mein aktueller gemeinsamen _Layout

 <div class="navbar-collapse collapse"> 
      <ul class="nav nav-pills">       
       <li>@Html.ActionLink("Applications", "Index", "SecureApps")</li> 
       <li>@Html.ActionLink("Users", "Index", "Users")</li> 
       <li>@Html.ActionLink("BU Groups", "Index", "BUGroups")</li> 
       <li>@Html.ActionLink("Logs", "Index", "AppLogs")</li> 
      </ul>   
     </div> 

Ich möchte ähnliche Demo die Registerkarten markieren können, wenn eine Registerkarte geklickt wird, und ich bin auf einer aktiven Seite.

ich eine Lösung Here und aktualisiert meinen Code zu diesem

   <li class="active">@Html.ActionLink("Applications", "Index", "SecureApps", null, new { id = "menu_text", data_toggle = "tab" }))</li> 
       <li>@Html.ActionLink("Users", "Index", "Users", null, new { id = "menu_text", data_toggle = "tab" })</li> 
       <li>@Html.ActionLink("BU Groups", "Index", "BUGroups", null, new { id = "menu_text", data_toggle = "tab" }))</li> 
       <li>@Html.ActionLink("Logs", "Index", "AppLogs", null, new { id = "menu_text", data_toggle = "tab" }))</li> 

Bewegen der Maus über den einzelnen Registerkarten gefunden haben, zeigt die korrekte URL-Route. aber ich bin immer ein jQuery-JavaScript-Laufzeitfehler

Unhandled exception at line 1864, column 2 in http://localhost:19932/Scripts/jquery-1.10.2.js 0x800a139e - JavaScript runtime error: Syntax error, unrecognized expression: /Users

dies der Code verweist er auf in der js Bibliothek

Sizzle.error = function(msg) { 
throw new Error("Syntax error, unrecognized expression: " + msg);}; 

einen Stützpunkt auf der @model Erklärung zum Ziel setzen Indexseiten doesn werde nicht einmal getroffen.

Answer 1

Clientseitige vs Server-Seite

Eines der Probleme dabei ist, dass, wenn Sie Ihre Links angeklickt werden, sie gehen, um tatsächlich an den entsprechenden Controller Aktion zu navigieren, wie erwartet. In diesem Fall wird Ihr aktueller clientseitiger Code, z. B. Ihre Auswahl, vollständig vergessen (da die Seite aktualisiert wird).

Änderungen auf der Clientseite werden im Allgemeinen immer gelöscht, wenn die Seite aktualisiert wird. Daher müssen Sie diese auf Serverebene persistieren.

Store an der Server-Ebene

Sie möchten Handhabung dies mit irgendeiner Art von serverseitigen Variable prüfen, um festzustellen, innerhalb der Anwendung und Einstellung der „aktiven“ Klasse „wo Sie sind“ auf passendes <li> Element für Ihre Registerkarten. Es gibt eine Vielzahl von Möglichkeiten, wie Sie damit umgehen können, indem Sie innerhalb Ihrer Controller-Aktion eine ViewBag -Eigenschaft setzen und einen Wert auf Ihrem Modell eingeben, um den aktuellen Bereich anzuzeigen.

Da Ihre Links jeweils auf verschiedene Controller verweisen, könnten Sie sogar die man bestimmen zu der aktuellen Controller-Basis zu verwenden aus gesehen unter:

<!-- Use your Controller to determine where you are --> 
@{ var controller = ViewContext.RouteData.Values["controller"]; } 
<div class="navbar-collapse collapse"> 
     <ul class="nav nav-pills">       
      <li @(controller == "SecureApps" ? "class=active" :"")>@Html.ActionLink("Applications", "Index", "SecureApps")</li> 
      <li @(controller == "Users" ? "class=active" :"")>@Html.ActionLink("Users", "Index", "Users")</li> 
      <li @(controller == "BUGroups" ? "class=active" :"")>@Html.ActionLink("BU Groups", "Index", "BUGroups")</li> 
      <li @(controller == "AppLogs" ? "class=active" :"")>@Html.ActionLink("Logs", "Index", "AppLogs")</li> 
     </ul>   
</div> 

Oder ... einfach nutzen mehr jQuery

da Ihr ActionLinks gehen, um bestimmte URLs für Ihre Aktionen zu lösen, Du könntest denkst du nur uns ea bisschen jQuery alle Links zu finden, die den aktuellen Standort spitz und machen jene aktiv:

$(function(){ 
    // Find an element that points to the current URL and make it active 
    $('a[href="@Url.Action(Convert.ToString(ViewContext.RouteData.Values["action"]), Convert.ToString(ViewContext.RouteData.Values["controller"]))"]').closest('li').addClass('active'); 
}); 

Die Url.Action() Methode in der aktuellen Controller und Maßnahmen ergreifen wird, ist es die Zielposition Rendering und es wird keine Links finden, dass Punkt auf den gleichen Wert und setzen Sie diese als "aktiv".