Est-ce que cela semble être une bonne approche pour implémenter des onglets dans ASP.NET MVC?

Question

Après avoir regardé comment les poignées démo ASP.NET MVC Orange Tabs onglets, ils ont quelque chose comme:

Vue:

<ul id="menu"> 
      <% if (Html.IsCurrentAction("Index", "Home")) { %> 
       <li class="active"><%= Html.ActionLink("Home", "Index", "Home")%></li> 
      <% } else { %> 
       <li><%= Html.ActionLink("Home", "Index", "Home") %></li> 
      <% }%> 

      <% if (Html.IsCurrentAction("About", "Home")) 
       { %> 
       <li class="active"><%= Html.ActionLink("About", "About", "Home")%></li> 
      <% } else { %> 
       <li><%= Html.ActionLink("About", "About", "Home")%></li> 
      <% }%> 

      <% if (Html.IsCurrentAction("SampleTags", "Home")) 
       { %> 
       <li class="active"><%= Html.ActionLink("Sample Tags", "SampleTags", "Home")%></li> 
      <% } else { %> 
       <li><%= Html.ActionLink("Sample Tags", "SampleTags", "Home")%></li> 
      <% }%> 
      </ul> 

et une classe d'aide correspondante:

namespace Helpers 
{ 
    public static class IsCurrentActionHelper 
    { 
     public static bool IsCurrentAction(this HtmlHelper helper, string actionName, string controllerName) 
     { 
      string currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"]; 
      string currentActionName = (string)helper.ViewContext.RouteData.Values["action"]; 

      if (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) && currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase)) 
       return true; 

      return false; 
     } 
    } 
} 

Cela vous semble comme une manière élégante d'aborder ce problème? Je n'ai pas aimé javascript parce que je veux que le site soit bien pour les navigateurs non-js activés et l'approche de chaîne de requête semble cludgey.

Answer 1

<% if (Html.IsCurrentAction("Index", "Home")) { %> 
    <li class="active"><%= Html.ActionLink("Home", "Index", "Home")%></li> 
<% } else { %> 
    <li><%= Html.ActionLink("Home", "Index", "Home") %></li> 
<% }%> 

Je cache derrière tout cela une méthode d'assistance:

<%= Html.Activelink("Index", "Home", "Home") %> 

Answer 2

Soit l'envelopper dans un aide comme suggéré, ou faire something like I describe in this answer.

Answer 3

La solution la plus élégante que j'ai jamais vue a été faite par Torkel Ödegaard au http://www.codinginstinct.com/ en utilisant l'héritage ViewModel. Il comprend une excellente interface fluide pour ajouter/manipuler des onglets. Maintenant, son code de vue utilise le moteur de vue Spark, mais vous pouvez facilement l'implémenter dans le moteur de vue WebForm.

http://www.codinginstinct.com/2008/10/view-model-inheritance.html

Answer 4

Si vous créez un objet pour définir le Arborescence des menus le balisage peut facilement être générée par un ViewUserControl qui rendrait plus facile à réutiliser dans plusieurs endroits avec une seule ligne (remplacer votre mécanisme de presistence préféré).

<% Html.RenderPartial("Tabs", Session[Consts.cAdminTabSet]); %> 

Voici une classe que j'ai utilisée pour définir les onglets.

public class TabSet 
{ 
    public string ContainerID {get;set;} 
    public List<TabDefinition> Tabs { get; set; } 
    public string activeTab { get; set; } 
} 

public class TabDefinition 
{ 
    public string Name { get; set; } 
    public string Title { get; set; } 
    public string HRef { get; set; } 
    public string Img { get; set; } 
    public bool ShowText { get; set; } 
    public string CSSClass { get; set; } 
} 

et est ici le ViewUserControl utilisé pour rendre les onglets:

<%@ Control Language="C#" 
Inherits="System.Web.Mvc.ViewUserControl<TabSet>" %> 
<% if (Model != null && !Model.Collapsed) 
    { %> 
    <div id="<%= Model.ContainerID %>"> 
     <ul> 
     <% foreach (var tb in Model.Tabs) 
      {%> 
       <li class="<%= (tb.Name == Model.activeTab)? "selected": "" %> <%= (string.IsNullOrEmpty(tb.CSSClass)) ? "" : tb.CSSClass %>"> 

        <a title="<%= tb.Title %>" href="<%= tb.HRef %>"> 
        <span><% if (!string.IsNullOrEmpty(tb.Img)){%><img alt="<%= tb.Name %>" src="<%= tb.Img %>" /><%} %> 
        <% if (string.IsNullOrEmpty(tb.Img) || tb.ShowText == true){%><%= tb.Name%><%} %></span></a> 
       </li> 
      <%} %> 
     </ul> 
    </div> 
<%} %> 

Voici le CSS je.

#lvl3Tab 
{ 
    float: left; 
    width: 100%; 
    background: #C50000; 
    font-size: 93%; 
    line-height: normal; 
    /*border-bottom: 1px solid #666;*/ 
} 
#lvl3Tab img 
{ 
    border: none; 
    padding: 0px; 
    margin: 0px; 
} 

#lvl3Tab ul 
{ 
    margin: 0; 
    padding: 5px 10px 0 50px; 
    list-style: none; 
} 
#lvl3Tab li 
{ 
    display: inline; 
    margin: 0; 
    padding: 0; 
} 
#lvl3Tab a 
{ 
    float: left; 
    background: url("/images/tableftM.gif") no-repeat left top; 
    margin: 0; 
    padding: 0 0 0 4px; 
    text-decoration: none; 
} 
#lvl3Tab a span 
{ 
    float: left; 
    display: block; 
    background: url("/images/tabrightM.gif") no-repeat right top; 
    padding: 5px 15px 4px 6px; 
    color: #666; 
} 
/* Commented Backslash Hack hides rule from IE5-Mac \*/ 
#lvl3Tab a span 
{ 
    float: none; 
    color: #fff; 
} 
/* End IE5-Mac hack */ 
#lvl3Tab a:hover span 
{ 
    color: #FFF; 
} 
#lvl3Tab a:hover 
{ 
    background-position: 0% -42px; 
} 
#lvl3Tab a:hover span 
{ 
    background-position: 100% -42px; 
    color:#666; 
} 
#lvl3Tab ul li.selected a 
{ 
    background-position: 0% -42px; 
} 
#lvl3Tab ul li.selected a span 
{ 
    background-position: 100% -42px; 
    color: #666; 
}