Quelle est la manière la plus simple de changer l'image de l'onglet sélectionné dans ASP.NET MVC?

Question

J'ai vu cette question, An easy way to set the active tab, mais je ne suis pas sûr que ce soit une solution optimale.

Je cherche à voir comment les autres ont géré la sélection des onglets dans leurs vues/contrôleurs dans ASP.NET MVC.

Quelle est la manière la plus simple d'implémenter des onglets sélectionnables dans ASP.NET MVC? Je souhaite éviter les méthodes javascript pour permettre aux navigateurs non compatibles avec js de voir l'onglet sélectionné.

Answer 1

EDIT: Grattez cela ci-dessus, ce n'est pas ce que j'ai fait, c'était une combinaison non-fonctionnelle de deux méthodes que j'ai utilisées.

J'ai dû gérer des états à deux endroits différents sur une même page. La première façon que je viens d'ajouter CSS à la vue de changer l'onglet pour le style correct. La deuxième chose que je devais faire était d'utiliser ViewData pour me donner une variable que je passais à un assistant que j'ai écrit pour sortir CSS dans la section head de la vue pour indiquer un état spécifique à la page (si cela a du sens, un peu comme une catégorie serait mise en évidence sur une page de produits).

Donc à mon avis, j'ai ces lignes twho:

<% var onState = ViewData["OnState"].ToString(); %> 
<%= Html.OutputOnState(onState) %> 

qui accomplit ce que je suis très bien après. Le CSS est codé en dur dans l'assistant car il s'agit d'un petit site, donc je suis sûr qu'il y a une meilleure façon de le faire.

Answer 2

je fais quelque chose de similaire à ce qui suit au cours exemple simplifié ;-)

Controller:

public ActionResult Index() 
{ 
    ViewData["MainMenuOn"] = "Home"; 
    return View(); 
} 

public ActionResult About() 
{ 
    ViewData["MainMenuOn"] = "About"; 
    return View(); 
} 

public ActionResult Contact() 
{ 
    ViewData["MainMenuOn"] = "Contact"; 
    return View(); 
} 

Vue:

<ul id="main-menu"> 
    <li class="<%= Html.MainMenuOn("Home") %>">... action link for home action ...</li> 
    <li class="<%= Html.MainMenuOn("About") %>">... action link for about action ...</li> 
    <li class="<%= Html.MainMenuOn("Contact") %>">... action link for contact action ...</li> 
</ul> 

extension Helper:

public static string MainMenuOn(this HtmlHelper html, string menuItem) 
{ 
    if ((html.ViewData["MainMenuOn"] != null) && (html.ViewData["MainMenuOn"] == menuItem)) 
     return "on"; 

    return ""; 
} 

Ensuite, ton css devrait être assez simple

ul#main-menu li 
{ 
    background: green; 
} 

ul#main-menu li.on 
{ 
    background: blue; 
} 

Il y a beaucoup de façons de la peau ce chat ... en fonction de vos besoins, je commencer à examiner différentes façons de mettre en œuvre l'extension HtmlHelper.

HTHs, Charles