这似乎是在 ASP.NET MVC 中实现选项卡的好方法吗？

Question

查看Orange Tabs ASP.NET MVC 演示如何处理选项卡后，他们有类似的内容：

查看：

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

以及相应的辅助类：

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

这似乎是解决这个问题的一种优雅方式吗？我见过几十种不同的方式，从 javascript 到查询字符串等等。

我不喜欢 javascript，因为我希望该网站适用于不支持 js 的浏览器，而且查询字符串方法看起来很笨拙。

Answer 1

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

我会将所有这些隐藏在辅助方法后面：

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

Answer 2

如果您创建一个对象来定义菜单结构，则可以通过 ViewUserControl 轻松生成标记，这样可以更轻松地在多处使用一行进行重用（替代您喜欢的存在机制）。

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

这是我用来定义选项卡的类。

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

这是用于呈现选项卡的 ViewUserControl：

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

这是我使用的 CSS。

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

Answer 3

要么按照建议将其包装在帮助程序中，要么执行something like I describe in this answer。

Answer 4

我见过的最优雅的解决方案是 Torkel Ödegaard 在http://www.codinginstinct.com/ 使用 ViewModel 继承完成的。它包括一个用于添加/操作选项卡的流畅界面。

现在他的视图代码使用的是 Spark 视图引擎，但您可以轻松地在 WebForm 视图引擎中实现它。

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