Scheint dies ein guter Ansatz zum Implementieren von Registerkarten in ASP.NET MVC zu sein?

Question

Nach einem Blick auf, wie die Orange Tabs ASP.NET MVC-Demo Tabs behandelt, haben sie so etwas wie:

Ausblick:

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

und eine entsprechende Hilfsklasse:

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

scheint dies Wie eine elegante Art, dieses Problem anzugehen? Ich habe Dutzende von verschiedenen Möglichkeiten gesehen, von Javascript zu Abfragezeichenfolgen, etc.

Ich mag Javascript nicht, weil ich will, dass die Website in Ordnung für nicht-js-fähigen Browsern und der Abfrage-String-Ansatz scheint Clundedy.

Answer 1

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

ich mich verstecken würde das alles hinter einer Hilfsmethode:

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

Answer 2

Entweder es in einem Helfer wickeln wie vorgeschlagen oder something like I describe in this answer tun.

Answer 3

Die eleganteste Lösung, die ich jemals gesehen habe, wurde von Torkel Ödegaard über http://www.codinginstinct.com/ mit ViewModel Vererbung gemacht. Es enthält eine große fließende Oberfläche zum Hinzufügen/Bearbeiten von Tabs.

Jetzt verwendet sein Ansichtscode die Spark-Ansichts-Engine, die Sie jedoch problemlos in der WebForm-Ansichts-Engine implementieren können.

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

Answer 4

Wenn Sie ein Objekt erstellen, kann die Menüstruktur die Markup zu definieren leicht durch einen Viewusercontrol erzeugt werden, die es einfacher machen würden, mit einer einzigen Zeile an mehreren Stellen wieder zu verwenden (ersetzen Sie Ihren bevorzugten presistence-Mechanismus).

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

Hier ist eine Klasse, die ich verwendet habe, um die Registerkarten zu definieren.

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

und hier ist der Viewusercontrol die Registerkarten machen verwendet:

<%@ 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> 
<%} %> 

Hier ist die CSS-I verwendet.

#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; 
}